JQGrid/Data scelta all'interno della finestra Aggiungi/Modifica

Question

Sono stato in grado di utilizzare il selettore di date in JQGrid durante la modifica in linea, ma non riesco a utilizzarlo nella finestra di aggiunta/modifica. Qualcuno ha istruzioni su come fare questo o un esempio che posso guardare?

demo da quel sito di quello che sto cercando di fare: http://www.the-di-lab.com/demo/apples

ho letto che ho potuto utilizzare il seguente metodo, ma non è sicuro come integrarla:

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

Answer 1

Sembra che siano usando 'afterShowForm' per allegare un selettore data/colore a un div.
(visualizza sorgente)

 
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(); } 
}, 

(visualizza sorgente)

 
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); 
    } 
    }); 

Grazie per la ricerca di questo esempio, ero alla ricerca di come fare questo pure.

Answer 2

Aggiunta datepicker è un compito facile:

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

Di couse, invece di .datepicker è possibile utilizzare qualsiasi plugin come colorpicker o di completamento automatico.

Answer 3

Usa questo codice per aggiungere datepicker per creare dialogo/edit:

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