Getting Started
Events

date validator

Validate a date

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
(* denotes a required option)
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 the separator option isn't 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.
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 validator as shown in the Custom format example below.
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
            
// You might need to change the importing path
import date from 'formvalidation/dist/es6/validators/date' ;
const result = date ( ) . validate ( {
value : ... ,
options : {
format : ... ,
max : ... ,
message : ... ,
min : ... ,
separator : ... ,
} ,
} ) ;
/*
result is an object of
{
valid: true or false,
message: The error message,
meta: {
// Can be null (if the value is not a valid date)
// or a JavaScript Date object presenting the value
date: ...,
}
}
*/

Basic example

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

ES6 Module Example

The following snippet shows how to use the date validator with ES6 module:
            
// You might need to change the importing path
import date from 'formvalidation/dist/es6/validators/date' ;
const res1 = date ( ) . validate ( {
value : '2014/08/17' ,
options : {
format : 'YYYY/MM/DD' ,
message : 'The value is not a valid date' ,
min : '2010/01/01' ,
} ,
} ) ;
// res1.valid === true
// res1.meta.date === new Date('2014/08/17')
const res2 = date ( ) . validate ( {
value : '' ,
options : {
format : 'DD.MM.YYYY' ,
message : 'The value is not a valid date' ,
} ,
} ) ;
// res2.valid === false
// res2.meta.date === null

See also

Changelog

v1.1.0
  • The min , max options accept a function returning a Date object or a string
v1.0.1
  • Fix an issue that the separator option isn't determined properly