Datepicker

Datepicker appears on focus - click in the field. The text is in English and the date format is US (mm/dd/yyyy).

	$('#example1').datepicker();	
	

Datepicker appears on focus or icon click. It shows days in other months and the week of the year.

	$('#example2').datepicker({showOn: 'both', showOtherMonths: true, 
		showWeeks: true, firstDay: 1, changeFirstDay: false,
		buttonImageOnly: true, buttonImage: '../datepicker/img/calendar.gif'});	
	

The datepicker can be localized for a large number of languages. Here is the French version.

	$('#example3').datepicker($.extend({showOn: 'both',
		buttonImageOnly: true, buttonImage: '../datepicker/img/calendar.gif'},
		$.datepicker.regional['fr']));
	

The date can appear in a number of different formats with the default being 'mm/dd/yyyy'. This example shows the full format with day and month names.

	$('#example4').datepicker({dateFormat: 'DD, MM d, yy', showOn: 'both', 
		buttonImageOnly: true, buttonImage: '../datepicker/img/calendar.gif'});	
	

Pick a date range by selecting the start and end date. Several months are shown at once.

	$('#example5').datepicker({rangeSelect: true, numberOfMonths: 3, stepMonths: 3, 
		showOn: 'both', buttonImageOnly: true, buttonImage: '../datepicker/img/calendar.gif'});	
	

The datepicker can also appear inline and notify the page when selected.

	$('#example6').datepicker({onSelect: function(date) { alert('You selected ' + date); }});	
	

The datepicker can do even more. Check out the full demonstration on the datepicker home page.