CNET JS Code Documentation

Class: DatePicker

Allows the user to enter a date in any popuplar format or choose from a calendar. See also: DatePicker.Extras for range and time options.

Authors

  • Paul Anderson
  • Aaron Newton

Implements

Syntax

new DatePicker(input[, options]);
 

Arguments

  1. input - (mixed) A string of the id for an Element or an Element reference for the input for the date
  2. options - (object) an object with key/value settings

Options

  • format - (string) see Date; defaults to "%x" which renders 12/31/1999
  • stickyWinOptions - (object) key/value settings to pass along to the StickyWin popup object; defaults to {position: 'bottomLeft', offset: {x:10, y:10}}
  • stickyWinToUse - (Class) which StickyWin class to use (StickyWin, StickyWinFx, etc.)
  • draggable - (boolean) whether or not the popup is draggable; requires Drag; defaults to true (if Drag is not present, the element won't be draggable, but it won't throw an error).
  • dragOptions - (object) key/value settings to pass on to Drag
  • additionalShowLinks - (array) collection of DOM elements that should show the calendar for the input when clicked
  • showOnInputFocus - (boolean) whether to show the calendar when the input is focused; defaults to true; if set to false, you must specify at least one object in additionalShowLinks if you want the calendar to be accessible. NOTE: you can set this to false and specify no additional show links and this class will still auto-format date inputs for you
  • useDefaultCss - (boolean) whether to use the default css described in this class. If false, you must define your own css; defaults to true
  • hideCalendarOnPick - (boolean) whether to hide the calendar when the user chooses a date; defaults to true
  • calendarId - (string) the id of the calendar to show
  • updateOnBlur - (boolean) updates the input when the user moves the focus out of the input. If set to false, the only time the date picker will update the input is when the user actually selects a date (this will prevent the date picker from formatting a date the user types in).

Events

  • onPick - (function) callback to execute when the user choose a date
  • onShow - (function) callback to execute when the calendar appears
  • onHide - (function) callback to execute when the calendar is hidden

CSS

  • The calendar popup builds a table with all the dates and months and whatnot. It also creates default styles for this table. You can overwrite the default style applied to the calendar by passing in the option to not use the default styles.

Autoformatting and Date format

  • This class will take a user's input of a date value and convert it into a date. If the user inputs 01.02.03, this class will update it on the blur event of the field. The same is true for 01.02.2003, 01/02/03, 01 02 2003, 2003.02.01, and so on. Additional parsers are available with Date and Date.Extras

Example

<input type="text" name="date" id="dateInput"/>
<img src="calendar.gif" id="calendarImg"/>
 
new DatePicker('dateInput', {
    additionalShowLinks: ['calendarImg'],
    showOnInputFocus: false
});
 

Note

This class will play nice with FormValidator. If you specify a date format with the validatorProps property of the input, then the format option in DatePicker will be overwritten by that value (so your form validator will get a valid value). If you don't specify a format in the element, then DatePicker will define one using its format option.

<input id="birthday" name="birthday" validatorProps="{dateFormat: '%x'}"/>
new DatePicker("birthday", {format: "%db"}); //format will be overwritten to be %x; validatorProps win
 
<input id="birthday" name="birthday"/>
new DatePicker("birthday", {format: "%db"}); //format will be overwritten to be %x; validatorProps win
 
//input is now
//<input id="birthday" name="birthday" validatorProps="{dateFormat: '%db'}"/>
//DatePicker assigns format, even if FormValidator not in use.
 

DatePicker Method: updateInput

Updates the input field with the current selected dates.

Syntax

myDatePicker.updateInput();
 

Returns

DatePicker Method: validDate

Parses a string into a Date object and returns it.

Syntax

myDatePicker.validDate(val);
 

Arguments

  1. val - (mixed, optional) either a string to parse into a date or a date object. If no value is specified, the input value will be used instead.

Accepted formats

  • 01.02.03, 01.02.2003, 01/02/03, 01 02 2003, 2003.02.01, and so on.

Returns

  • (date or null) if the date parses, returns date, otherwise null

DatePicker Method: formatDate

Formats a date object into the output specified in the options for the class instance.

Syntax

myDatePicker.formatDate(date);
 

Arguments

  1. date - (date) the date to format.

Returns

  • (string) The formated result

DatePicker Method: show

Shows the calendar popup. This will reposition the popup and display the date that the user has entered or today's date if they have not entered anything.

Syntax

myDatePicker.show();
 

Returns

DatePicker Method: hide

Hides the calendar popup.

Syntax

myDatePicker.hide();
 

Returns