How do I add datepicker in the add row dialog in jqGrid?

Question

Hi I\'m using jqGrid and I\'m wondering, how do I add jQueryUI\'s datepicker to some of the input fields when in the add row dialog?

Also how do I check if the input ent

Answer 1

After researching this myself a while back, this is what I mashed together based off various input from others. I'm making the assumption that you already have the CSS and JS datepicker files. If not, let me know and I'll track them down for you. Within the tags, place the following after your line:

Then, still within the tags mind you, insert the the following after your

Now, within the colmodel array, you are going to add your datepicker JS code to the field of which the datepicker will be used. In my case, I had a 'Last Modified Date' field. So within the colmodel array, your code should look something like this:

{name:'last_modified_date', index:'last_modified_date', width:90, editable:true, editoptions:{size:20, 
                  dataInit:function(el){ 
                        $(el).datepicker({dateFormat:'yy-mm-dd'}); 
                  }, 
                  defaultValue: function(){ 
                    var currentTime = new Date(); 
                    var month = parseInt(currentTime.getMonth() + 1); 
                    month = month <= 9 ? "0"+month : month; 
                    var day = currentTime.getDate(); 
                    day = day <= 9 ? "0"+day : day; 
                    var year = currentTime.getFullYear(); 
                    return year+"-"+month + "-"+day; 
                  } 
                } 
              },

Also, I'm sure you have already checked this out but be sure to visit the jqGrid wiki. The wiki has documentation for the tool and the blog also has forums where questions are asked daily. In fact, I think Tony, the author of the plugin, even has a UI datepicker example on his example page.

Hopefully that helps.