Logo

Documentation v4.0.0

  • Home
  • Initializers
  • initDateRangeMenu
Light
Dark
System

Overview

Initializes a date range selector with preset menu options (Today, Yesterday, Last 7 Days, Last 30 Days, This Month, Last Month, Custom Range) using daterangepicker.

Import

import {initializers} from 'metronic-extension';
const {initDateRangeMenu} = initializers;

Signature

initDateRangeMenu(element: string | HTMLDivElement, options?: DateRangeMenuOptions): daterangepicker
Parameter Type Default Description
element string | HTMLDivElement - CSS selector string or HTMLDivElement.
options.locale string - Language code (e.g. "ja", "en").
options.format string 'YYYY/M/D' Date format string.
options.initialRange 'today' | 'last30days' 'today' Initial date selection range.
options.name string - Name attribute for the hidden input storing the result.
options.language.applyLabel string 'Apply' Apply button text.
options.language.cancelLabel string 'Cancel' Cancel button text.
options.language.todayMenuLabel string 'Today' Today menu label text.
options.language.yesterdayMenuLabel string 'Yesterday' Yesterday menu label text.
options.language.last7DaysMenuLabel string 'Last 7 Days' Last 7 Days menu label text.
options.language.last30DaysMenuLabel string 'Last 30 Days' Last 30 Days menu label text.
options.language.thisMonthMenuLabel string 'This Month' This Month menu label text.
options.language.lastMonthMenuLabel string 'Last Month' Last Month menu label text.
options.language.customRangeMenuLabel string 'Custom Range' Custom Range menu label text.

Basic Example

Click the button below to open the date range menu with preset options. The initial range is set to today.
<!--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 {initializers} from 'metronic-extension';
const {initDateRangeMenu} = initializers;

const picker = initDateRangeMenu('#dateRangeMenu', {
  format: 'YYYY/MM/DD',
  initialRange: 'today',
  name: 'dateRange',
});

Last 30 Days Example

Initialize with the last 30 days as the default range.
<div id="dateRangeMenu" class="btn btn-sm btn-light d-flex align-items-center px-4"></div>

import {initializers} from 'metronic-extension';
const {initDateRangeMenu} = initializers;

const picker = initDateRangeMenu('#dateRangeMenu', {
  format: 'YYYY/MM/DD',
  initialRange: 'last30days',
  name: 'dateRange',
});
Previous initClipboard Next initDateRangePicker