date validator
Validate a date
Options
Using with form field
(* 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.
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 the ES6 module
import { date } from '/vendors/@form-validation/cjs/validator-date';
const result = date().validate({
value: ...,
options: {
format: ...,
max: ...,
message: ...,
min: ...,
separator: ...,
},
});
Using the npm package
- Install the validator package:
$ npm install @form-validation/validator-date
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:
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',
},
});
const res2 = date().validate({
value: '32.11.2014',
options: {
format: 'DD.MM.YYYY',
message: 'The value is not a valid date',
},
});
See also
Changelog
- 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
- The
min
, max
options accept a function returning a Date
object or a string
- Fix an issue that the
separator
option isn't determined properly