JQGrid / Date Picked within Add/Edit window

Question

I have been able to work the Date Picker into JQGrid when editing inline, but I am unable to use it inside the add/edit window. Does anyone have instructions on how to do this or an example I can look at?

demo from that site of what I am trying to do: http://www.the-di-lab.com/demo/apples

I read that I could use the following method but not sure how to integrate it:

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

The main thing is to set z-index for datepicker. See [this][1]. [1]: http://stackoverflow.com/questions/715677/trouble-with-jquery-dialog-and-datepicker-plugins/715695#715695 — , Aug 23 '11 at 16:47

score 16 · Answer 1 · edited Nov 21 '11 at 20:57

16

Adding datepicker is an easy task:

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

Of couse, instead of .datepicker you can use any plugin like colorpicker or autocomplete.

edited Nov 21 '11 at 20:57

Jason Plank

2,336
5
31
40

answered Aug 20 '09 at 05:27

-1, You have several errors in there... and that code doesn't seem to even work after fixing the errors – Fragsworth Mar 16 '10 at 18:35
+1, Thanks for pointing out the `editoptions.dataInit`; that was the piece missing to get my inline editing working. – Anthony Mills Mar 25 '11 at 21:48
It says "Uncaught TypeError: undefined is not a function" for me... Could you guess what I missed? – CJ Ramki Jul 23 '14 at 03:08

score 3 · Accepted Answer · answered Aug 19 '09 at 22:47

It looks like they are using 'afterShowForm' to attach a date/color picker to a div.
(view 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(); }
},

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

Thanks for finding this example, I was looking for how to do this as well.

Thank you, it is slowly coming together, the jsrs code is being triggered when the window opens but I am just getting the "$("#appointment").DatePicker is not a function" (I changed the instances of #date to #appointment since that is the id of the desired field) All the needed scripts/ui are there to get it working outside of the popup, Is there something I need to do that I might be missing? Thank You!! — kilrizzy, Aug 20 '09 at 18:06
Oh I just needed "datepicker" instead of "DatePicker" THANKS! — kilrizzy, Aug 20 '09 at 18:11

score 1 · Answer 3 · answered Aug 13 '10 at 13:24

Use this code to add datepicker to create/edit dialog:

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

JQGrid / Date Picked within Add/Edit window

3 Answers3

Linked