Creates a date picker button next to all matched input elements. When the button is clicked on the value of the selected date will be placed in the corresponding input (formatted according to Date.format).
$('input.date-picker').datePicker();
See the projects homepage for many more complex examples...
demo/index.html
Creates a date picker and makes it appear when the relevant element is focused and disappear when it is blurred.
$('.date-pick') .datePicker() .bind( 'focus', function() { $(this).dpDisplay(); } ).bind( 'blur', function() { $(this).dpClose(); } );
Creates a date picker associated with the element with an id of date-picker and then causes it to pop up.
$('#date-picker').datePicker(); $('#date-picker').dpDisplay();
Will alert an empty array (as nothing is selected yet)
$('.date-picker').datePicker(); alert($('.date-picker').dpGetSelected());
Prevents this date picker from displaying and adds a class of dp-disabled to it (and it's associated button if it has one) for styling purposes. If the matched element is an input field then it will also set the disabled attribute to stop people directly editing the field.
$('.date-picker').datePicker(); $('.date-picker').dpSetDisabled(true);
Creates a date picker associated with all elements with a class of "date-picker" then sets the selected date on these date pickers to the first Janurary 2010. When the date picker is next opened it will display Janurary 2010.
$('.date-picker').datePicker(); $('.date-picker').dpSetDisplayedMonth(10, 2008);
Creates a date picker associated with all elements with a class of "date-picker" then sets the last selectable date for each of these to the first Janurary 2010.
$('.date-picker').datePicker(); $('.date-picker').dpSetEndDate('01/01/2010');
Creates a date picker associated with the element with an id of date-picker and makes it so that when this date picker pops up it will be 20 pixels above and 200 pixels to the right of it's default position.
$('#date-picker').datePicker(); $('#date-picker').dpSetOffset(-20, 200);
Creates a date picker associated with the element with an id of date-picker and makes it so that when this date picker pops up it will be bottom and right aligned to the #date-picker element.
$('#date-picker').datePicker(); $('#date-picker').dpSetPosition($.dpConst.POS_BOTTOM, $.dpConst.POS_RIGHT);
Creates a date picker associated with the element with an id of date-picker and then creates a function which is called as each td is rendered when this date picker is displayed.
$('#date-picker').datePicker(); $('#date-picker').dpSetRenderCallback(function($td, thisDate, month, year) { // do stuff as each td is rendered dependant on the date in the td and the displayed month and year });
Creates a date picker associated with all elements with a class of "date-picker" then sets the selected date on these date pickers to the first Janurary 2010. When the date picker is next opened it will display Janurary 2010.
$('.date-picker').datePicker(); $('.date-picker').dpSetSelected('01/01/2010');
Creates a date picker associated with all elements with a class of "date-picker" then sets the first selectable date for each of these to the first day of the millenium.
$('.date-picker').datePicker(); $('.date-picker').dpSetStartDate('01/01/2000');
Renders a calendar displaying January 2007 into the element with an id of calendar-me.
$('#calendar-me').renderCalendar({month:0, year:2007});
Renders a calendar displaying January 2007 into the element with an id of calendar-me. Every Thursday in the current month has a class of "thursday" applied to it, is clickable and shows an alert when clicked. Every Friday on the calendar has the number inside replaced with text.
var testCallback = function($td, thisDate, month, year) { if ($td.is('.current-month') && thisDate.getDay() == 4) { var d = thisDate.getDate(); $td.bind( 'click', function() { alert('You clicked on ' + d + '/' + (Number(month)+1) + '/' + year); } ).addClass('thursday'); } else if (thisDate.getDay() == 5) { $td.html('Friday the ' + $td.html() + 'th'); } } $('#calendar-me').renderCalendar({month:0, year:2007, renderCallback:testCallback});