StartEndDate plugin
Validate start and end dates
Usage
The following piece of code is the starting point to use the StartEndDate plugin:
<html>
<head>
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
</head>
<body>
<form id="demoForm" method="POST">
<input type="text" name="startDate" placeholder="Start date" />
<input type="text" name="endDate" placeholder="End date" />
...
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-start-end-date/index.min.js"></script>
<script>
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',
},
}),
...
},
}
);
});
</script>
</body>
</html>
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
(* denotes 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 as following |
field (String): The name of start date fieldmessage (String): The message when the start date is not a valid date or not ealier than the end date
| Option | Type | Description |
|---|
endDate* | Object | Contains two require properties as following |
field (String): The name of end date fieldmessage (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.
Using the npm packages
If you are using a bundler such as
Webpack,
Rollup,
Parcel or
Vite, etc., to bundle
your application, then it's recommended to use the FormValidation NPM packages.
$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-start-end-date
- Import and use the StartEndDate plugin:
import { formValidation } from '@form-validation/bundle/popular';
import { StartEndDate } from '@form-validation/plugin-start-end-date';
formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
startEndDate: new StartEndDate({
...
}),
...
},
}
);
Basic example
See also
Changelog
- The plugin doesn't work properly if the
format option contains the AM/PM format
- First release. It means that the StartEndDate plugin requires FormValidation v1.1.0 or newer