Reference
Parameters:
element: string|HTMLDivElement|JQuery
HTMLDivElement selector, element, or JQuery object.
options.locale?: string
Language Code (ja, en, etc.). Default is none (undefined).
options.format?: string
Date Format. Default is 'YYYY/M/D'.
options.initialRange?: 'today'|'last30days'
Date selection range for initial display.
Can be either "today" (today) or "last30days" (last 30 days).
The default is 'today'.
options.name?: string
The name attribute of the hidden element that stores the date selection result.
Default is none (undefined).
options.language?: Record<string, string>
Strings used in the user interface.
applyLabel?: string
Apply button text. Default is 'Apply'.
cancelLabel?: string
Cancel button text. Default is 'Cancel'.
customRangeMenuLabel?: string
Custom Range menu label text. Default is 'Custom Range'.
todayMenuLabel?: string
Today menu label text. Default is 'Today'.
yesterdayMenuLabel?: string
Yesterday menu label text. Default is 'Yesterday'.
last7DaysMenuLabel?: string
Last 7 Days menu label text. Default is 'Last 7 Days'.
last30DaysMenuLabel?: string
Last 30 Days menu label text. Default is 'Last 30 Days'.
thisMonthMenuLabel?: string
This Month menu label text. Default is 'This Month'.
lastMonthMenuLabel?: string
Last Month menu label text. Default is 'Last Month'.
Return:
daterangepicker
daterangepicker instance.
Basic
Basic example of a date range menu.
<!--begin::Date Range Menu-->
<div id="dateRangeMenu" class="btn btn-sm btn-light d-flex align-items-center px-4"></div>
<!--end::Date Range Menu-->
import {components} from 'metronic-extension';
// Initialize date range menu.
const dateRangePicker = components.initDaterangeMenu(document.getElementById('dateRangeMenu'), {
locale: 'en',
format: 'YYYY/M/D',
initialRange: 'today',
name: 'date',
language: {
applyLabel: 'Apply',
cancelLabel: 'Cancel',
customRangeMenuLabel: 'Custom Range',
todayMenuLabel: 'Today',
yesterdayMenuLabel: 'Yesterday',
last7DaysMenuLabel: 'Last 7 Days',
last30DaysMenuLabel: 'Last 30 Days',
thisMonthMenuLabel: 'This Month',
lastMonthMenuLabel: 'Last Month',
},
});