The JQuery DatePicker Calendar control is easy to add to your HTML page and is very configurable as far as pre-built calendar widgets go. This is important to me since I like working with dates in the yyyy-mm-dd format rather than the more confusing mm/dd/yyyy or dd/mm/yyyy formats.
One can hook up a JQuery DatePicker Calendar control to any text input field on an HTML form. The code to do so is really quite minimal, and I will cover the process in the steps below.
Step 1) Import the JQuery Modules
The first step is to import the core JQuery and JQuery-UI modules in the page HTML header. It can also be useful to set a reference to the default JQuery-UI stylesheet so that the widget appears pre-styled when it is added to your new form.
Best practice for a large project is to download a server-side version of these modules from the main JQuery-UI support site. However when working with simple test pages I like to simply reference the modules from their online versions, which ends up much cleaner.
For example here are the URLs to reference the google-hosted 1) minified JQuery version 1.8.16 library, 2) the JQuery-UI version 1.6.2 library, and finally 3): the default JQuery-UI 1.8.16 stylesheet
- http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
- http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
- http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
Step 2) The JavaScript to attach the JQuery DatePicker Widget
<script type="text/javascript">
$(function () {
$('#txtCalendarDate1').datepicker();
});
</script>
Amazingly this is all that is required to hook up a basic JQuery DatePicker widget to an HTML text box form field. The control by default will show the current date as a highlighted option. However if the form user clicks on a pre-populated text field, then the JQuery DatePicker widget will default itself to the date from the pre-populated text field instead.
Setting the Background Color of the Days of the Week
The default background color of the days of the week header is set to white, which can be too similar to the rest of the HTML page being presented. This is not set in stone, though, since adding inline styles to your page will override the default style set in the imported JQuery-UI stylesheet.
To style the background color of the days of the week, simply add a style block to your HTML page header and add the following style change to set the background color to a more pronounced color such as violet.
.ui-datepicker th { background-color: #CCCCFF; }
This styling example is useful since it shows the basics of overriding the default style sheet and accessing the table hierarchy of the JQuery DatePicker widget.
How to Set the Date Format
As I mentioned earlier, I prefer to work with dates in the yyyy-mm-dd format for a variety of reasons. The default format of the JQuery DatePicker widget is mm/dd/yyyy, so I need to change how the JQuery DatePicker widget handles dates.
The solution to this is quite simple and can be handled with a line of code that can be added in JavaScript right before the DatePicker is bound to a specific HTML form element. In the example code below the first line of JavaScript sets the date format of the DatePicker widget right before line #2 where the widget is tied to an HTML text box field called txtCalendarDate1:
$('#txtCalendarDate1').datepicker({ dateFormat: 'yy-mm-dd' });
$('#txtCalendarDate1').datepicker();
So How Does this all Tie Together?
Below is the HTML code for a full example page containing four text boxes, each of which has been tied to a JQuery DatePicker widget. The screen capture at the start of this article illustrates what the page looks like when viewed in a browser.
<html><head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#txtCalendarDate1').datepicker({ dateFormat: 'yy-mm-dd' });
$('#txtCalendarDate1').datepicker();
$('#txtCalendarDate2').datepicker({ dateFormat: 'yy-mm-dd' });
$('#txtCalendarDate2').datepicker();
$('#txtCalendarDate3').datepicker({ dateFormat: 'yy-mm-dd' });
$('#txtCalendarDate3').datepicker();
$('#txtCalendarDate4').datepicker({ dateFormat: 'yy-mm-dd' });
$('#txtCalendarDate4').datepicker();
});
</script>
<style>
.ui-datepicker th { background-color: #CCCCFF; }
</style>
</head>
<body>
<table id="tblTest">
<tr id="tr1">
<td>Calendar Date 1</td>
<td><input type="text" id="txtCalendarDate1" value="" /></td>
</tr>
<tr id="tr2">
<td>Calendar Date 2</td>
<td><input type="text" id="txtCalendarDate2" value="" /></td>
</tr>
<tr id="tr5">
<td>Calendar Date 3</td>
<td><input type="text" id="txtCalendarDate3" value="" /></td>
</tr>
<tr id="tr6">
<td>Calendar Date 4</td>
<td><input type="text" id="txtCalendarDate4" value="" /></td>
</tr>
</table></body></html>
Justin Cooney 
thanks . just the thing i wanted ,to begin learning jquery.
Happy to help, glad you found the info useful!
That was awesome. I am too starting to learn JQuery and I wish more people would show the whole code and steps to go through like this. You really made my day better!
I’m glad you found the article and example code useful, thanks for your feedback!
thank you very much! clear and everything is there.
Thanks Olya, glad you found the article/example useful!
Thanks Justin i found much clear picture…
Thanks Amit, I’m glad the article was useful.
The date picker for me isnt displaying can anyone help?
$(function(){
$(“#birthday”).datepicker(“show”);
$(“#sign_up”).button();
});
Insert title here