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)
NameHTML attributeTypeDescription
format*data-fv-date___formatStringThe date format. It is MM/DD/YYYY, by default
maxdata-fv-date___maxString or Date or FunctionThe value must be earlier than this option
messagedata-fv-date___messageStringThe error message
mindata-fv-date___minString or Date or FunctionThe value must be later than this option
separatordata-fv-date___separatorStringUsed 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:
SectionTokenSeparator
DateDD, MM, YYYYDefined by the separator option. Most popular examples are a slash (/), hyphen (-), or dot (.)
Timeh, m, sa colon (:)
AM/PMAn/a
The following table describes the token meanings, defined by momentjs, one of most popular JavaScript datetime library:
TokenDescriptionRequired
MMMonth numberYes
DDDay of monthYes
YYYY4 digit yearYes
h12 hour timeNo
mMinutesNo
sSecondsNo
AAM/PMNo
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 the ES6 module
// You might need to change the importing path
import { date } from '/vendors/@form-validation/cjs/validator-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: ...,
}
}
*/
Using the npm package
  • Install the validator package:
$ npm install @form-validation/validator-date
  • Use the date validator:
import { date } from '@form-validation/validator-date';
const result = date().validate({
value: ...,
options: {
format: ...,
max: ...,
message: ...,
min: ...,
separator: ...,
},
});

Basic example

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

NPM package example

The following snippet shows how to use the date validator with the npm package:
import { date } from '@form-validation/validator-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: '32.11.2014',
options: {
format: 'DD.MM.YYYY',
message: 'The value is not a valid date',
},
});
// res2.valid === false
// res2.meta.date === null

See also

Changelog

v2.1.0
  • The validator doesn't work properly if the message property isn't defined
  • The validator doesn't work properly when min or max option contains the AM/PM format
  • The validator doesn't return the correct date in the meta property when using the AM/PM format
v2.0.0
  • Add the npm package
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