• datePicker( Object s ) returns jQuery
    Create a datePicker associated with each of the matched elements.

    The matched element will receive a few custom events with the following signatures:

    dateSelected(event, date, $td, status) Triggered when a date is selected. event is a reference to the event, date is the Date selected, $td is a jquery object wrapped around the TD that was clicked on and status is whether the date was selected (true) or deselected (false)

    dpClosed(event, selected) Triggered when the date picker is closed. event is a reference to the event and selected is an Array containing Date objects.

    dpMonthChanged(event, displayedMonth, displayedYear) Triggered when the month of the popped up calendar is changed. event is a reference to the event, displayedMonth is the number of the month now displayed (zero based) and displayedYear is the year of the month.

    dpDisplayed(event, $datePickerDiv) Triggered when the date picker is created. $datePickerDiv is the div containing the date picker. Use this event to add custom content/ listeners to the popped up date picker.

    Options

    • month (Number): The month to render when the date picker is opened (NOTE that months are zero based). Default is today's month.
    • year (Number): The year to render when the date picker is opened. Default is today's year.
    • startDate (String): The first date date can be selected.
    • endDate (String): The last date that can be selected.
    • inline (Boolean): Whether to create the datePicker as inline (e.g. always on the page) or as a model popup. Default is false (== modal popup)
    • createButton (Boolean): Whether to create a .dp-choose-date anchor directly after the matched element which when clicked will trigger the showing of the date picker. Default is true.
    • showYearNavigation (Boolean): Whether to display buttons which allow the user to navigate through the months a year at a time. Default is true.
    • closeOnSelect (Boolean): Whether to close the date picker when a date is selected. Default is true.
    • displayClose (Boolean): Whether to create a "Close" button within the date picker popup. Default is false.
    • selectMultiple (Boolean): Whether a user should be able to select multiple dates with this date picker. Default is false.
    • clickInput (Boolean): If the matched element is an input type="text" and this option is true then clicking on the input will cause the date picker to appear.
    • verticalPosition (Number): The vertical alignment of the popped up date picker to the matched element. One of $.dpConst.POS_TOP and $.dpConst.POS_BOTTOM. Default is $.dpConst.POS_TOP.
    • horizontalPosition (Number): The horizontal alignment of the popped up date picker to the matched element. One of $.dpConst.POS_LEFT and $.dpConst.POS_RIGHT.
    • verticalOffset (Number): The number of pixels offset from the defined verticalPosition of this date picker that it should pop up in. Default in 0.
    • horizontalOffset (Number): The number of pixels offset from the defined horizontalPosition of this date picker that it should pop up in. Default in 0.
    • renderCallback ((Function|Array)): A reference to a function (or an array of seperate functions) that is called as each cell is rendered and which can add classes and event listeners to the created nodes. Each callback function will receive four arguments; a jquery object wrapping the created TD, a Date object containing the date this TD represents, a number giving the currently rendered month and a number giving the currently rendered year. Default is no callback.
    • hoverClass (String): The class to attach to each cell when you hover over it (to allow you to use hover effects in IE6 which doesn't support the :hover pseudo-class on elements other than links). Default is dp-hover. Pass false if you don't want a hover class.

    Example:

    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();

    Example:

    See the projects homepage for many more complex examples...

    demo/index.html
  • dpClose( ) returns jQuery
    Closes the open date picker associated with this element.

    Example:

    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();
    			}
    		);
  • dpDisplay( HTMLElement e ) returns jQuery
    Displays the date picker associated with the matched elements. Since only one date picker can be displayed at once then the date picker associated with the last matched element will be the one that is displayed.

    Example:

    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();
  • dpGetSelected( ) returns Array
    Gets a list of Dates currently selected by this datePicker. This will be an empty array if no dates are currently selected or NULL if there is no datePicker associated with the matched element.

    Example:

    Will alert an empty array (as nothing is selected yet)

    $('.date-picker').datePicker();
    alert($('.date-picker').dpGetSelected());
  • dpSetDisabled( Boolean s ) returns jQuery
    Disables or enables this date picker

    Example:

    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);
  • dpSetDisplayedMonth( Number m, Number y ) returns jQuery
    Sets the month that will be displayed when the date picker is next opened. If the passed month is before startDate then the month containing startDate will be displayed instead. If the passed month is after endDate then the month containing the endDate will be displayed instead.

    Example:

    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);
  • dpSetEndDate( String d ) returns jQuery
    Updates the last selectable date for any date pickers on any matched elements.

    Example:

    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');
  • dpSetOffset( Number v, Number h ) returns jQuery
    Sets the offset that the popped up date picker will have from it's default position relative to it's associated element (as set by dpSetPosition)

    Example:

    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);
  • dpSetPosition( Number v, Number h ) returns jQuery
    Sets the position that the datePicker will pop up (relative to it's associated element)

    Example:

    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);
  • dpSetRenderCallback( (Function|Array) a ) returns jQuery
    Sets a function or array of functions that is called when each TD of the date picker popup is rendered to the page

    Example:

    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
    });
  • dpSetSelected( String d, Boolean v, Boolean m ) returns jQuery
    Selects or deselects a date on any matched element's date pickers. Deselcting is only useful on date pickers where selectMultiple==true. Selecting will only work if the passed date is within the startDate and endDate boundries for a given date picker.

    Example:

    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');
  • dpSetStartDate( String d ) returns jQuery
    Updates the first selectable date for any date pickers on any matched elements.

    Example:

    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');
  • renderCalendar( Object s ) returns jQuery
    Render a calendar table into any matched elements.

    Options

    • month (Number): The month to render (NOTE that months are zero based). Default is today's month.
    • year (Number): The year to render. Default is today's year.
    • renderCallback (Function): A reference to a function that is called as each cell is rendered and which can add classes and event listeners to the created nodes. Default is no callback.
    • showHeader (Number): Whether or not to show the header row, possible values are: $.dpConst.SHOW_HEADER_NONE (no header), $.dpConst.SHOW_HEADER_SHORT (first letter of each day) and $.dpConst.SHOW_HEADER_LONG (full name of each day). Default is $.dpConst.SHOW_HEADER_SHORT.
    • hoverClass (String): The class to attach to each cell when you hover over it (to allow you to use hover effects in IE6 which doesn't support the :hover pseudo-class on elements other than links). Default is dp-hover. Pass false if you don't want a hover class.

    Example:

    Renders a calendar displaying January 2007 into the element with an id of calendar-me.

    $('#calendar-me').renderCalendar({month:0, year:2007});

    Example:

    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});