javascript - JQGrid/追加/編集ウィンドウ内で選択された日付

Question

インライン編集時に日付ピッカーをJQGridに組み込むことはできましたが、追加/編集ウィンドウ内で使用できません。誰かがこれを行う方法や私が見ることができる例についての指示がありますか？

私がやろうとしていることのそのサイトからのデモ：http ：//www.the-di-lab.com/demo/apples

次の方法を使用できると読みましたが、統合する方法がわかりません。

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

Answer 1

日付ピッカーを追加するのは簡単な作業です:

colModel: [
  ... other column definitions ...
  {
    name:'my_date', index:'my_date', label: 'Date', width: 80,
    editable: true, edittype: 'text',
    editoptions: {
      size: 10, maxlengh: 10,
      dataInit: function(element) {
        $(element).datepicker({dateFormat: 'yy.mm.dd'})
      }
    }
  },
  ... other column definitions ...
]

もちろん、代わりに、.datepickerカラーピッカーやオートコンプリートなどのプラグインを使用できます。

Answer 2

「afterShowForm」を使用して、日付/カラー ピッカーを div にアタッチしているようです。
（ソースを表示）

jQuery("#list").navGrid("#pager",{edit:true,add:true,del:true},
                     {幅:400,高さ:400,closeAfterEdit:true,
            afterShowForm:function(){ $("#jsrs").load("/demo/apples/jsrs"); }、
            onclickSubmit:function() { $("#jsrs").empty(); }
}、

（ソースを表示）

http://www.the-di-lab.com/demo/apples/jsrs

//colorPicker の Js
$('#color').ColorPicker({
    onSubmit: function(hsb, hex, rgb) {
        $('#color').val("#"+hex);
    }、
    onBeforeShow: 関数 () {
        $(this).ColorPickerSetColor(this.value);
    }
}).bind('keyup', function(){
    $(this).ColorPickerSetColor(this.value);
});


//datePicker の Js
$('#date').DatePicker({
    フォーマット:'Ymd',
    日付: $('#date').val(),
    現在: $('#date').val(),
    開始: 1,
    位置: '下',
    onBeforeShow: 関数(){
        $('#date').DatePickerSetDate($('#date').val(), true);
    }、
    onChange: 関数 (フォーマット済み、日付){
        $('#date').val(フォーマット済み);
    }
    });

この例を見つけてくれてありがとう、私もこれを行う方法を探していました。

Answer 3

このコードを使用して、datepicker を作成/編集ダイアログに追加します。

.navGrid('#yourID',
                { edit: true, add: true, del: true, search: true }, //options
                {
                    ...  
                    onInitializeForm: function() {
                       $('#yourDate').datepicker(); 
                     },
                    onClose: function() {
                       //if you close dialog when the datepicker is shown
                       $('.hasDatepicker').datepicker("hide")
                    }
                },
                ...