selector de fecha en jqGrid, ejemplo simple?

Question

¿Alguien sabe de un ejemplo de agregar jquery UI DatePicker (u otro quizás) en el jqGrid? Estoy intentando hacer que funcione para una grilla de edición en línea.

He encontrado algunos ejemplos, pero nada funciona. ¡Me gustaría algo realmente simple!

configuración Mi cuadrícula (no sé si es nessecary para esta pregunta):

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

Como se puede leer en jqGrid documentation hay una opción para este dataInit. Lo que debe recordar que este evento se produce antes de que el elemento se inserta en DOM, a fin de utilizar setTimeout sólo para estar seguro:

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

Answer 2

La simplicidad del código dependen del formato de los datos que usted completa el ' Columna de cumpleaños. Lo que más necesita es incluir

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

como propiedad adicional de la columna 'Cumpleaños'. A veces hay que definir la devolución de llamada onSelect para datepicker (ver here), en algún momento es necesario utilizar setTimeout adicionalmente o realizar algunas otras personalizaciones (ver the answer) que incluye demostraciones de trabajo.