jqGridの日付ピッカー、簡単な例？

Question

jquery UI DatePicker（または他の何か）をjqGridに追加する例を知っている人はいますか？私はそれをインライン編集グリッドのために働かせようとしています。

私はいくつかの例を見つけましたが、何も機能しません。本当にシンプルなものが欲しいです！

マイ・グリッド・セットアップ（それはこの質問のために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オプションがあります。あなたは、このイベントは、要素がDOMに挿入される前に発生するので、念のためには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(); } } 

を含めることがほとんど必要です。場合によっては、（hereを参照）のonSelectコールバックを定義する必要があります。setTimeoutを追加したり、デモを含むその他のカスタマイズ（the answerを参照）を行う必要があります。