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: January 17, 2024
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! 🙂

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...