JQueryUI - Day 8 (Datepicker)

Article

Before reading this article, I highly recommend reading the previous part of the series:

Datepickers in jQueryUI allow users to select a date from a popup or inline calendar. We can customize the date format and language. We can apply several types of restrictions. Input type elements are used for datepicker and the datepicker calendar opens in a small overlay when the associated text field gains focus.

Syntax

$(selector, context).datepicker(options)
Or
$(selector, context).datepicker("action", [params])

Let us take a simple datepicker example.

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(document).ready(function()
{
$("#datepicker-1").datepicker();
});
</script>
<style>
#datepicker-1
{
margin-top: 20px;
}
#div1
{
background-color: coral;
color: ButtonHighlight;
font-size: 30px;
height: 450px;
width: 1000px;
text-align: center;
margin-left: 150px
}
</style>
</head>
<body>
<divid="div1">
<span>************Date-Picker*************</span>
<divclass="ui-widget">
<inputtype="text" id="datepicker-1" />
</div>
</div>
</body>
</html>

Example

example

Options

Option	Description	Example
autoSize	If set to true automatically resize the input field to accommodate dates	$("#datepicker-1").datepicker({ autoSize: true });
buttonImage	Define URL of an image to use to display the datepicker when the showOn is set to “button” or “both”	$("#datepicker-1").datepicker({ showOn:"button", buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif" });
buttonText	Define text to display on the trigger button.	$("#datepicker-1").datepicker({ showOn:"button", buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif", buttonText: "Select" });
changeMonth	Define whether the month should be rendered as a dropdown instead of text.	$("#datepicker-1").datepicker({ changeMonth: true });
changeYear	Define whether the year should be rendered as a dropdown instead of text.	$("#datepicker-1").datepicker({ changeYear: true });
currentText	Define text to display for the current day link.	$("#datepicker-1").datepicker({ currentText: "Now" });
dateFormat	Define the format for parsed and displayed dates.	$("#datepicker-1").datepicker({ dateFormat: "yy-dd--mm" });
defaultDate	Define initial date for the control, overriding the default value of today.	$("#datepicker-1").datepicker({ defaultDate: +7 });
firstDay	Define the first day of week. 0 for Sunday and 6 for Saturday	$("#datepicker-1").datepicker({ firstDay: 3 });
isRTL	Define whether the current language is drawn from right to left.	$("#datepicker-1").datepicker({ isRTL: true });
maxDate	Define the maximum selectable date.	$("#datepicker-1").datepicker({ maxDate: "+1m +2w" });
minDate	Define the minimum selectable date.	$("#datepicker-1").datepicker({ minDate: "-1m -2w" });
nextText	Define text to display for the next month link.	$("#datepicker-1").datepicker({ nextText: "Next Month" });
numberOfMonths	Define The number of months to show at once.	$("#datepicker-1").datepicker({ numberOfMonths: 3 });
prevText	Define text to display for the previous month link.	$("#datepicker-1").datepicker({ prevText: "Prev Month" });
showAnim	Define the name of the animation used to show and hide the datepicker.	$("#datepicker-1").datepicker({ showAnim: "fold" });
showButtonPanel	Define whether to display a button pane in the calendar. The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker.	$("#datepicker-1").datepicker({ showButtonPanel: true });
showCurrentAtPos	Define the position the current month if multiple month are defined by numberOfMonths.	$("#datepicker-1").datepicker({ showCurrentAtPos: 2 });
showMonthAfterYear	Define whether to show the month after the year in the header.	$("#datepicker-1").datepicker({ showMonthAfterYear: true });
`showOtherMonths`	Define whether to display dates in other months (non-selectable) at the start or end of the current month.	$("#datepicker-1").datepicker({ showOtherMonths: true });
`showWeek`	If set to true ,a column is added to show the week of the year.	$("#datepicker-1").datepicker({ showWeek: true });
`yearRange`	Define the range of years displayed in the year drop-down.	$("#datepicker-1").datepicker({ yearRange: "2010-2020" });
`yearSuffix`	Define the additional text to display after the year in the month headers.	$("#datepicker-1").datepicker({ yearSuffix: " Year" });

Methods

Method	Description	Example
destroy()	Removes the datepicker functionality completely.	$("#datepicker-1").datepicker("destroy");
dialog( date [, onSelect ] [, settings ] [, pos ] )	Opens the datepicker in a dialog box.	$("#datepicker-1").datepicker("dialog","10/08/2011");
getDate()	Returns the current date for the datepicker or `null` if no date has been selected.	varobj = $("#datepicker-1").datepicker("getDate");
hide()	Close a previously opened date picker.	$("#datepicker-1").datepicker("hide");
isDisabled()	Determine whether a date picker has been disabled.	varobj= $("#datepicker-1").datepicker("isDisabled");
referesh()	Refresh the date picker, after having made some external modifications.	$("#datepicker-1").datepicker("refresh");
setDate(date)	Sets the date for the datepicker.	$("#datepicker-1").datepicker("setDate","10/08/2014");
show()	Open the date picker.	$("#datepicker-1").datepicker("show");
widget()	Return jQuery object containing the datepicker.	varobj = $("#datepicker-1").datepicker("widget");

Example 1

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(document).ready(function()
{
$("#ui-datepicker-year").datepicker(
{
autoSize: true,
showOn: "button",
buttonImage: "/jquery-ui-1.11.4.custom/images/datepicker.gif",
changeMonth: true
});
});
</script>
<style>
#datepicker-1
{
margin-top: 20px;
}
#div1
{
background-color: coral;
color: ButtonHighlight;
font-size: 30px;
height: 450px;
width: 1000px;
text-align: center;
margin-left: 150px
}
</style>
</head>
<body>
<divid="div1">
<span>************Date-Picker*************</span>
<divclass="ui-widget">
<inputtype="text" id="ui-datepicker-year" />
</div>
</div>
</body>
</html>

Output

output

In this example we define autoSize property to “true” that means size of input will change automatically. We define the image for button and assigned a dropdown list for month.

Example 2

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(document).ready(function()
{
$("#ui-datepicker-year").datepicker
({
showOn: "button",
buttonText: "Choose",
dateFormat: "yy-mm-dd",
dayNames: ["Ravivar", "Somwar", "Mangalvar", "Budhvar", "Guruvar", "Sukarvar", "Sanivar"]
});
});
</script>
<style>
#datepicker-1
{
margin-top: 20px;
}
#div1
{
background-color: coral;
color: ButtonHighlight;
font-size: 30px;
height: 450px;
width: 1000px;
text-align: center;
margin-left: 150px
}
</style>
</head>
<body>
<divid="div1">
<span>************Date-Picker*************</span>
<divclass="ui-widget">
<inputtype="text" id="ui-datepicker-year" />
</div>
</div>
</body>
</html>

Output

output1

In this example we define the text for button and define the format of date. At last we define list of long day names, starting from Sunday.

Example 3

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(document).ready(function()
{
$("#ui-datepicker-year").datepicker
({
dayNamesMin: ["RA", "SO", "MA", "BU", "GU", "SU", "SN"],
defaultDate: +4,
firstDay: 3,
isRTL: true
});
});
</script>
<style>
#datepicker-1
{
margin-top: 20px;
}
#div1
{
background-color: coral;
color: ButtonHighlight;
font-size: 30px;
height: 450px;
width: 1000px;
text-align: center;
margin-left: 150px
}
</style>
</head>
<body>
<div id="div1">
<span>************Date-Picker*************</span>
<div class="ui-widget">
<input type="text" id="ui-datepicker-year" />
</div>
</div>
</body>
</html>

Output

output

In above example we defined the names for dayNamesMin and define the default day. We selected Tuesday as the starting day of week.

Example 4

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(document).ready(function()
{
$("#ui-datepicker-year").datepicker
({
maxDate: "+1m +2w",
minDate: "-1m -2w",
numberOfMonths: [2, 2],
showAnim: "fold",
showButtonPanel: true,
showOtherMonths: true,
showWeek: true,
});
});
</script>
<style>
#datepicker-1
{
margin-top: 20px;
}
#div1
{
background-color: coral;
color: ButtonHighlight;
font-size: 30px;
height: 450px;
width: 1000px;
text-align: center;
margin-left: 150px
}
</style>
</head>
<body>
<div id="div1">
<span>************Date-Picker*************</span>
<div class="ui-widget">
<input type="text" id="ui-datepicker-year" />
</div>
</div>
</body>
</html>

Output

In above example we define maximum date and minimum date for the current date. We define array for month that is showing four months at a time. We set true for showWeek option, so we can see that each month is showing the index number week.