Date Picker component with a lot of options and easy to fit in your web application.
22.05.2009 - Check Download tab
Dual licensed under the MIT and GPL licenses.
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
});
$('#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.
datepicker.zip (50 kb): jQuery, Javscript files, CSS files, images, examples and instructions.
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>
All you have to do is to select the elements in a jQuery way and call the plugin.
$('input').DatePicker(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 |
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 selection.
$('input').DatePickerGetDate(formated);
Set 'formated' to true if you whant to get teh selection formated.
Show or hide a date picker.
$('input').DatePickerShow();
$('input').DatePickerHide();
Clear selection in multiple and range mode
$('#datepicker').DatePickerClear();