Date Format (DD/MM/YYY) Validation in jQuery

The “datetextentry.js” is a great jQuery plugin which provides data format validation in real-time.  It’s a powerful and well-developed plugin.

The plugin comes with multiple features which validate the data format. Due to its extensive options, it allows you to easily customize and configure it according to your development requirements.

The date Text Entry plugin is useful to create nice and clean date inputs with custom placeholders, tooltips, separators, and errors.

You can use this plugin to validate the date of birth, current date, future date (days, months and years) or general-purpose data input with multiple configuration options.

Furthermore, it has the functionality of checking the validity or invalid data by using its built-in regular expression function. You can also set the custom order of data formats such as mm/dd/yyyy or dd-mm-yyyy.

How to Use jQuery Date Format Validation Plugin

By adding the jQuery and CSS file, you can easily validate the data input type fields. Let’s get started to add the 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>

Next step to create the HTML which is easy and simple. All you need to define an input type text with a unique ID. It will use to insert the date.

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

The last and final step to initialize the plugin by using the jQuery document ready function. you simply need to use the .datetextentry function with the ID which we defined in the HTML input element.

$(document).ready(function(){

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

});

Date Validator Advanced Configuration Options

The data validator plugin comes with a lot of configuration options which you can use to customize it as you want. It’s quite easy to use these options. All you need to define the option/settings in the .datetextentry function.

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

EXAMPLE,

$('#dob').datetextentry({
   show_hints : true,
});

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

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

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

$('#dob').datetextentry({
   show_tooltips: true,
});

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

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

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

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

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

$('#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',
});

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