Overview

Date range picker with daterangepicker plugin as core.

Reference

Parameters:
  • element: string|HTMLInputElement|JQuery
    HTMLInputElement selector, element, or JQuery object.
  • options.minDate?: string
    The earliest date a user may select. Default is none (undefined).
  • options.maxDate?: string
    The latest date a user may select. Default is none (undefined).
  • options.maxDays?: number
    Maximum number of days that can be selected. Default is indefinite (undefined).
  • options.locale?: string
    Language Code (ja, en, etc.). Default is none (undefined).
  • options.format?: string
    Date Format. Default is 'YYYY/M/D'.
  • 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'.
  • options.autoUpdateInput?: boolean
    Indicates whether the date range picker should automatically update the value of the <input> element it's attached to at initialization and when the selected dates change. Default is true.
Return:
  • daterangepicker daterangepicker instance.

Basic

Basic example of Date Range Picker attached to an input element.
              <!--begin::Input group-->
<div>
  <!--begin::Label-->
  <label class="form-label">Basic example</label>
  <!--end::Label-->
  <!--begin::Input-->
  <input id="dateRangePicker" class="form-control form-control-solid" placeholder="Pick date range">
  <!--end::Input-->
</div>
<!--end::Input group-->
            
              import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
const dateRangePicker = components.initDatepicker(document.getElementById('dateRangePicker'), {
  minDate: moment().format('YYYY/M/D'),
  maxDate: moment().endOf('month').format('YYYY/M/D'),
  maxDays: 7,
  locale: 'en',
  format: 'YYYY/M/D',
  language: {
    applyLabel: 'OK',
    cancelLabel: 'Cancel',
  }
});

No initial value

Empty the initial input value for the date range picker. To empty the initial input value, simply set the autoUpdateInput option to false. 
              <!--begin::Input group-->
<div>
  <!--begin::Label-->
  <label class="form-label">No initial value Example</label>
  <!--end::Label-->
  <!--begin::Input-->
  <input id="noInitialValueDateRangePicker" class="form-control form-control-solid" placeholder="Pick date range">
  <!--end::Input-->
</div>
<!--end::Input group-->
            
              import {components} from 'metronic-extension';

// No initial value Initialize date range picker.
const dateRangePicker = components.initDatepicker(document.getElementById('noInitialValueDateRangePicker'), {
  // If the "autoUpdateInput" option is set to false, the initial input value will be empty.
  autoUpdateInput: false,
});