Overview
Initializes a date range picker input using daterangepicker. Supports min/max dates, max days, locale, and custom date formats.
Signature
initDateRangePicker(element: string | HTMLInputElement, options?: DateRangePickerOptions): daterangepicker
| Parameter | Type | Default | Description |
|---|---|---|---|
element |
string | HTMLInputElement |
- | CSS selector string or HTMLInputElement. |
options.minDate |
string |
- | Earliest selectable date. |
options.maxDate |
string |
- | Latest selectable date. |
options.maxDays |
number |
- | Maximum number of days that can be selected. |
options.locale |
string |
- | Language code (e.g. "ja", "en"). |
options.format |
string |
'YYYY/M/D' |
Date format string. |
options.autoUpdateInput |
boolean |
true |
Auto-update input value on selection. |
options.language.applyLabel |
string |
'Apply' |
Apply button text. |
options.language.cancelLabel |
string |
'Cancel' |
Cancel button text. |
Basic Example
Click the input field below to open the date range picker.
<label class="form-label">Select date range</label>
<input id="dateRangePicker" class="form-control form-control-solid" placeholder="Pick date range">
import {initializers} from 'metronic-extension';
const {initDateRangePicker} = initializers;
const picker = initDateRangePicker('#dateRangePicker', {
format: 'YYYY/MM/DD',
});
Constrained Example
A date range picker with
maxDays constraint (max 7 days). Dates beyond 7 days from the start date cannot be selected.
<label class="form-label">Select date range (max 7 days)</label>
<input id="dateRangePicker" class="form-control form-control-solid" placeholder="Pick date range">
import {initializers} from 'metronic-extension';
const {initDateRangePicker} = initializers;
const picker = initDateRangePicker('#dateRangePicker', {
format: 'YYYY/MM/DD',
maxDays: 7,
});