JQuery – Basic DatePicker Calendar Example with Code

JQuery DatePicker Widget Example
JQuery DatePicker Widget Example

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

  1. http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
  2. http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
  3. 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

Once the correct modules have been imported, the widget can be added to the desired HTML form areas. To add a DatePicker widget instance to an HTML text box one simply has to add a JavaScript code block somewhere in the HTML of the page along with a JQuery call to the id of the text box. Here is how one would reference a text box with an id of txtCalendarDate1:
<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>
Advertisements

9 thoughts on “JQuery – Basic DatePicker Calendar Example with Code

  1. 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!

  2. The date picker for me isnt displaying can anyone help?

    $(function(){
    $(“#birthday”).datepicker(“show”);
    $(“#sign_up”).button();
    });

    Insert title here

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s