CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

Bootstrap 5 Date Range Picker

Date Range Picker

Create consistent cross-browser and cross-device date range picker.

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

On this page

Example

html

  <div class="row">
    <div class="col-lg-5">
      <div data-coreui-locale="en-US" data-coreui-toggle="date-range-picker" id="datePicker1"></div>
    </div>
    <div class="col-lg-5">
      <div
        data-coreui-start-date="2022/08/03"
        data-coreui-end-date="2022/08/17"
        data-coreui-locale="en-US"
        data-coreui-toggle="date-range-picker"
        id="datePicker2">
      </div>
    </div>
  </div>

html

  <div class="row mb-4">
    <div class="col-lg-5">
      <div
        data-coreui-footer="true"
        data-coreui-locale="en-US"
        data-coreui-toggle="date-range-picker">
      </div>
    </div>
    <div class="col-lg-5">
      <div
        data-coreui-start-date="2022/08/03"
        data-coreui-end-date="2022/09/17"
        data-coreui-footer="true"
        data-coreui-locale="en-US"
        data-coreui-toggle="date-range-picker">
      </div>
    </div>
  </div>

With timepicker

html

  <div class="row mb-4">
    <div class="col-lg-7">
      <div
        data-coreui-locale="en-US"
        data-coreui-timepicker="true"
        data-coreui-toggle="date-range-picker">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-7">
      <div
        data-coreui-start-date="2022/08/03 02:34:17 AM"
        data-coreui-end-date="2022/09/17 11:29:41 PM"
        data-coreui-locale="en-US"
        data-coreui-timepicker="true"
        data-coreui-toggle="date-range-picker">
      </div>
    </div>
  </div>

Sizing

Set heights using data-coreui-size attribute like data-coreui-size="lg" and data-coreui-size="sm".

html

<div class="row mb-4">
  <div class="col-lg-6">
    <div data-coreui-locale="en-US" data-coreui-size="lg" data-coreui-toggle="date-range-picker"></div>
  </div>
</div>
<div class="row">
  <div class="col-lg-5">
    <div data-coreui-locale="en-US" data-coreui-size="sm" data-coreui-toggle="date-range-picker"></div>
  </div>
</div>

Disabled

Add the data-coreui-disabled="true" attribute on an input to give it a grayed out appearance and remove pointer events.

html

<div class="row">
  <div class="col-lg-5">
    <div data-coreui-disabled="true" data-coreui-locale="en-US" data-coreui-toggle="date-range-picker"></div>
  </div>
</div>

Readonly

Add the data-coreui-input-read-only="true" boolean attribute to prevent modification of the input’s value.

html

<div class="row">
  <div class="col-lg-5">
    <div data-coreui-input-read-only="true" data-coreui-locale="en-US" data-coreui-toggle="date-range-picker"></div>
  </div>
</div>

Disabled dates

html

<div class="row">
  <div class="col-lg-5">
    <div id="myDateRangePickerDisabledDates"></div>
  </div>
</div>

docs/assets/js/snippets.js

const myDateRangePickerDisabledDates = document.getElementById('myDateRangePickerDisabledDates')
if (myDateRangePickerDisabledDates) {
  const optionsDateRangePickerDisabledDates = {
    locale: 'en-US',
    calendarDate: new Date(2022, 2, 1),
    disabledDates: [
      [new Date(2022, 2, 4), new Date(2022, 2, 7)],
      new Date(2022, 2, 16),
      new Date(2022, 3, 16),
      [new Date(2022, 4, 2), new Date(2022, 4, 8)]
    ],
    maxDate: new Date(2022, 5, 0),
    minDate: new Date(2022, 1, 1)
  }

  new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), optionsDateRangePickerDisabledDates)
}

Custom ranges

html

<div class="row">
  <div class="col-lg-5">
    <div id="myDateRangePickerCustomRanges"></div>
  </div>
</div>

docs/assets/js/snippets.js

const myDateRangePickerCustomRanges = document.getElementById('myDateRangePickerCustomRanges')
if (myDateRangePickerCustomRanges) {
  const optionsCustomRanges = {
    locale: 'en-US',
    ranges: {
      Today: [new Date(), new Date()],
      Yesterday: [
        new Date(new Date().setDate(new Date().getDate() - 1)),
        new Date(new Date().setDate(new Date().getDate() - 1))
      ],
      'Last 7 Days': [
        new Date(new Date().setDate(new Date().getDate() - 6)),
        new Date(new Date())
      ],
      'Last 30 Days': [
        new Date(new Date().setDate(new Date().getDate() - 29)),
        new Date(new Date())
      ],
      'This Month': [
        new Date(new Date().setDate(1)),
        new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
      ],
      'Last Month': [
        new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
        new Date(new Date().getFullYear(), new Date().getMonth(), 0)
      ]
    }
  }

  new coreui.DateRangePicker(myDateRangePickerCustomRanges, optionsCustomRanges)
}

Non-english locale

Auto

html

<div class="row">
  <div class="col-lg-5">
    <div data-coreui-toggle="date-range-picker"></div>
  </div>
</div>

Chinese

html

<div class="row">
  <div class="col-lg-5">
    <div data-coreui-locale="zh-CN" data-coreui-placeholder="入住日期,退房日期" data-coreui-toggle="date-range-picker"></div>
  </div>
</div>

Japanese

html

<div class="row">
  <div class="col-lg-5">
    <div data-coreui-locale="ja" data-coreui-placeholder="日付を選択,終了日" data-coreui-toggle="date-range-picker"></div>
  </div>
</div>

Korean

html

<div class="row">
  <div class="col-lg-5">
    <div data-coreui-locale="ko" data-coreui-placeholder="날짜 선택,종료일" data-coreui-toggle="date-range-picker"></div>
  </div>
</div>

Right to left support

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew

html

<div class="row">
  <div class="col-lg-5">
    <div data-coreui-locale="he-IL" data-coreui-placeholder="בחר תאריך,תאריך סיום" data-coreui-toggle="date-range-picker" dir="rtl"></div>
  </div>
</div>

Persian

html

<div class="row">
  <div class="col-lg-5">
    <div data-coreui-locale="fa-IR" data-coreui-placeholder="تاریخ شروع,تاریخ پایان" data-coreui-toggle="date-range-picker" dir="rtl"></div>
  </div>
</div>

Usage

Via data attributes

Add data-coreui-toggle="date-range-picker" to a div element.

<div data-coreui-toggle="date-range-picker"></div>

Via JavaScript

Call the time picker via JavaScript:

<div class="date-range-picker"></div>

const dateRangePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.date-range-picker'))
const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl => {
  return new coreui.DateRangePicker(dateRangePickerEl)
})

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-coreui-, as in data-coreui-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-coreui-custom-class="beautifier" instead of data-coreui-customClass="beautifier".

As of CoreUI 4.2.0, all components support an experimental reserved data attribute data-coreui-config that can house simple component configuration as a JSON string. When an element has data-coreui-config='{"delay":0, "title":123}' and data-coreui-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-coreui-config. In addition, existing data attributes are able to house JSON values like data-coreui-delay='{"show":0,"hide":150}'.

Name	Type	Default	Description
`calendarDate`	date \| string \| null	`null`	Default date of the component.
`calendars`	number	`2`	The number of calendars that render on desktop devices.
`cancelButton`	string	`'Cancel'`	Cancel button inner HTML
`cancelButtonClasses`	array \| string	`['btn', 'btn-sm', 'btn-ghost-primary']`	CSS class names that will be added to the cancel button
`cleaner`	boolean	`true`	Enables selection cleaner element.
`confirmButton`	string	`'OK'`	Confirm button inner HTML
`confirmButtonClasses`	array \| string	`['btn', 'btn-sm', 'btn-primary']`	CSS class names that will be added to the confirm button
`disabled`	boolean	`false`	Toggle the disabled state for the component.
`disabledDates`	array \| null	`null`	Specify the list of dates that cannot be selected.
`endDate`	date \| string \| null	`null`	Initial selected to date (range).
`firstDayOfWeek`	number	`1`	Sets the day of start week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday
`footer`	boolean	`false`	Toggle visibility of footer element.
`format`	string		Set date format. We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
`indicator`	boolean	`true`	Toggle visibility or set the content of the input indicator.
`inputReadOnly`	boolean	`false`	Toggle the readonly state for the component.
`invalid`	boolean	`false`	Toggle the invalid state for the component.
`locale`	string	`'default'`	Sets the default locale for components. If not set, it is inherited from the navigator.language.
`maxDate`	date \| string \| null	`null`	Max selectable date.
`minDate`	date \| string \| null	`null`	Min selectable date.
`placeholder`	string	`['Start date', 'End date']`	Specifies a short hint that is visible in the input.
`ranges`	object	`{}`	Predefined date ranges the user can select from.
`rangesButtonsClasses`	array \| string	`['btn', 'btn-ghost-secondary']`	CSS class names that will be added to ranges buttons
`selectAdjacementDays`	boolean	`false`	Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
`separator`	boolean	`true`	Toggle visibility or set the content of the inputs separator.
`showAdjacementDays`	boolean	`true`	Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
`size`	`'sm'` \| `'lg'`	`null`	Size the component small or large.
`startDate`	date \| string \| null	`null`	Initial selected date.
`timepicker`	boolean	`false`	Provide an additional time selection by adding select boxes to choose times.
`todayButton`	string	`'Today'`	Today button inner HTML
`todayButtonClasses`	array \| string	`['btn', 'btn-sm', 'me-2']`	CSS class names that will be added to the today button
`valid`	boolean	`false`	Toggle the valid state for the component.
`weekdayFormat`	number \| ’long’ \| ’narrow’ \| ‘short’	`2`	Set length or format of day name.

Methods

Method	Description
`clear`	Clear selection of the date range picker.
`reset`	Reset selection of the date range picker to the initial value.
`update`	Updates the configuration of the date range picker.
`dispose`	Destroys a component. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the date range picker instance associated to a DOM element, you can use it like this: `coreui.DateRangePicker.getInstance(element)`
`getOrCreateInstance`	Static method which returns a date range picker instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `coreui.DateRangePicker.getOrCreateInstance(element)`

Events

Method	Description
`endDateChange.coreui.date-range-picker`	Callback fired when the end date changed.
`startDateChange.coreui.date-range-picker`	Callback fired when the start date changed.
`show.coreui.dropdown`	Fires immediately when the show instance method is called.
`shown.coreui.dropdown`	Fired when the calendar has been made visible to the user and CSS transitions have completed.
`hide.coreui.dropdown`	Fires immediately when the hide instance method has been called.
`hidden.coreui.dropdown`	Fired when the calendar has finished being hidden from the user and CSS transitions have completed.

const myDateRangePicker = document.getElementById('myDateRangePicker')
myDateRangePicker.addEventListener('endDateChange.coreui.date-range-picker', date => {
  // do something...
})

Customizing

CSS variables

DateRangePickers use local CSS variables on .date-picker and .calendar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss/_date-picker.scss

--#{$prefix}date-picker-ranges-width: #{$date-picker-ranges-width};
--#{$prefix}date-picker-ranges-padding: #{$date-picker-ranges-padding};
--#{$prefix}date-picker-ranges-border: #{$date-picker-ranges-border-width} solid #{$date-picker-ranges-border-color};
--#{$prefix}date-picker-timepicker-width: #{$date-picker-timepicker-width};
--#{$prefix}date-picker-timepicker-border-top: #{$date-picker-timepicker-border-width} solid #{$date-picker-timepicker-border-color};

scss/_calendar.scss

--#{$prefix}calendar-table-margin: #{$calendar-table-margin};
--#{$prefix}calendar-table-cell-size: #{$calendar-table-cell-size};
--#{$prefix}calendar-nav-padding: #{$calendar-nav-padding};
--#{$prefix}calendar-nav-border: #{$calendar-nav-border-width} solid #{$calendar-nav-border-color};
--#{$prefix}calendar-nav-date-color: #{$calendar-nav-date-color};
--#{$prefix}calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
--#{$prefix}calendar-nav-icon-width: #{$calendar-nav-icon-width};
--#{$prefix}calendar-nav-icon-height: #{$calendar-nav-icon-height};
--#{$prefix}calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
--#{$prefix}calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
--#{$prefix}calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
--#{$prefix}calendar-cell-selected-color: #{$calendar-cell-selected-color};
--#{$prefix}calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
--#{$prefix}calendar-cell-range-bg: #{$calendar-cell-range-bg};
--#{$prefix}calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
--#{$prefix}calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
--#{$prefix}calendar-cell-today-color: #{$calendar-cell-today-color};

SASS variables

scss/_variables.scss

$date-picker-default-icon-color:       $gray-600;
$date-picker-default-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$date-picker-default-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$date-picker-default-icon-color}'></rect></svg>");
$date-picker-invalid-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-invalid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-invalid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-invalid-color}'></rect></svg>");
$date-picker-valid-icon:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$form-feedback-valid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-feedback-valid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-feedback-valid-color}'></rect></svg>");

$date-picker-cleaner-icon-color:       $gray-600;
$date-picker-cleaner-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>");
$date-picker-cleaner-icon-hover-color: $body-color;
$date-picker-cleaner-icon-hover:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-hover-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-hover-color})' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>");

$date-picker-separator-icon-color:     $gray-600;
$date-picker-separator-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color}' points='359.873 121.377 337.246 144.004 433.243 240.001 16 240.001 16 240.002 16 272.001 16 272.002 433.24 272.002 337.246 367.996 359.873 390.623 494.498 256 359.873 121.377'></polygon></svg>");
$date-picker-separator-icon-rtl:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color}' points='497.333 239.999 80.092 239.999 176.087 144.004 153.46 121.377 18.837 256 153.46 390.623 176.087 367.996 80.09 271.999 497.333 271.999 497.333 239.999'></polygon></svg>");

$date-picker-ranges-width:             10rem;
$date-picker-ranges-padding:           $spacer * .5;
$date-picker-ranges-border-width:      1px;
$date-picker-ranges-border-color:      var(--#{$prefix}border-color);

$date-picker-timepicker-width:         (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin);
$date-picker-timepicker-border-width:  1px;
$date-picker-timepicker-border-color:  var(--#{$prefix}border-color);

scss/_variables.scss

$calendar-table-margin:                     .5rem;
$calendar-table-cell-size:                  2.75rem;

$calendar-nav-padding:                      .5rem;
$calendar-nav-border-width:                 1px;
$calendar-nav-border-color:                 var(--#{$prefix}border-color);
$calendar-nav-date-color:                   var(--#{$prefix}body-color);
$calendar-nav-date-hover-color:             var(--#{$prefix}primary);
$calendar-nav-icon-width:                   1rem;
$calendar-nav-icon-height:                  1rem;

$calendar-nav-icon-double-next-color:       $body-tertiary-color;
$calendar-nav-icon-double-next:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>");
$calendar-nav-icon-double-next-hover-color: $body-color;
$calendar-nav-icon-double-next-hover:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-hover-color}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>");

$calendar-nav-icon-double-prev-color:       $body-tertiary-color;
$calendar-nav-icon-double-prev:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>");
$calendar-nav-icon-double-prev-hover-color: $body-color;
$calendar-nav-icon-double-prev-hover:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-hover-color}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>");

$calendar-nav-icon-next-color:              $body-tertiary-color;
$calendar-nav-icon-next:                    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>");
$calendar-nav-icon-next-hover-color:        $body-color;
$calendar-nav-icon-next-hover:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-hover-color}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>");

$calendar-nav-icon-prev-color:              $body-tertiary-color;
$calendar-nav-icon-prev:                    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>");
$calendar-nav-icon-prev-hover-color:        $body-color;
$calendar-nav-icon-prev-hover:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-hover-color}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>");

$calendar-cell-header-inner-color:          var(--#{$prefix}secondary-color);

$calendar-cell-hover-bg:                    var(--#{$prefix}tertiary-bg);
$calendar-cell-disabled-color:              var(--#{$prefix}tertiary-color);

$calendar-cell-selected-color:              $white;
$calendar-cell-selected-bg:                 var(--#{$prefix}primary);

$calendar-cell-range-bg:                    rgba(var(--#{$prefix}primary-rgb), .125);
$calendar-cell-range-hover-bg:              rgba(var(--#{$prefix}primary-rgb), .25);
$calendar-cell-range-hover-border-color:    var(--#{$prefix}primary);

$calendar-cell-today-color:                 var(--#{$prefix}$danger);

CoreUI PRO Component

Bootstrap 5 Date Range Picker

Date Range Picker

Other frameworks

Example

With footer

With timepicker

Sizing

Disabled

Readonly

Disabled dates

Custom ranges

Non-english locale

Auto

Chinese

Japanese

Korean

Right to left support

Hebrew

Persian

Usage

Via data attributes

Via JavaScript

Options

Methods

Events

Customizing

CSS variables

SASS variables