jQuery Widget For Date Entry and Validation - datetextentry

datetextentry is a jQuery based date input widget that separates the standard text input field for day, month and year, and performs a real-time date validation while the user typing.

Features:

• Separate fields for day, month and year (configurable order).
• Tooltips and hint text to guide the user through each field.
• Auto-advance when a field is 'full'.
• Backspacing through an empty field to the preceding field.
• Custom handling for mapping 2-digit years to 4 digits.
• Immediate feedback for invalid data (e.g.: day 32 or month 13).
• More advanced validation on complete dates (e.g.: to reject February 29th in a non-leap year).
• Custom validation for application-specific date range checking.
• Linking the input field with its label (e.g.: click label to focus).

Basic Usage:

1. Add the required jquery.datetextentry.css in the head section of your page.

<link rel="stylesheet" type="text/css" href="jquery.datetextentry.css">

2. Create a standard text input field.

<input id="menu" name="dob" class="text" value="">

3. Include jQuery library and jQuery datetextentry plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datetextentry.js"></script>

4. Fire the plugin with jQuery selector.

<script type="text/javascript">

$('#demo').datetextentry();

</script>

5. Options to customize the widget.

$.fn.datetextentry.defaults = {
field_order   : 'DMY',
separator : '/',
show_tooltips : true,
show_hints: true,
field_width_day   : 40,
field_width_month : 40,
field_width_year  : 60,
field_width_sep   : 4,
errorbox_x: 8,
errorbox_y: 3,
tooltip_x : 0,
tooltip_y : 6,
field_tip_text_day: 'Day',
field_tip_text_month  : 'Month',
field_tip_text_year   : 'Year',
field_hint_text_day   : 'DD',
field_hint_text_month : 'MM',
field_hint_text_year  : 'YYYY',
E_DAY_NAN : 'Day must be a number',
E_DAY_TOO_BIG : 'Day must be 1-31',
E_DAY_TOO_SMALL   : 'Day must be 1-31',
E_BAD_DAY_FOR_MONTH   : 'Only %d days in %m %y',
E_MONTH_NAN   : 'Month must be a number',
E_MONTH_TOO_BIG   : 'Month must be 1-12',
E_MONTH_TOO_SMALL : 'Month must be 1-12',
E_YEAR_NAN: 'Year must be a number',
E_YEAR_LENGTH : 'Year must be 4 digits',
E_YEAR_TOO_SMALL  : 'Year must not be before %y',
E_YEAR_TOO_BIG: 'Year must not be after %y',
E_MIN_DATE: 'Date must not be earlier than %DATE',
E_MAX_DATE: 'Date must not be later than %DATE',
month_name: [
  'January', 'February', 'March', 'April',
  'May', 'June', 'July', 'August', 'September',
  'October', 'November', 'December'
  ]
};

Changelog:

v2.0.16 (2020-09-09)

• JS updated

v2.0.15 (2019-09-26)

• Add inputmode="numeric" to date input fields.

v2.0.14 (2019-07-21)

• JS update

2017-10-12

• update all calls to 'throw' to use an Error object rather than a string

2017-01-06

• bugfix

v2.0.10 (2015-06-08)

• fix validation of DD + MM (without YYYY)
• when advancing focus, try to ensure blur event precedes focus event

v2.0.9 (2014-04-27)

• fix #1 where focus advanced 2 fields instead of 1
• fix class name applied to sub-field input elements
• add aria-label to sub-field input elements for improved accessibility

v2.0.8 (2014-03-10)

• skip hints and tooltips in readonly mode
• added set_readonly method to make date field non-editable

v2.0.7 (2013-12-19)

• work around IE8's broken substr method

v2.0.6 (2013-11-18)

• add the (as-yet-undocumented) widget_error_text() method

v2.0.5 (2013-11-17)

• more fixes for 'clear' api call not clearing all internal state

v2.0.4 (2013-11-07)

• add a 'destroy' method to remove date widget functionality
• apply zero padding more consistently
• improve handling of different types passed to min_date & max_date

---

This awesome jQuery plugin is developed by grantm. For more Advanced Usages, please check the demo page or visit the official website.