The jQuery UI function of .datepicker() will provide a popup calendar when the visitor clicks inside of the specified <input type="text"> tag of a form. The visitor can either type in a date or select a date from the calendar and the date will be filled in in the text box. This date can then be used as data to perform other actions, such as using it with PHP to send data to the server.

The calendar is styled by whichever jQuery UI theme you are using. You must link to the proper jQuery UI stylesheet for the calendar to appear correctly.

For complete documentation on the jQuery UI datepicker:


Options for jQuery UI .datepicker() function

There are a number of available options for the appearance and functionality of the datepicker calendar. 

♦ animation: you can choose from the available jQuery effects, like "blind" or "bounce" for the calendar to be animated as it appears on the screen

♦ dates in other months: you can choose to make dates available in other months, or restrict these dates

♦ display button bar: you can have additional buttons placed at the bottom of the popup calendar as needed.

♦ display inline: this will have the calendar displayed on the page without the visitor clicking in the textarea.

♦ display month and year: you can choose to have drop downs for the month and year so that the visitor doesn't have to navigate if the date is far in the past or future.

♦ display multiple months: you can have options that have more than the current month display

♦ format date options: if you are dealing with an international situation, where different countries use alternate formats, you can have a selector for that

♦ icon trigger: you can choose an option that will display a little calendar icon for the popup calendar rather than have it appear when the visitor clicks in the text box

♦ localize calendar: different countries have different ways of displaying calendars and have their own words for the days and months, this will help with that.

♦ populate alternate field: you can choose to have the date spelled out in an additional text field to make it clear which date was selected.

♦ restrict date range: this could be used for displaying and restricting when tickets or booking dates are available.

♦ select a date range: this works with two text fields for a date range, for example hotel reservations

♦ show week of the year: this will show  a number by each week from 1 to 52.


Required jQuery files

As with other jQuery UI widgets, you must load the UI library file along with your core jQuery .js file in the <head>...</head> section of your web page.

If you want to use the jQuery styling for the .datepicker() calenders, you must link to the jQuery UI style sheets as well.  You can customized and override this styling with your own styles, but your stylesheet must load after the jQuery stylesheet in your head section and you need to target the classes that they use.When you use these widgets there are classes loaded into the DOM by jQuery for these elements. You can use a diagnostic tool like Firebug to see which class names have been applied.

As always, you can choose to upload the required .js files to your own hosting server and link to them at your own site, or provide an external link to Google's jQuery library files

<script src="https:/"></script>
<script src=""></script>
<link rel="stylesheet" href="">


How to use jQuery .datepicker() function

The syntax for .datepicker() for the basic functionality is simple. You MUST have the proper HTML <input type="text" /> tag for the for the calendar to work properly. These steps will provide a text box that will have a calendar popup when the visitor clicks inside. He can type in his own date or choose it from the calendar. The default format is mm/dd/yyyy. If you want to use a different date format, you must use option settings for that.

$( "#datepicker" ).datepicker();

The HTML must have the correct <input> type, as show below.

<p>Date: <input type="text" id="datepicker"></p>

Below is an example for setting the various options available.

Change the format for the date to dd/mm/yy

$( "#datepicker" ).datepicker({
    dateFormat: 'dd-mm-yy'

Show the calendar icon (requires an image for the calendar icon)

$( "#datepicker" ).datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date"

Restrict the date range

You can set the minDate for the earliest date available. This can be set in the future with a positive number, in the past with a negative number or you can set a specific day like this: minDate: new Date(2015, 1 - 1, 1). If nothing is stated, there are no restrictions on dates.

$( "#datepicker3" ).datepicker({
    minDate: 0, maxDate: new Date(2015,1 - 1, 8)