jQuery Date Picker

This example demonstrates how to create a date picker using the jQuery UI plugin with some basic HTML and CSS code. The source and documentation for the jQuery date picker can be found at jQuery UI: Datepicker.

jQuery date picker demo

Click on the text input below:

jQuery date picker HTML code

The HTML for the date picker is simply:

<input id="my-date-picker" class="datepicker" type="text" size="15">

If you want to have more than 1 date picker on the same page, simply create another input field but with a different id, and initialise that also similarly to the jQuery code below.

jQuery date picker CSS code

The stylesheet for a plain date picker can be referenced like so:

<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css'>

If you want to make your date picker look a bit more interesting, the jQuery Datepicker page recommends using ThemeRoller. However, you can also write your own customised CSS.

Date picker jQuery code

Download the jquery JavaScript file from Downloading jQuery - jQuery JavaScript Library and include it in your HTML, e.g.:

<script type="text/javascript" src="javascript/jquery-1.6.4.min.js"></script>

Alternatively, you can include the script from the Google API Library, e.g.:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Then you need to download or link to the jQuery UI plugin, include it in your scripts after the jquery, along with the datepicker() initialise command

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
/* Initialise date picker */
$(document).ready(function() {
  $("#my-date-picker").datepicker();
});
</script>

blog comments powered by Disqus