Date-validator by Arkni Brahim

Options

Option	Type	Description
`format`^*	String	The date format. It is `DD/MM/YYYY` by default
`maxDate`	String \| Date	The max date.
`minDate`	String \| Date	The min date.
`separator`^*	String	Used to separate the day, month, and year. Most popular examples are a slash (`/`), hyphen (`-`), or dot (`.`) It is `/` by default.

^* — Required options if different from default values.

The following table describes the token meanings:

Token	Description
`D`	Day of the month as digits; no leading zero for single-digit days.
`DD`	Day of the month as digits; leading zero for single-digit days.
`M`	Month as digits; no leading zero for single-digit months.
`MM`	Month as digits; leading zero for single-digit months.
`YY`	Year as last two digits; leading zero for years less than 10.
`YYYY`	Year represented by four digits.
`h`	Hours; no leading zero for single-digit hours (12-hour clock).
`hh`	Hours; leading zero for single-digit hours (12-hour clock).
`H`	Hours; no leading zero for single-digit hours (24-hour clock).
`HH`	Hours; leading zero for single-digit hours (24-hour clock).
`m`	Minutes; no leading zero for single-digit minutes.
`mm`	Minutes; leading zero for single-digit minutes.
`s`	Seconds; no leading zero for single-digit seconds.
`ss`	Seconds; leading zero for single-digit seconds.
`A`^*	AM PM
`a`^*	am pm

^* — A and a tokens are used only with hh or h.

A SyntaxError is thrown if you are using one of them with 'HH' or 'H'.

Below are some examples of possible formats:

YYYY/DD/MM
YYYY-MM-DD
YYYY.MM.DD
DD/MM/YYYY
DD-MM-YYYY
DD.MM.YYYY
MM/DD/YYYY
MM-DD-YYYY
MM.DD.YYYY
M/D/YY
M-D-YY
M.D.YY
YYYY-MM-DD HH:mm
YYYY-MM-DD HH:mm:ss
YYYY-MM-DD H:m:s
YYYY-MM-DD hh:mm
YYYY-MM-DD hh:mm:ss A
YYYY-MM-DD hh:mm:ss a
YYYY-MM-DD h:m:s A
YYYY-MM-DD h:m:s a
...

Notes:

DateValidator use the follwoing messages to show errors based on validation level:

$.extend($.validator.messages, {
   dateValidatorMessages: {
      "default": $.validator.format("Please enter a valid date, format {0}."),
      minDate: $.validator.format("Please enter a date after {0}."),
      maxDate: $.validator.format("Please enter a date before {0}."),
      range: $.validator.format("Please enter a date between {0} and {1}.")
   }
});

Usage examples

Using default format & separator

<form id="dateForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Date</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="date" placeholder="DD/MM/YYYY" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-md-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

$('#dateForm').validate({
    rules: {
        date: {
            required: true,
            dateValidator: true // Or {}
        }
    }
});

Using custom format & separator

<form id="customDateForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Date</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="date" placeholder="YYYY-MM-DD" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-md-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

$('#customDateForm').validate({
    rules: {
        date: {
            required: true,
            dateValidator: {
                format: 'YYYY-MM-DD',
                separator: '-'
            }
        }
    }
});

Using custom format & separator (date time value)

<form id="dateTimeForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Date</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="date" placeholder="YYYY-MM-DD HH:mm" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-md-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

$('#dateTimeForm').validate({
    rules: {
        date: {
            required: true,
            dateValidator: {
                format: 'YYYY-MM-DD HH:mm',
                separator: '-'
            }
        }
    }
});

Using minDate & maxDate options

<form id="minMaxForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-3 control-label">Date</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="date" placeholder="YYYY-DD-MM" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-md-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

$('#minMaxForm').validate({
    rules: {
        date: {
            required: true,
            dateValidator: {
                format: 'YYYY-MM-DD',
                separator: '-',
                minDate: "2014-01-01",  // Or new Date( 2014, 0, 1 )
                maxDate: "2016-01-01"   // Or new Date( 2016, 0, 1 )
            }
        }
    }
});

If you are using date object as value of the minDate or the maxDate option and a date format contains a or A tokens, it's highly recommended to create the date object using the 24 hours system.

For example:

dateValidator: {
    format: 'YYYY-MM-DD hh:mm:ss A',
    separator: '-',

    // This will be converted to '2014-01-01 12:00:00 PM'
    minDate: new Date( 2014, 0, 1, 12, 0, 0 ),

    // If you want to set maxDate to '2016-01-01 11:59:59 PM', please
    // don't use 'new Date( 2016, 0, 1, 11, 59, 59)', use this instead.
    maxDate: new Date( 2016, 0, 1, 23, 59, 59 )
}