The DatePicker
beforeShowDayevent can be used to select a date in jQuery UI Control. 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-24-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 () {
$("#miteshvmehta-jquery-ui-control-datepic").datepicker({
beforeShowDay: function (date) {
var selDate = "9-24-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="miteshvmehta-jquery-ui-control-datepic" type="text"/>
/>
</body>
</html>
step1: Add jQuery references in header tag of page. Lets use googleApi's
< link rel="Stylesheet" type="text/css" href="%20http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
Add Script tag for jQuery reference
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"
Step2: Add Javascript / jQuery code to set the date
$(function () {
$("#miteshvmehta-jquery-ui-control-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, ""];
}
});
});
Step3: In Body part add a text-box
In the above code, we format 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 24th September selected.
--
miteshvmehta
No comments:
Post a Comment