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 JavaScript module


// You might need to change the importing path
import date from 'formvalidation/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:

Example: Using with a date picker

The form below is an example of using the date validator with flatpickr, a lightweight and powerful datetime picker.

If you look at the sample code in the Code tab, the date field has to be revalidated after picking a date from the date picker. You have to do the same thing for any date picker.


const fv = FormValidation.formValidation(form, {
    fields: {
        meetingTime: {
            ...
        },
    },
});

flatpickr(form.querySelector('[name="meetingTime"]'), {
    ...
    // After selecting a date, we need to revalidate the field
    onChange: function() {
        fv.revalidateField('meetingTime');
    },
});

Example: Disabling date

The example below shows how to treat all Sundays as not valid date. You can try to choose a Sunday from the picker to see how it works in action.

Example: Supporting custom format

This example illustrates the ability of validating date in custom format by using the callback validator and momentjs to parse/validate.

Example: Validating date range

The following form asks you to enter a date in the range of 2000/01/01 and 2020/12/30. It can be implemented by using the min and max options.

You also can use the callback validator and isBefore(), isAfter() methods provided momentjs to check if the date is in the range.

Module example

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


// You might need to change the importing path
import date from 'formvalidation/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: '32.11.2014',
    options: {
        format: 'DD.MM.YYYY',
        message: 'The value is not a valid date',
    },
});
// res2.valid === false
// res2.meta.date === null