date. picker.js

Allows the user to enter a date in any popuplar format or choose from a calendar.

Dependencies

mootoolsMoo.js, Utility.js, Common.js, Function.js, Element.js, Array.js, String.js, Event.js
cnetstickyWin.js and all its dependencies
optionalDrag.Base.js, stickyWinFx.js

Authors

Paul Anderson Aaron Newton <aaron [dot] newton [at] cnet [dot] com>

Summary
date. picker.jsAllows the user to enter a date in any popuplar format or choose from a calendar.
DatePickerAllows the user to enter a date in any popuplar format or choose from a calendar.
Properties
updateInputTakes a given date and updates the input field with its value.
validDateParses a string into a Date object and returns it.
formatDateformats a date object into MM/DD/YYYY.
getCloseImgReturns an img object to use for the close funciton.
hideHides the calendar popup.
showShows the calendar popup.
Change Log$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/date.picker.js,v $ $Log: date.picker.js,v $ Revision 1.9 2007/05/16 20:17:52 newtona changing window.onDomReady to window.addEvent(‘domready’

DatePicker

Allows the user to enter a date in any popuplar format or choose from a calendar.

Arguments

inputthe id of a text input, or a reference to the element itself
optionsan object with key/value settings

Options

calendarId(string) the id of the calendar to show; defaults to “popupCalendar” + the date (so it’s unique)
months(array) the months of the year.  Defaults to [“Janurary”, “February”, etc.]
days(array) the days of the week.  Defaults to [“Su”, “Mo”, “Tu”, etc.]
stickyWinOptions(object) options to pass along to the stickyWin popup object.  Defaults to {position: ‘bottomLeft’, offset: {x:10, y:10}}
stickyWinToUsewhich StickyWin class to use (StickyWin, StickyWinFx, etc.) draggable: (boolean) whether or not the popup is draggable.  Requires Drag.Base.js.  Defautls to true (if Drag.Base.js is not present, the element won’t be draggable, but it won’t throw an error. dragOptions: (object) options to pass on to Drag.Base
additionalShowLinks(array) collection of dom elements (or ids) that should show the calendar for the input
showOnInputFocus(boolean) 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 specy no additional show links that this class will still auto-format date inputs for you*
useDefaultCss(boolean) use the default css described in this class.  If false, you must define your own css.  Defaults to true.
hideCalendarOnPick(boolean) hide the calendar when the user chooses a date.  Defaults to true.
onPickfunction to execute when the user choose a date
onShowfunction to execute when the calendar appears
onHidefunction to execute when the calendar is hidden CSS: The calendar popup builds a table with all the dates and months and whatnot.  You may style this table using the following descriptors:
div.calendarHolderthe div containing the calendar table.
table.datePickerthe table with the calendar values
tr.dateNavthe row containing the forward, back, and close buttons, and the month name
tr.dayNamesthe row containing the names of the days of the week
tr.dayRowone of the rows containing actual dates
td.todaythe td that contains today’s date
td.selectedDatethe td that contains the user’s selection
td.otherMonthDatetds that contain dates before or after the current selected month

Autoformatting and Date format

This class will take a user’s input of a date value and convert it into MM/DD/YYYY.  If the user inputs 01.02.03, this class will update it to 01/02/2003 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.

If you need this class to return a different format, you can use Class.implement to create your own formatter.  If javascript had a better date object, we wouldn’t have to do it like this, but what are ya gonna do?

Example

<input type="text" name="date" id="dateInput"> <img src="calendar.gif" id="calendarImg">
<script>
new DatePicker('dateInput', {
    additionalShowLinks: ['calendarImg'],
    showOnInputFocus: false
});
Summary
Properties
updateInputTakes a given date and updates the input field with its value.
validDateParses a string into a Date object and returns it.
formatDateformats a date object into MM/DD/YYYY.
getCloseImgReturns an img object to use for the close funciton.
hideHides the calendar popup.
showShows the calendar popup.

Properties

updateInput

Takes a given date and updates the input field with its value.

Arguments

datea date or a string that is parsable as a date (see validDate)

validDate

Parses a string into a Date object and returns it.

Arguments

val(optional) the date to parse. a string 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.

formatDate

formats a date object into MM/DD/YYYY.

Arguments

date(Date object) the date to format.

getCloseImg

Returns an img object to use for the close funciton.

You can use Class.implement to redefine this so that it returns a dom element of your choosing.  You will need to add your own call to DatePicker.hide.

hide

Hides the calendar popup.

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.

Change Log

$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/date.picker.js,v $ $Log: date.picker.js,v $ Revision 1.9 2007/05/16 20:17:52 newtona changing window.onDomReady to window.addEvent(‘domready’

Revision 1.8 2007/03/08 23:29:31 newtona date picker: strict javascript warnings cleaned up popup details strict javascript warnings cleaned up product.picker: strict javascript warnings cleaned up, updating input now fires onchange event confirmer: new file

Revision 1.7 2007/02/27 21:46:43 newtona docs update; fixing references

Revision 1.6 2007/02/21 00:27:08 newtona switched Class.create to Class.empty

Revision 1.5 2007/02/07 20:51:41 newtona implemented Options class implemented Events class StickyWin now uses Element.position

Revision 1.4 2007/02/03 01:36:41 newtona fixed a fireevent bug

Revision 1.3 2007/01/29 23:50:53 newtona additional bug fixes and tweaks. stable now.

Revision 1.2 2007/01/27 01:51:36 newtona numerous ie6 fixes.

Revision 1.1 2007/01/26 21:55:04 newtona * empty log message *

My Object Oriented javascript.
Contains Utility functions
Contains common implementations for custom classes.
Contains Function prototypes and utility functions .
function $(el)
returns the element passed in with all the Element prototypes applied.
Contains useful Element prototypes, to be used with the dollar function $.
function $A(array,
start,
length)
returns a copy of the array.
Same as Array.copy, but as function.
function $each(iterable,
fn,
bind)
Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.
Contains Array prototypes, $A, $each
Contains String prototypes and Number prototypes.
Event class
Creates a div within the page with the specified contents at the location relative to the element you specify; basically an in-page popup maker.
Modify two css properties of an element based on the position of the mouse.
Makes an element resizable (by dragging) with the supplied options.
Contains Drag.Base, Element.makeResizable
Creates a div within the page with the specified contents at the location relative to the element you specify; basically an in-page popup maker.
Creates a StickyWin that optionally fades in and out, is draggable, and is resizable (requires stickyWinFx.Drag.js).
Implements drag and resize functionaity into StickyWinFx.
Extends StickyWin to create popups that fade in and out and can be dragged and resized (requires stickyWinFx.Drag.js).
Implements the passed in properties to the base Class prototypes, altering the base class, unlike <Class.extend>.
Parses a string into a Date object and returns it.
Hides the calendar popup.