Objectives and outcomes

In this tutorial we are going to learn about datepicker ui-widget in jqueryUI and also about the constraint used with the datepicker widget. Example for the same is shown below:



Enter Date: 

As we click on the input box a calender type menu appears from which we can select the date.



HTML code:

<html>
<head>
<title>jQuery UI Datepicker</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<form>
Enter Date:&nbsp;<input type="text" id="date">
</form>
</body>
</html>




Javascript

<script>
$(function() {
$( "#date" ).datepicker();
});
</script>


In the following example we will use datepicker widget with constraints. In the first example we are going to use three constraint namely dateFormat, altField and altFormat with datepicker function.


Enter Date:
Alt Date:

Click on the Enter date input box and select a date and observe the change



Javascript

<script>
$(function() {
$( "#date1" ).datepicker({
dateFormat:"yy-mm-dd",
altField: "#date2",
altFormat: "DD, d MM, yy"
});
});
</script>


Datepicker function is associated with Enter Date input box. dateFormat constraint is to specify the format in which selected date is displayed which in this case is yy-mm-dd. altField stands for alternate field which takes an id as its value where you can display the selected date in alternate format which is defined using altFormat constraint.



Example for datepicker with animation and few more constriants.



Enter Date: 


Javscript

<script>
$(function() {
$( "#date3" ).datepicker({
dayNamesMin: [ "Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat" ],
duration: "slow",
showWeek:true,
showAnim: "slide"
});
});
</script>


In the examples shown before the default day name were Su, Mo, Tu and so on now with the dayNameMin contraint we can change the default names. duration constraint is used to provide value for duration of datepicker to appear which is slow here. showWeek contraint show the column on the left side with week number of the year. And in last showAnim constraint is used to give animation to datepicker.