• Articles
• MooTools

MooTools DatePicker

License

Downloads

Additional downloads

GitHub

Requirements

Usage

new DatePicker(input-target-selector [, options-object]);

Usage with Ajax

my_datepicker.attach();

Using the Skins

Options

Requested/planned features

• Support for date-range picking
• Prepare for MooTools 1.3 (2.0?) (personal todo)

Date-formatting

The date-formatting functions featured in the DatePicker support basic PHP date-format syntax. Supported symbols are listed below. Unsupported symbols will just be output as provided. To use the supported symbols literally, escape them with a \.

• y - Two digit representation of a year
• Y - Four digit representation of a year
• m - Numeric representation of a month, with leading zeros
• n - Numeric representation of a month, without leading zeros
• M - A short textual representation of a month, three letters
• F - A full textual representation of a month, such as January or March
• d - Day of the month, 2 digits with leading zeros
• j - Day of the month without leading zeros
• D - A textual representation of a day, three letters
• l - A full textual representation of the day of the week
• G - 24-hour format of an hour without leading zeros
• H - 24-hour format of an hour with leading zeros
• g - 12-hour format of an hour without leading zeros
• h - 12-hour format of an hour with leading zeros
• a - Lowercase Ante meridiem and Post meridiem
• A - Uppercase Ante meridiem and Post meridiem
• i - Minutes with leading zeros
• s - Seconds, with leading zeros
• U - Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)

Creating your own skin

• The previous, next and close elements have textual contents («, », x) by default; as done in the additional skins, these can be hidden using (for example) text-indent: -999px style
• The body element has 1 unclassed child, which in turn has 2 unclassed children. These are used for animation, and should be ignored. Their styles are based on the body class and should have no influence on the rendering of your datepicker. Just imagine the body element directly contains either the years, months, days or time class.
• The class selected is added to the date/month/year representing the current value.
• The class unavailable is added to any date/month/year which is outside the configured range (using the minDate and maxDate options).
• Every day element also has a day0 ... day6 class added, indicating which day of the week it is (0 being Sunday through 6 being Saturday).
• Every week element also has a week0 ... week5 class added, indicating which row of weeks it is (there is always 6 weeks displayed).
• Every month element also has a month1 ... month12 class added, indicating which month of the year it is.
• Every year element also has a yearX class added, where X simply is the index of the displayed year (0 being the first year).

Examples

Skins

window.addEvent('load', function() {
	new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista' });
	new DatePicker('.demo_dashboard', { pickerClass: 'datepicker_dashboard' });
	new DatePicker('.demo_jqui', { pickerClass: 'datepicker_jqui', positionOffset: { x: 0, y: 5 } });
	new DatePicker('.demo', { positionOffset: { x: 0, y: 5 }});
});

<label>Datepicker with Vista skin:</label>
<input name='date_B' type='text' value='' class='date demo_vista' />

<label>Datepicker with OSX Dashboard skin:</label>
<input name='date_B' type='text' value='' class='date demo_dashboard' />

<label>Datepicker with jQuery UI skin:</label>
<input name='date_B' type='text' value='' class='date demo_jqui' />

<label>Datepicker basic (CSS only):</label>
<input name='date_B' type='text' value='' class='date demo' />

input.date {
	width: 150px;
	color: #000;
}

Yearpicking / Timepicking

window.addEvent('load', function() {
	new DatePicker('.demo_noyear', { pickerClass: 'datepicker_vista', yearPicker: false });
	new DatePicker('.demo_time', { pickerClass: 'datepicker_vista', timePicker: true, format: 'd-m-Y @ H:i' });
});

<label>Datepicker without yearpicker:</label>
<input name='date_B' type='text' value='' class='date demo_noyear' />

<label>Datepicker with timepicker (use mousewheel to change time):</label>
<input name='date_B' type='text' value='' class='date demo_time' />

Allow empty

window.addEvent('load', function() {
	new DatePicker('.demo_allow_empty', {
		pickerClass: 'datepicker_dashboard',
		allowEmpty: true
	});
});

<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date demo_allow_empty' />

Toggle by Element

window.addEvent('load', function() {
	new DatePicker('.date_toggled', {
		pickerClass: 'datepicker_dashboard',
		allowEmpty: true,
		toggleElements: '.date_toggler'
	});
});

<input name='date_toggled' type='text' value='' class='date date_toggled' style='display: inline' />
<img src='img/calendar.gif' class='date_toggler' style='position: relative; top: 3px; margin-left: 4px;' />

Restricted date-range

An example showing how you can restrict the input range of dates.

window.addEvent('load', function() {
	new DatePicker('.demo_ranged', {
		pickerClass: 'datepicker_vista',
		inputOutputFormat: 'd-m-Y',
		yearPicker: false,
		minDate: { date: '10-03-2009', format: 'd-m-Y' },
		maxDate: { date: '25-06-2009', format: 'd-m-Y' }
	});
});

<label>Datepicker restricted to dates between 10-03-2009 and 25-06-2009:</label>
<input name='date_B' type='text' value='20-03-2009' class='date demo_ranged' />

Starting value (input/output value)

These examples show how you can set the starting value by simply putting it in your original value tag. Additionally, you may use the option inputOutputFormat to specify how to interpret this value, and how it will be output again after picking a date.

Please note: The debug option is enabled which will show you the original input and its actual value (the first input element), which is normally hidden. The second input element is the datepicker.

window.addEvent('load', function() {
	new DatePicker('.demo_value', {
		pickerClass: 'datepicker_jqui',
		debug: true
	});

	new DatePicker('.demo_value2', {
		pickerClass: 'datepicker_jqui',
		inputOutputFormat: 'Y/m/d',
		debug: true
	});
});

<label>Datepicker starting at Unix-timestamp 1234567890 (14th of Februari 2009):</label>
<input name='date_B' type='text' value='1234567890' class='date demo_value' />

<label>Datepicker starting at 2009/06/24 (to read as 'Y/m/d'):</label>
<input name='date_B' type='text' value='2009/06/24' class='date demo_value2' />

Localized Month/Day labels

This example shows how simple it is to change the month/day labels in another language.

window.addEvent('load', function() {
	new DatePicker('.demo_dutch', {
		pickerClass: 'datepicker_dashboard',
		days: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
		months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'October', 'November', 'December']
	});
});

<label>Datepicker with Dutch labels:</label>
<input name='date_B' type='text' value='' class='date demo_dutch' />

Classes

Donations

I welcome any PayPal donation that you'd like to give in return for using these scripts!