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>

Comments

blog comments powered by Disqus

Send us your feedback

If you want to send any feedback, corrections, contact request or just voice your opinion, please drop us a line using our feeback form.

Send feedback

Do you have a similar website?

If you have a similar website and want to become a website partner or simply to share links, feel free to drop us a line.

Send request