StartEndDate plugin

Validate start and end dates

Usage

The following piece of code is the starting point to use the StartEndDate plugin:




    


    
...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { startEndDate: new FormValidation.plugins.StartEndDate({ format: '...', startDate: { field: 'startDate', message: 'The start date must be ealier than the end date', }, endDate: { field: 'endDate', message: 'The end date must be later than the start date', }, }), ... }, } ); });

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

Options

* presents a required option

Option Type Description
format * String The date format that both start and end dates have to follow. It's the same as the format option provided by the date validator
startDate * Object Contains two require properties:
  • field (String): The name of start date field
  • message (String): The message when the start date is not a valid date or not ealier than the end date
endDate * Object Contains two require properties:
  • field (String): The name of end date field
  • message (String): The message when the end date is not a valid date or not later than the start date

You don't have to define the date validator rules for start and end date fiels, because it's handled by the StartEndDate plugin automatically.

Basic example

Using with date picker

It's possible to use a date picker that allows user to choose a date easily. You have to revalidate the field when the date is changed.

The example below uses the flatpickr, a lightweight and powerful datetime picker.


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

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

flatpickr(form.querySelector('[name="endDate"]'), {
    ...
    onChange: function() {
        fv.revalidateField('endDate');
    },
});

Changelog

  • v1.1.0: First release. It means that the StartEndDate plugin requires FormValidation v1.1.0 or newer.