Date Format Validation in jQuery – datetextentry.js

The “datetextentry.js” is a well developed, powerful and multi-feature jQuery plugin for date format validation. This plugin is useful to create awesome date inputs with custom placeholders, tooltips, separators and errors. It can be used to validate date of birth, current date, future date (days, months and years) or general purpose date input with multiple configuration options.

Furthermore, the plugin uses JavaScript regular expression to check invalid / valid date. You can also set the custom (mm/dd/yyyy or dd-mm-yyyy) date format.

Plugin Overview

Plugin: datetextentry
Author: Grant McLean
Licence: MIT Licence
Published: September 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 15.1 KB

How to Use Date Format Validation Plugin

1. To validate your date input fields, we need to getting started with “date text entry” plugin. So, load jQuery JavaScript library and date validator CSS and JS file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Date Text Entry CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery.datetextentry.css">

<!-- Date Text Entry JS -->
<script src="js/jquery.datetextentry.js"></script>

2. Now, create an input element with a unique id in your HTML form. This input will be used to insert date.

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

3. Finally, initialize the plugin in jQuery document ready function to active the date validator plugin with all default settings.

$(document).ready(function(){

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

});

Advance Configuration Options for Date Format Validation

The following are some advanced configuration options to create / customize “date format validation”.

Option Description, Default, Type
field_order

This option is useful to change the date format in input. Default: “DMY”, Type: String.

$('#dob').datetextentry({
   field_order: 'DMY',
});
separator

It define the seprator among the days, months and year. Default: ‘/’, Type: String.

$('#dob').datetextentry({
   separator: '-',
});
field_width_day ,
field_width_month ,
field_width_year and
field_width_sep

These options are used to use the custom width for day, month, year and separator respectively. Type: Number.

$('#dob').datetextentry({
   field_width_day: 40,
   field_width_month: 40,
   field_width_year: 60,
   field_width_sep: 4,
});
show_tooltips

Decide weather to show tooltip text with date input. Default: true, Type: Boolean.

$('#dob').datetextentry({
   show_tooltips: true,
});
field_tip_text_day ,
field_tip_text_month and field_tip_text_year

These options are useful to set custom tooltip text for day, month and year respectively. Type: String. The example shows the defaults.

$('#dob').datetextentry({
   field_tip_text_day    : 'Day',
   field_tip_text_month  : 'Month',
   field_tip_text_year   : 'Year',
		
});
tooltip_x and tooltip_y

These options define the x and y coordinates for tooltip. Type: Number.

$('#dob').datetextentry({
     tooltip_x : 0,
     tooltip_y : 6,
});
show_hints

Enable / disable placeholder hints (dd/mm/yyyy) in date input. Default: true, Type: Boolean.

$('#dob').datetextentry({
   show_hints : true,
});
field_hint_text_day , field_hint_text_month and field_hint_text_year

These options are define the hint / placeholder text for date input. Type: String.

$('#dob').datetextentry({
    field_hint_text_day   : 'DD',
    field_hint_text_month : 'MM',
    field_hint_text_year  : 'YYYY',
});
show_errors

Decide whether to show error to users for date validation. Default: true, Type: Boolean.

$('#dob').datetextentry({
   show_errors : true,
});
errorbox_x and errorbox_y

These option define the x and y coordinates for error message box. Type: Number.

$('#dob').datetextentry({
   errorbox_x : 8,
   errorbox_y : 3,
});
Set of erros

The following mentioned options (with default values) define the text for errors. Type: String.

$('#dob').datetextentry({
        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',
        E_REQUIRED_FIELD      : 'This field is required',
});
month_name

An array of month names. Type: array.

$('#dob').datetextentry({
   month_name : [
            'January', 'February', 'March', 'April',
            'May', 'June', 'July', 'August', 'September',
            'October', 'November', 'December'
        ]
});

Tip: Browse options with live demo to create advanced date format validation in jQuery. Best of luck! 🙂