JQGrid/Date sélectionnée dans la fenêtre Ajouter/Modifier

Question

J'ai pu utiliser le sélecteur de dates dans JQGrid lors de la modification en ligne, mais je ne peux pas l'utiliser dans la fenêtre d'ajout/édition. Est-ce que quelqu'un a des instructions sur la façon de faire cela ou un exemple que je peux regarder?

démo de ce site de ce que je suis en train de faire: http://www.the-di-lab.com/demo/apples

Je lis que je pouvais utiliser la méthode suivante mais ne savez pas comment l'intégrer:

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

Answer 1

On dirait qu'ils sont en utilisant 'afterShowForm' pour attacher un sélecteur de date/couleur à un div.
(voir la source)

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

(voir la source)

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

Merci pour avoir trouver cet exemple, je cherchais comment faire aussi bien.

Answer 2

Ajout datepicker est une tâche 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 ... 
] 

de couse, au lieu de .datepicker vous pouvez utiliser un plugin comme colorpicker ou saisie semi-automatique.

Answer 3

Utilisez ce code pour ajouter datepicker pour créer/dialogue d'édition:

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