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.
appendText | beforeShow | dateFormat | dayNames | dayNamesShort | defaultDate | initialField | maxDate | minDate | monthNames | monthNamesShort | spinnerBigImage | spinnerBigSize | spinnerImage | spinnerIncDecOnly | spinnerRepeat | spinnerSize | spinnerTexts | useMouseWheel
| 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 four-digit year, 'Y' for two-digit 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 remaining characters are the separator(s) allowed between these fields.
The first separator is used when displaying the date and must always be present,
while the remainder are allowed when parsing an entered date. This is one of the
regional settings fields.$(selector).dateEntry({dateFormat: 'dnY '});
$(selector).dateEntry({dateFormat: 'mdy/.-'});Since 1.0.5 - 'Y' format and additional separators. |
| 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 string in the current
dateFormat, a numeric value indicating days from today,
or a string value indicating a number and units. 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.
Leave as null to default to the current date.$(selector).dateEntry({defaultDate: new Date(2009, 12 - 1, 25)});
$(selector).dateEntry({defaultDate: '12/25/2009'});
$(selector).dateEntry({defaultDate: +1});
$(selector).dateEntry({defaultDate: '+1m -1d'});Since 1.0.5 - may be a string in the current date format. |
| 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.Since 1.0.5 - may be a string in the current date format. |
| 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.Since 1.0.5 - may be a string in the current date format. |
| 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 times 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
change | destroy | disable | enable | getDate | isDisabled | setDate | setDefaults
| Signature | Returns | Comments |
|---|---|---|
| $.dateEntry.setDefaults(settings) | - | Update the default instance settings 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).settings (object) the new
settings to use.$(selector).dateEntry('change', {minDate: new Date(2009, 12 - 1, 25)});
$(selector).dateEntry('change', {initialField: 1, useMouseWheel: false}); |
| $(inputs).dateEntry('change', name, value) | jQuery | Update a single setting
for the date entry instance(s) attached to the given input field(s).name (string) the name of the option;value (any) the option's new value.$(selector).dateEntry('change', 'minDate', new Date(2009, 12 - 1, 25));
$(selector).dateEntry('change', 'initialField', 1);Since 1.0.5. |
| $(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.date (Date or string or number) the new date to use, which may be
a Date object, a string in the current
dateFormat,
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'.
Use null for the current date.$(selector).dateEntry('setDate', new Date(2009, 12 - 1, 25));
$(selector).dateEntry('setDate', '12/25/2009');
$(selector).dateEntry('setDate', +1);
$(selector).dateEntry('setDate', '+1m -1d');Since 1.0.5 - may be a string in the current date format. |
| $(inputs).dateEntry('getDate') | Date | Retrieve the date for the (first) given input field as a Date.
Returns null if the field is blank. |