I have seen users asking how to programmatically select a date using jQuery UI DatePicker control.
The DatePicker beforeShowDay event is ideal for this type of a requirement. As described in the documentation “The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the DatePicker before it is displayed.”
Here’s an example. Assume you want to select a date “9-22-2010”
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select a Date in jQuery DatePicker</title>
<link rel="Stylesheet" type="text/css" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
/>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js">
</script>
<script type="text/javascript">
$(function () {
$("#devcurry-datepic").datepicker({
beforeShowDay: function (date) {
var selDate = "9-22-2010";
// month are 0 based, so +1.
var mm = date.getMonth() + 1, dd = date.getDate(),
yy = date.getFullYear();
// format date
var dt = mm + "-" + dd + "-" + yy;
if (dt == selDate) {
return [true, "ui-state-hover"];
}
return [true, ""];
}
});
});
</script>
</head>
<body>
<input id="devcurry-datepic"/>
</body>
</html>
In the code shown above, we format the date and compare it with the date that has to be selected. If it matches, apply a css style ‘ui-state-hover’ to give it a selected feel. You can use any other class you want. The result is shown below with 22nd September selected.
Has anyone been able to use the setDate function in this scenario. It seems this function worked only in the previous versions of jQuery UI. Let me know if it has worked for you!
Tweet
About The Author
3 comments:
Do you know how to change the dateformat to year-month-day?
HOw we could unselectable all days before current day?
It is usefull article but what if I need to select more dates?
Post a Comment