Date Picker - jQuery plugin

About

Date Picker component with a lot of options and easy to fit in your web application.

Last update

22.05.2009 - Check Download tab

Features

  • Flat mode - as element in page
  • Multiple calendars in the component
  • Allows single, multiple or range selection
  • Mark dates as special, weekends, special days
  • Easy to customize the look by changing CSS
  • Localiation for months' and days' names
  • Custom day to start the week
  • Fits into the viewport

License

Dual licensed under the MIT and GPL licenses.

Examples

Flat mode, single selection, the week start monday.

$('#date').DatePicker({
	flat: true,
	date: '2008-07-31',
	current: '2008-07-31',
	calendars: 1,
	starts: 1
});

Flat mode, multiple selection, disabled dates, special day, the week start sunday.

$('#date2').DatePicker({
	flat: true,
	date: ['2008-07-31', '2008-07-28'],
	current: '2008-07-31',
	format: 'Y-m-d',
	calendars: 1,
	mode: 'multiple',
	onRender: function(date) {
		return {
			disabled: (date.valueOf() < now.valueOf()),
			className: date.valueOf() == now2.valueOf() ? 'datepickerSpecial' : false
		}
	},
	starts: 0
});

Clear selection

$('#date3').DatePickerClear();

Flat mode, range selection, 3 calendars.

$('#date3').DatePicker({
	flat: true,
	date: ['2008-07-28','2008-07-31'],
	current: '2008-07-31',
	calendars: 3,
	mode: 'range',
	starts: 1
});

Attached to an text field and usign callbacks to update the date selection with the value from the field.

$('#inputDate').DatePicker({
	format:'m/d/Y',
	date: $('#inputDate').val(),
	current: $('#inputDate').val(),
	starts: 1,
	position: 'r',
	onBeforeShow: function(){
		$('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
	},
	onChange: function(formated, dates){
		$('#inputDate').val(formated);
		if ($('#closeOnSelect input').attr('checked')) {
			$('#inputDate').DatePickerHide();
		}
	}
});

Flat mode, inside a custom widget and with custom design.

28 July, 2008 ÷ 31 July, 2008 Select date range

 

 

 

 

 

Download

datepicker.zip (50 kb): jQuery, Javscript files, CSS files, images, examples and instructions.

Changelog

22.05.2009
added: close on selection example
added: onChange has new parameter: reference to related element
added: start view days, months, years
added: clear selection in multiple and range mode
fixed: datepicker hide and show methods
fixed: january selection (tahns to Konstantin Zavialov)
fixed: working with jQuery 1.3
fixed: deselecting a date in multiple mode (thanks to Geelen Sebastien)
22.08.2008
Fixed bug: where some events were not canceled right on Safari
Fixed bug: where teh view port was not detected right on Safari
31.07.2008
Added new method: 'DatePickerGetDate'
Minor speed improvement
30.07.2008
The first release.

Implement

Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.

<link rel="stylesheet" media="screen" type="text/css" href="css/datepicker.css" />
<script type="text/javascript" src="js/datepicker.js"></script>
                

Invocation code

All you have to do is to select the elements in a jQuery way and call the plugin.

 $('input').DatePicker(options);
                

Options

A hash of parameters. All parameters are optional.

eventName string The desired event to trigger the date picker. Default: 'click'
date String, Date or array The selected date(s) as string (will be converted to Date object based on teh format suplied) and Date object for single selection, as Array of strings or Date objects
flat boolean Whatever if the date picker is appended to the element or triggered by an event. Default false
start integer The day week start. Default 1 (monday)
prev string HTML inserted to previous links. Default '◀' (UNICODE black left arrow)
next string HTML inserted to next links. Default '▶' (UNICODE black right arrow)
mode string ['single'|'multiple'|'range'] Date selection mode. Default 'single'
view string ['days'|'months'|'years'] Start view mode. Default 'days'
calendars integer Number of calendars to render inside the date picker. Default 1
format string Date format. Default 'Y-m-d'
position string ['top'|'left'|'right'|'bottom'] Date picker's position relative to the trigegr element (non flat mode only). Default 'bottom'
locale hash Location: provide a hash with keys 'days', 'daysShort', 'daysMin', 'months', 'monthsShort', 'week'. Default english
onShow function Callback function triggered when the date picker is shown
onBeforeShow function Callback function triggered before the date picker is shown
onHide function Callback function triggered when the date picker is hidden
onChange function Callback function triggered when the date is changed
onRender function Callback function triggered when the date is rendered inside a calendar. It should return and hash with keys: 'selected' to select the date, 'disabled' to disable the date, 'className' for additional CSS class

Set date

If you want to set a diferent date selection.

$('input').DatePickerSetDate(date, shiftTo);

The 'date' argument is the same format as the option 'date' and the 'shiftTo' argument (boolean) moves the curent month view to the date selection provided.

Get date

Get date selection.

$('input').DatePickerGetDate(formated);

Set 'formated' to true if you whant to get teh selection formated.

Show and hide date picker

Show or hide a date picker.

$('input').DatePickerShow();
$('input').DatePickerHide();

Clear multiple selection

Clear selection in multiple and range mode

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