jQuery Date Picker

Although there’s a date picker present in HTML5 this won’t always work in older browsers and doesn’t look that great anyway so it’s generally better to do this via jQuery.

First off add the following script tags to the head section of your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

Next download the latest stable release from here, extract the contents of the zip file and then copy the jquery-ui.css file to the scripts (or other appropriate) folder in your website.

The jQuery CSS file can then be referenced by adding the following line to the head section.

<link href="scripts/jquery-ui.css" rel="Stylesheet" type="text/css" />

A javascript function then needs to be added to the head to tell the date picker to be added to any control with a class of “date”.

<script type="text/javascript">
	// Add datetime picker
	$(function () {
		$('.date').datepicker({
			dateFormat: 'dd/mm/yy',
			maxDate: '0'
		})
	});
</script>

The format the date picker is expecting is “DD/MM/YYYY” so I usually set the placeholder tag of the text box to show this as it’s possible to enter dates manually as well. The “maxDate: 0” option means that today is the maximum selectable day, this can be removed if you want all dates to be selectable.

Now the only thing remaining is to add a text box control and to give it the “date” class.