Выбор даты в jqGrid, простой пример?

Question

Кто-нибудь знает пример добавления jQuery UI DatePicker (или, возможно, другого) в jqGrid? Я пытаюсь заставить его работать для встроенной сетки редактирования.

Я нашел несколько примеров, но ничего не работает. Я хотел бы что-то действительно простое!

Настройка моей сетки (не знаю, необходим ли он для этого вопроса):

    $(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

Простота кода зависит от формата данных, которые вы заполняете в столбце «День рождения». В основном вам нужно включить

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

как дополнительное свойство столбца «День рождения». Иногда нужно определить onSelect обратный вызов для datepicker (см. здесь ), иногда нужно дополнительно использовать setTimeout или выполнить некоторые другие настройки (см. ответ ), которые включает рабочие демонстрации.

Answer 2

Как вы можете прочитать в jqGrid документации , для этого есть опция dataInit.Что вы должны помнить, что это событие вызывается до того, как элемент вставлен в DOM, поэтому используйте setTimeout просто для безопасности:

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