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.

React Date Range Picker Component

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

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

Example#

<CDateRangePicker label="Date range" locale="en-US" />
<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" label="Date range" locale="en-US" />
<CDateRangePicker footer locale="en-US" />
<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" footer locale="en-US" />

With timepicker#

<CDateRangePicker locale="en-US" timepicker />

Sizing#

Set heights using size property like size="lg" and size="sm".

<CDateRangePicker locale="en-US" size="lg" />
<CDateRangePicker locale="en-US" size="sm" />

Disabled#

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

<CDateRangePicker disabled locale="en-US" />

Readonly#

Add the inputReadOnly boolean attribute to prevent modification of the input's value.

<CDateRangePicker inputReadOnly locale="en-US" />

Disabled dates#

const calendarDate = new Date(2022, 2, 1)
const disabledDates = [
[new Date(2022, 2, 4), new Date(2022, 2, 7)], // range of dates that cannot be selected
new Date(2022, 2, 16), // single date that cannot be selected
new Date(2022, 3, 16), // single date that cannot be selected
[new Date(2022, 4, 2), new Date(2022, 4, 8)], // range of dates that cannot be selected
]
const maxDate = new Date(2022, 5, 0)
const minDate = new Date(2022, 1, 1)
return (
<div className="row">
<div className="col-lg-5">
<CDateRangePicker
calendarDate={calendarDate}
disabledDates={disabledDates}
locale="en-US"
maxDate={maxDate}
minDate={minDate}
/>
</div>
</div>
)

Custom ranges#

const customRanges = {
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),
],
}
return (
<div className="row">
<div className="col-lg-5">
<CDateRangePicker ranges={customRanges} />
</div>
</div>
)

Non-english locale#

Auto#

<CDateRangePicker />

Chinese#

<CDateRangePicker locale="zh-CN" placeholder={["入住日期", "退房日期"]} />

Japanese#

<CDateRangePicker locale="ja" placeholder={["日付を選択", "終了日"]} />

Korean#

<CDateRangePicker locale="ko" placeholder={["날짜 선택", "종료일"]} />

Right to left support#

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

Hebrew#

<CDateRangePicker placeholder={["בחר תאריך", "תאריך סיום"]} locale="he-IL" />

Persian#

<CDateRangePicker locale="fa-IR" placeholder={["تاریخ شروع", "تاریخ پایان"]} />

Custom formats#

Heads up! As of v4.14.0, the format property is deprecated in <CDateRangePicker>. Instead, utilize the inputDateFormat to format dates into custom strings and inputDateParse to parse custom strings into Date objects.

The provided code demonstrates how to use the inputDateFormat and inputDateParse properties. In this example, the format and parse functions from date-fns are employed to tailor the date presentation and interpretation.

import { format, parse } from 'date-fns'
import { es } from 'date-fns/locale'

The inputDateFormat property formats the date into a custom string, while the inputDateParse property parses a custom string into a Date object. The code showcases the date range in different formats based on locale, such as 'MMMM dd, yyyy' and 'yyyy MMMM dd', and accommodates different locales, like 'en-US' and 'es-ES'.

<div className="row">
<div className="col-lg-6">
<CDateRangePicker
startDate="2022/08/03"
endDate="2022/08/17"
label="Date range"
locale="en-US"
inputDateParse={(date) => parse(date, 'MMMM dd, yyyy', new Date())}
inputDateFormat={(date) => format(new Date(date), 'MMMM dd, yyyy')}
/>
</div>
<div className="col-lg-6">
<CDateRangePicker
startDate="2022/08/03"
endDate="2022/08/17"
label="Rango de fechas"
locale="es-ES"
placeholder={['Fecha de inicio', 'Fecha de fin']}
inputDateParse={(date) => parse(date, 'yyyy MMMM dd', new Date(), { locale: es })}
inputDateFormat={(date) => format(new Date(date), 'yyyy MMMM dd', { locale: es })}
/>
</div>
</div>

With timepicker#

This example demonstrates how to integrate a timepicker into a date range picker using the timepicker property.

<div className="row">
<div className="col-lg-8 mb-3">
<CDateRangePicker
startDate="2022/08/03 02:34:17 AM"
endDate="2022/09/17 11:29:41 PM"
label="Date range"
locale="en-US"
timepicker
inputDateParse={(date) => parse(date, 'MMM dd, yyyy h:mm:ss a', new Date())}
inputDateFormat={(date) => format(new Date(date), 'MMM dd, yyyy h:mm:ss a')}
/>
</div>
<div className="col-lg-8">
<CDateRangePicker
startDate="2022/08/03 02:34:17 AM"
endDate="2022/09/17 11:29:41 PM"
label="Rango de fechas"
locale="es-ES"
placeholder={['Fecha de inicio', 'Fecha de fin']}
timepicker
inputDateParse={(date) => parse(date, 'yyyy MMM dd h:mm:ss a', new Date(), { locale: es })}
inputDateFormat={(date) => format(new Date(date), 'yyyy MMM dd h:mm:ss a', { locale: es })}
/>
</div>
</div>

Customizing#

CSS variables#

React date range pickers 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.

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

How to use CSS variables#

const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}
return <CDateRangePicker style={vars}>...</CDateRangePicker>

SASS variables#

$date-picker-default-icon-color: $gray-600 !default;
$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>") !default;
$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>") !default;
$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>") !default;
$date-picker-cleaner-icon-color: $gray-600 !default;
$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>") !default;
$date-picker-cleaner-icon-hover-color: $body-color !default;
$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>") !default;
$date-picker-separator-icon-color: $gray-600 !default;
$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>") !default;
$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>") !default;
$date-picker-ranges-width: 10rem !default;
$date-picker-ranges-padding: $spacer * .5 !default;
$date-picker-ranges-border-width: 1px !default;
$date-picker-ranges-border-color: var(--cui-border-color) !default;
$date-picker-timepicker-width: (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin) !default;
$date-picker-timepicker-border-width: 1px !default;
$date-picker-timepicker-border-color: var(--cui-border-color) !default;
$calendar-table-margin: .5rem !default;
$calendar-table-cell-size: 2.75rem !default;
$calendar-nav-padding: .5rem !default;
$calendar-nav-border-width: 1px !default;
$calendar-nav-border-color: var(--cui-border-color) !default;
$calendar-nav-date-color: var(--cui-body-color) !default;
$calendar-nav-date-hover-color: var(--cui-primary) !default;
$calendar-nav-icon-width: 1rem !default;
$calendar-nav-icon-height: 1rem !default;
$calendar-nav-icon-double-next-color: $body-tertiary-color !default;
$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>") !default;
$calendar-nav-icon-double-next-hover-color: $body-color !default;
$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>") !default;
$calendar-nav-icon-double-prev-color: $body-tertiary-color !default;
$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>") !default;
$calendar-nav-icon-double-prev-hover-color: $body-color !default;
$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>") !default;
$calendar-nav-icon-next-color: $body-tertiary-color !default;
$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>") !default;
$calendar-nav-icon-next-hover-color: $body-color !default;
$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>") !default;
$calendar-nav-icon-prev-color: $body-tertiary-color !default;
$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>") !default;
$calendar-nav-icon-prev-hover-color: $body-color !default;
$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>") !default;
$calendar-cell-header-inner-color: var(--cui-secondary-color) !default;
$calendar-cell-hover-bg: var(--cui-tertiary-bg) !default;
$calendar-cell-disabled-color: var(--cui-tertiary-color) !default;
$calendar-cell-selected-color: $white !default;
$calendar-cell-selected-bg: var(--cui-primary) !default;
$calendar-cell-range-bg: rgba(var(--cui-primary-rgb), .125) !default;
$calendar-cell-range-hover-bg: rgba(var(--cui-primary-rgb), .25) !default;
$calendar-cell-range-hover-border-color: var(--cui-primary) !default;
$calendar-cell-today-color: var(--cui-$danger) !default;

API#

CDateRangePicker#

import { CDateRangePicker } from '@coreui/react-pro'
// or
import CDateRangePicker from '@coreui/react-pro/src/components/date-range-picker/CDateRangePicker'
PropertyDescriptionTypeDefault
calendarDateDefault date of the componentstring | Date-
calendarsThe number of calendars that render on desktop devices.number2
cancelButtonToggle visibility or set the content of cancel button.ReactNodeCancel
cancelButtonColorSets the color context of the cancel button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | stringprimary
cancelButtonSizeSize the cancel button small or large.'sm' | 'lg'sm
cancelButtonVariantSet the cancel button variant to an outlined button or a ghost button.'outline' | 'ghost'ghost
classNameA string of all className you want applied to the component.string-
cleanerToggle visibility or set the content of the cleaner button.booleantrue
closeOnSelect
4.8.0+
If true the dropdown will be immediately closed after submitting the full date.booleantrue
confirmButtonToggle visibility or set the content of confirm button.ReactNodeOK
confirmButtonColorSets the color context of the confirm button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | stringprimary
confirmButtonSizeSize the confirm button small or large.'sm' | 'lg'sm
confirmButtonVariantSet the confirm button variant to an outlined button or a ghost button.'outline' | 'ghost'-
containerSet container type for the component.'dropdown' | 'inline'-
dayFormat
4.3.0+
Set the format of day name.'numeric' | '2-digit' | ((date: Date) => string | number)'numeric'
disabledToggle the disabled state for the component.boolean-
disabledDatesSpecify the list of dates that cannot be selected.Date[] | Date[][] | (Date | Date[])[]-
dropdownClassNamesA string of all className you want applied to the dropdown menu.string-
endDateInitial selected to date (range).string | Date-
feedback
4.2.0+
Provide valuable, actionable feedback.ReactNode-
feedbackInvalid
4.2.0+
Provide valuable, actionable feedback.ReactNode-
feedbackValid
4.2.0+
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.ReactNode-
firstDayOfWeekSets the day of start week.
- 0 - Sunday,
- 1 - Monday,
- 2 - Tuesday,
- 3 - Wednesday,
- 4 - Thursday,
- 5 - Friday,
- 6 - Saturday,
number1
floatingClassName
4.5.0+
A string of all className you want applied to the floating label wrapper.string-
footerToggle visibility of footer element or set the content of footer.ReactNode-
footerContentAdd custom elements to the footer.ReactNode-
formatSet date format.
We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
string-
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.

The name attributes for input elements are generated based on the id property:
- {id}-start-date
- {id}-end-date
string-
indicatorToggle visibility or set the content of the input indicator.ReactNodetrue
inputDateFormat
v4.14.0+
Custom function to format the selected date into a string according to a custom format.(date: Date) => string-
inputDateParse
v4.14.0+
Custom function to parse the input value into a valid Date object.(date: string | Date) => Date-
inputOnChangeDelay
v4.14.0+
Defines the delay (in milliseconds) for the input field's onChange event.number750
inputReadOnlyToggle the readonly state for the component.boolean-
invalidSet component validation state to invalid.boolean-
label
4.2.0+
Add a caption for a component.ReactNode-
localeSets the default locale for components. If not set, it is inherited from the browser.stringdefault
maxDateMax selectable date.string | Date-
minDateMin selectable date.string | Date-
navNextDoubleIconThe custom next double icon.ReactNode-
navNextIconThe custom next icon.ReactNode-
navPrevDoubleIconThe custom prev double icon.ReactNode-
navPrevIconThe custom prev icon.ReactNode-
navYearFirst
4.3.0+
Reorder year-month navigation, and render year first.boolean-
navigationShow arrows navigation.boolean-
onEndDateChangeCallback fired when the end date changed.(date: Date, formatedDate?: string) => void-
onHideCallback fired when the component requests to be hidden.() => void-
onSelectEndChangeCallback fired when the selection type changed.(value: boolean) => void-
onShowCallback fired when the component requests to be shown.() => void-
onStartDateChangeCallback fired when the start date changed.(date: Date, formatedDate?: string) => void-
onViewChangedCallback fired when the view type of calendar changed.(view: string) => void-
placeholderSpecifies short hints that are visible in start date and end date inputs.string | string[]['Start date', 'End date']
rangesPredefined date ranges the user can select from.object-
rangesButtonsColorSets the color context of the cancel button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | stringsecondary
rangesButtonsSizeSize the ranges button small or large.'sm' | 'lg'-
rangesButtonsVariantSet the ranges button variant to an outlined button or a ghost button.'outline' | 'ghost'ghost
required
4.10.0+
When present, it specifies that date must be filled out before submitting the form.boolean-
selectAdjacementDays
4.11.0+
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.boolean-
selectEndDateToggle select mode between start and end date.boolean-
separatorDefault icon or character character that separates two dates.ReactNodetrue
showAdjacementDays
4.11.0+
Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.boolean-
sizeSize the component small or large.'sm' | 'lg'-
startDateInitial selected date.string | Date-
text
4.2.0+
Add helper text to the component.ReactNode-
timepickerProvide an additional time selection by adding select boxes to choose times.boolean-
todayButtonToggle visibility or set the content of today button.ReactNodeToday
todayButtonColorSets the color context of the today button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | stringprimary
todayButtonSizeSize the today button small or large.'sm' | 'lg'sm
todayButtonVariantSet the today button variant to an outlined button or a ghost button.'outline' | 'ghost'-
togglerThe content of toggler.ReactNode-
tooltipFeedback
4.2.0+
Display validation feedback in a styled tooltip.boolean-
validSet component validation state to valid.boolean-
visibleToggle the visibility of dropdown menu component.boolean-
weekdayFormatSet length or format of day name.number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)2