Menu
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 entered are valid?
Thanks in advance!
486
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 <head> tags, place the following after your <link rel="stylesheet"... href="css/ui.jqgrid.css" /> line:
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
Then, still within the <head> tags mind you, insert the the following after your <script src="js/jquery-ui-1.7.2.custom.min.js" ...></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
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.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
