jQuery Widget For Date Entry and Validation - datetextentry

File Size: 183 KB
Views Total: 6286
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.