Overview

Date Range Menu with daterangepicker plugin as core.

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',
  },
});