JQGrid/Fecha seleccionada en la ventana Agregar/Editar

Question

He podido trabajar el Selector de fechas en JQGrid al editar en línea, pero no puedo usarlo dentro de la ventana de agregar/editar. ¿Alguien tiene instrucciones sobre cómo hacer esto o un ejemplo que pueda ver?

demostración de ese sitio de lo que estoy tratando de hacer: http://www.the-di-lab.com/demo/apples

leí que podría utilizar el siguiente método, pero no está seguro de cómo integrarlo:

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

Answer 1

Parece como si estuvieran usando 'afterShowForm' para adjuntar un selector de fecha/color a un div.
(ver fuente)

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

(ver fuente)

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

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


//Js for datePicker 
$('#date').DatePicker({ 
    format:'Y-m-d', 
    date: $('#date').val(), 
    current: $('#date').val(), 
    starts: 1, 
    position: 'bottom', 
    onBeforeShow: function(){ 
     $('#date').DatePickerSetDate($('#date').val(), true); 
    }, 
    onChange: function(formated, dates){ 
     $('#date').val(formated); 
    } 
    }); 

Gracias por encontrar este ejemplo, yo estaba buscando la manera de hacer esto también.

Answer 2

Adición planificador de evento es una tarea fácil:

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 ... 
] 

De couse, en lugar de .datepicker se puede utilizar cualquier plug-in como colorpicker o autocompletar.

Answer 3

Use este código para agregar selector de fechas de diálogo para crear/editar:

.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") 
        } 
       }, 
       ...