jquery: 2010

Programmatically selecting a date using jQuery UI DatePicker control:

The DatePicker

beforeShowDay

event 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

jquery

Friday, September 24, 2010

jQuery Basics / Fundamentals

Programmatically selecting a date using jQuery UI DatePicker control