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

Category: Date & Time | September 22, 2019
Date Format (DD/MM/YYY) Validation in jQuery
Author: grantm
Official Page: Go to Website
Last Update: September 22, 2019
License: MIT

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,
});
Option Description, Default, Type
field_order This option is useful to change the date format in the input. Default: “DMY”, Type: String.

$('#dob').datetextentry({
   field_order: 'DMY',
});
separator It defines the separator 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 the 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 whether 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 the 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
field_hint_text_day , field_hint_text_month and field_hint_text_year These options 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 an error to users for date validation. Default: true, Type: Boolean.

$('#dob').datetextentry({
   show_errors : true,
});
errorbox_x and errorbox_y These options define the x and y coordinates for error the message box. Type: Number.

$('#dob').datetextentry({
   errorbox_x : 8,
   errorbox_y : 3,
});
Set of error 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'
        ]
});

 

You May Also Like

Leave a Comment