LoginSignup
3
3

More than 5 years have passed since last update.

jqGridのFormEditingで複数のdatepickerを設定したい

Last updated at Posted at 2013-11-30

例えば、start_dateとend_dateみたいな日付項目の2個あるレコードをjqGirdで表示、標準で備わっているモーダルダイアログ型のフォームを出して編集させたい場合

$('#table_id').jqGrid({
/**
(略)
*/
colNames   : ['日付1', '日付2', '本文'],
colModel   : [
    {
        name: 'start_date',
        index: 'start_date',
        width: 100,
        jsonmap: 'start_date',
        editable: true,
        edittype: 'text',
        editoptions: {
            dataInit: function(e){
                setTimeout(function(){
                    $(e).datepicker({
                        dateFormat: 'yy-mm-dd'
                    });
                }, 200);
            }
        },
        editrules: {
            required: true
        }
    },
    {
        name: 'end_date',
        index: 'end_date',
        width: 100,
        jsonmap: 'end_date',
        editable: true,
        edittype: 'text',
        editoptions: {
            dataInit: function(e){
                setTimeout(function(){
                    $(e).datepicker({
                        dateFormat: 'yy-mm-dd'
                    });
                }, 200);
            }
        },
        editrules: {
            required: true
        }
    },
/**
略
*/
}).navGrid('#pager_id', {
    add: true,
    edit: true,
/**
(略)
*/
},{
/**
(略)
*/
});


のような形で書けば一瞬うまくいったように見えるけど、日付入力させるところで何か挙動がおかしくなる
私が遭遇した具体例はend_dateにフォーカスがあたると、start_dateのdatepickerが出てきていつまでもend_dateが入力できない、特にdatepickerを設定した項目に真っ先にフォーカスがあたるような形でそれが起こる

で、調べてみたのですが

jqgrid multiple datepickers and autofocus

というドンピシャなスレッドを発見
どうやら、navGridのAdd/Editのオプションのところに

    {
        closeAfterAdd: true,
        modal: true,
        jqModal: false /** ←コレ */
    }

を入れるといいらしい
実際やってみましたが、フォーカスがいきなりdatepicker項目にあたることもなく、2つともちゃんとdatepickerがでてきてくれるようになった

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3