He podido trabajar el Selector de fecha 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 puedo 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 usar el siguiente método pero no estoy seguro de cómo integrarlo:

dataInit : function (elem) {
$(elem).datepicker();
}
6
kilrizzy 7 ago. 2009 a las 22:31

3 respuestas

La mejor respuesta

Parece que están 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, estaba buscando cómo hacer esto también.

3
dwright 19 ago. 2009 a las 22:47

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

Por supuesto, en lugar de .datepicker puede usar cualquier complemento como colorpicker o autocompletar.

16
Jason Plank 21 nov. 2011 a las 20:57

Use este código para agregar datepicker para crear / editar el diálogo:

.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")
                    }
                },
                ...
1
katrin 13 ago. 2010 a las 13:24