jqGrid में दिनांक-पिकर, सरल उदाहरण?

Question

क्या किसी को jqGrid में jquery UI DatePicker (या कुछ अन्य शायद) जोड़ने का उदाहरण पता है? मैं इसे एक इनलाइन संपादन ग्रिड के लिए काम करने की कोशिश कर रहा हूं।

मुझे कुछ उदाहरण मिल गए हैं, लेकिन कुछ भी काम नहीं करता है। मुझे कुछ सचमुच सरल चाहिए!

मेरे ग्रिड सेटअप (अगर यह इस प्रश्न के लिए nessecary है पता नहीं है):

$(function() { 
    var lastsel; 
    $("#list").jqGrid({ 
     url: '@Url.Action("ExampleData", "Home")', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['Namn', 'Födelsedag', 'Adress', 'Stad'], 
     colModel: [ 
      { name: 'Name', index: 'Name', width: 130, editable: true }, 
      { name: 'Birthday', index: 'Birthday', width: 80, editable: true }, 
      // DatePicker for birthday 

      { name: 'Address', index: 'Address', width: 180, editable: true }, 
      { name: 'City', index: 'City', width: 80, editable: true }, 
     ], 
     pager: '#pager', 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortname: 'Name', 
     sortorder: 'desc', 
     viewrecords: true, 
     gridview: true, 
     width: 700, 
     onSelectRow: function (id) { 
      if (id && id !== lastsel) { 
       jQuery('#list').jqGrid('saveRow', lastsel); 
       jQuery('#list').jqGrid('editRow', id, true); 
       lastsel = id; 
      } 
     }, 
     editurl: '@Url.Action("Incoming", "Home")', 
     caption: 'Kontaktpersoner' 
    }); 

    jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: true }); 
    jQuery("#list").jqGrid('inlineNav', "#pager"); 

Answer 1

आप jqGrid documentation में पढ़ सकते हैं के रूप में इस के लिए एक dataInit विकल्प नहीं है। आप क्या याद रखना चाहिए कि इस घटना से पहले तत्व डोम में डाला जाता है उठाया है, इसलिए का उपयोग setTimeout सुरक्षा के लिए:

{ name: 'Birthday', index: 'Birthday', width: 80, editable: true editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } }, 

Answer 2

कोड की सादगी डाटा का स्वरूप है जो आप में भरने 'की निर्भर जन्मदिन 'कॉलम। आपको अधिकांशतः

editoptions: { dataInit: function (elem) { $(elem).datepicker(); } } 

अतिरिक्त रूप से 'जन्मदिन' कॉलम की संपत्ति शामिल करना है। कभी-कभी datepicker के लिए onSelect कॉलबैक को परिभाषित करने की आवश्यकता होती है (here देखें), कभी-कभी setTimeout का उपयोग करने की आवश्यकता होती है या कुछ अन्य अनुकूलन (the answer देखें) जिसमें काम करने वाले डेमो शामिल हैं।