date validator

Validate a date

Options

Using with form field

* presents a required option. The HTML attributes are used to set the validator options via the Declarative plugin

Name HTML attribute Type Description
format* data-fv-date___format String The date format. It is MM/DD/YYYY, by default
max data-fv-date___max String or Date or Function The value must be earlier than this option
message data-fv-date___message String The error message
min data-fv-date___min String or Date or Function The value must be later than this option
separator data-fv-date___separator String

Used to separate the day, month, and year. If it's not defined, the validator will look for the following separators automatically:

  • /
  • -
  • . (which is used in most European countries)

The min and max options can be

  • a date string in the format defined by the format option
  • a Date object
  • or a function that returns one of the two types above.

Tip

Use the StartEndDate plugin if you want to validate start and end dates

The format can combine date, time, and AM/PM indicator sections:

Section Token Separator
Date DD, MM, YYYY Defined by the separator option.
Most popular examples are a slash (/), hyphen (-), or dot (.)
Time h, m, s a colon (:)
AM/PM A n/a

The following table describes the token meanings, defined by momentjs, one of most popular JavaScript datetime library:

Token Description Required
MM Month number Yes
DD Day of month Yes
YYYY 4 digit year Yes
h 12 hour time No
m Minutes No
s Seconds No
A AM/PM No

The date validator requires day, month and year. If you are looking for hour and time validator, HH:mm, for example, you should use the regexp validator.

Below are some example of possible formats:

  • YYYY/DD/MM
  • YYYY/DD/MM h
  • YYYY/DD/MM h A
  • YYYY/DD/MM h:m
  • YYYY/DD/MM h:m A
  • YYYY/DD/MM h:m:s
  • YYYY/DD/MM h:m:s A
  • YYYY-MM-DD
  • YYYY-MM-DD h:m A
  • DD/MM/YYYY
  • DD/MM/YYYY h:m A
  • MM-DD-YYYY
  • MM-DD-YYYY h:m A
  • DD-MM-YYYY
  • DD-MM-YYYY h:m A

It's possible to support other date format by using callback validator as shown in the Custom format example below.

Tip

The date validator also checks the number of days in February of leap year. For example, 2000/02/29 is a valid date, while 2001/02/29 is invalid one

Using with ES6 module

Basic example

The following form might be used in a profile setting page:

ES6 Module Example

The following snippet shows how to use the date validator with ES6 module:

More examples