jQuery Date Entry Reference

A jQuery plugin that sets an input field up to accept a date value using a spinner. If you find this plugin useful please vote for it on the jQuery site.

This page provides a documentation reference for working with the plugin v1.0.4. See a demonstration of the date entry plugin and download the code from there.

Settings
Global

Instance Settings

A separate date entry instance is created for each invocation of $(selector).dateEntry();. Each instance may have different settings for their input field(s), e.g. $(selector).dateEntry({dateFormat: 'ymd-'});.

Alternately, you can specify the settings per control by including the jQuery Metadata plugin in your page and adding them to the class attribute, e.g. <input type="text" class="{dateFormat: 'ymd-'}"/>.

Below are the settings that may be applied to each date entry instance. All are optional.

Name	Type	Default	Comments
dateFormat	string	'mdy/'	The format for the date display. The first three characters indicate the order of the fields: 'y' for year, 'm' for month, 'n' for abbreviated month name, 'N' for full month name, 'd' for day, 'w' for abbreviated day name and number, or 'W' for full day name and number. The last character is the separator between these fields. This is one of the regional settings fields.
monthNames	string[12]	['January', ..., 'December']	The names of the months. This is one of the regional settings fields.
monthNamesShort	string[12]	['Jan', ..., 'Dec']	The abbreviated names of the months. This is one of the regional settings fields.
dayNames	string[7]	['Sunday', ..., 'Saturday']	The names of the days, starting at Sunday. This is one of the regional settings fields.
dayNamesShort	string[7]	['Sun', ..., 'Sat']	The abbreviated names of the days, starting at Sunday. This is one of the regional settings fields.
appendText	string	''	Add content to display after each date field. This may contain HTML markup.
initialField	number	0	The number of the portion of the date field to highlight initially. Use 0 for the first field.
useMouseWheel	boolean	true	True to use the mouse wheel for increment/decrement if possible, false to never use it.
defaultDate	Date or number or string	null	The default date to show when no other value has been entered. This may be a `Date` object, a numeric value (days from now, e.g. +10), or a string value indicating a number and units, e.g. `'+2w'`. In the latter case, use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days. Letters may be upper or lower case. Multiple offsets may be combined into one setting, e.g. `'-1m -10d'`. Leave as `null` to default to the current date.
minDate	Date or number or string	null	The minimum date that may be selected, or `null` for no limit. See `defaultDate` for a description of the possible formats.
maxDate	Date or number or string	null	The maximum date that may be selected, or `null` for no limit. See `defaultDate` for a description of the possible formats.
spinnerImage	string	'spinnerDefault.png'	The URL for the spinner images to use, or '' for no spinner. The file must contain seven images horizontally for the normal view, then for each "button" pressed (now, previous, next, increment, and decrement), and, finally, the disabled view.
spinnerSize	number[3]	[20, 20, 8]	The dimensions of the spinner image for determining which "button" was clicked. The first two values are the width and height of the individual images, the third is the size of the central button for setting the current date, or 0 for no central button.
spinnerBigImage	string	''	The URL for an expanded spinner image to use, or '' for no expansion. The layout is the same as for `spinnerImage` but should be a larger size. The expanded spinner appears when the user hovers over the original spinner and disappears when they move off it.
spinnerBigSize	number[3]	[40, 40, 16]	The dimensions of the expanded spinner image for determining which "button" was clicked. The first two values are the width and height of the individual images, the third is the size of the central button for setting the current date, or 0 for no central button.
spinnerIncDecOnly	boolean	false	True to have only the increment and decrement buttons on the spinner, or false for all the buttons.
spinnerTexts	string[5]	['Today', 'Previous field', 'Next field', 'Increment', 'Decrement']	The tooltip text for the spinner buttons. This is one of the regional settings fields.
spinnerRepeat	number[2]	[500, 250]	The dates in milliseconds for the auto-repeat feature on the increment and decrement spinner buttons. The first value is the initial delay and the second one is the subsequent delay. Hold the mouse button down on these spinner buttons to trigger this feature. Use [0, 0] to disable the auto-repeat.
beforeShow	function	null	A function that accepts an input field and returns a settings object containing new settings for the date entry for this field. For example, you can use it to set up a date range wherein both fields restrict the possible values of the other field. `this` refers to the input field as well. Leave as `null` for no per-field customisation.

Global Settings

Name	Type	Default	Comments
regional	object[]		The set of regional settings for the date entry fields. Entries are indexed by the country/region code with '' providing the default (English) settings. Each entry is an anonymous object with the following properties: `dateFormat`, `monthNames`, `monthNamesShort`, `dayNames`, `dayNamesShort`, `spinnerTexts`. Language packages load new entries into this array and automatically apply them as global defaults. `<script type="text/javascript" src="jquery.dateentry-fr.js"></script>` If necessary, you can then revert to the default language settings with `$.dateEntry.setDefaults($.dateEntry.regional['']);` and apply the language settings to individual fields with `$('#frenchDate').dateEntry($.dateEntry.regional['fr']);`. Check out the list of available localisation packages.

Functions

Signature	Returns	Comments
$.dateEntry.setDefaults(settings)	-	Update the default instance settings (see above) to use with all date entry instances.
$(inputs).dateEntry('change', settings)	jQuery	Update the settings for the date entry instance(s) attached to the given input field(s).
$(inputs).dateEntry('destroy')	jQuery	Remove the date entry functionality from the given input field(s).
$(inputs).dateEntry('disable')	jQuery	Disable the given input field and any spinner attached to it, preventing it from being used for date entry.
$(inputs).dateEntry('enable')	jQuery	Enable the given input field and any spinner attached to it, allowing it to be used for date entry.
$(inputs).dateEntry('isDisabled')	boolean	Determine whether the (first) given input field has been disabled (true).
$(inputs).dateEntry('setDate', date)	jQuery	Update and display the date in the correct format for the given input field(s). See `defaultDate` for a description of the possible formats for `date`. Use `null` for the current date.
$(inputs).dateEntry('getDate')	Date	Retrieve the date for the (first) given input field as a `Date`. Returns `null` if the field is blank.