import { CDateRangePicker } from '@coreui/react-pro'// orimport CDateRangePicker from '@coreui/react-pro/src/components/date-range-picker/CDateRangePicker'| Property | Description | Type | Default |
|---|---|---|---|
| calendarDate | Default date of the component | string | Date | - |
| calendars | The number of calendars that render on desktop devices. | number | 2 |
| cancelButton | Toggle visibility or set the content of cancel button. | ReactNode | Cancel |
| cancelButtonColor | Sets the color context of the cancel button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | primary |
| cancelButtonSize | Size the cancel button small or large. | 'sm' | 'lg' | sm |
| cancelButtonVariant | Set the cancel button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | ghost |
| className | A string of all className you want applied to the component. | string | - |
| cleaner | Toggle visibility or set the content of the cleaner button. | boolean | true |
| closeOnSelect 4.8.0+ | If true the dropdown will be immediately closed after submitting the full date. | boolean | true |
| confirmButton | Toggle visibility or set the content of confirm button. | ReactNode | OK |
| confirmButtonColor | Sets the color context of the confirm button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | primary |
| confirmButtonSize | Size the confirm button small or large. | 'sm' | 'lg' | sm |
| confirmButtonVariant | Set the confirm button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | - |
| container | Set 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' |
| disabled | Toggle the disabled state for the component. | boolean | - |
| disabledDates | Specify the list of dates that cannot be selected. | Date[] | Date[][] | (Date | Date[])[] | - |
| dropdownClassNames | A string of all className you want applied to the dropdown menu. | string | - |
| endDate | Initial 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 | - |
| firstDayOfWeek | Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday, | number | 1 |
| floatingClassName 4.5.0+ | A string of all className you want applied to the floating label wrapper. | string | - |
| footer | Toggle visibility of footer element or set the content of footer. | ReactNode | - |
| footerContent | Add custom elements to the footer. | ReactNode | - |
| format | Set date format. We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns. | string | - |
| id | The 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 | - |
| indicator | Toggle visibility or set the content of the input indicator. | ReactNode | true |
| 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. | number | 750 |
| inputReadOnly | Toggle the readonly state for the component. | boolean | - |
| invalid | Set component validation state to invalid. | boolean | - |
| label 4.2.0+ | Add a caption for a component. | ReactNode | - |
| locale | Sets the default locale for components. If not set, it is inherited from the browser. | string | default |
| maxDate | Max selectable date. | string | Date | - |
| minDate | Min selectable date. | string | Date | - |
| navNextDoubleIcon | The custom next double icon. | ReactNode | - |
| navNextIcon | The custom next icon. | ReactNode | - |
| navPrevDoubleIcon | The custom prev double icon. | ReactNode | - |
| navPrevIcon | The custom prev icon. | ReactNode | - |
| navYearFirst 4.3.0+ | Reorder year-month navigation, and render year first. | boolean | - |
| navigation | Show arrows navigation. | boolean | - |
| onEndDateChange | Callback fired when the end date changed. | (date: Date, formatedDate?: string) => void | - |
| onHide | Callback fired when the component requests to be hidden. | () => void | - |
| onSelectEndChange | Callback fired when the selection type changed. | (value: boolean) => void | - |
| onShow | Callback fired when the component requests to be shown. | () => void | - |
| onStartDateChange | Callback fired when the start date changed. | (date: Date, formatedDate?: string) => void | - |
| onViewChanged | Callback fired when the view type of calendar changed. | (view: string) => void | - |
| placeholder | Specifies short hints that are visible in start date and end date inputs. | string | string[] | ['Start date', 'End date'] |
| ranges | Predefined date ranges the user can select from. | object | - |
| rangesButtonsColor | Sets the color context of the cancel button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | secondary |
| rangesButtonsSize | Size the ranges button small or large. | 'sm' | 'lg' | - |
| rangesButtonsVariant | Set 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 | - |
| selectEndDate | Toggle select mode between start and end date. | boolean | - |
| separator | Default icon or character character that separates two dates. | ReactNode | true |
| showAdjacementDays 4.11.0+ | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. | boolean | - |
| size | Size the component small or large. | 'sm' | 'lg' | - |
| startDate | Initial selected date. | string | Date | - |
| text 4.2.0+ | Add helper text to the component. | ReactNode | - |
| timepicker | Provide an additional time selection by adding select boxes to choose times. | boolean | - |
| todayButton | Toggle visibility or set the content of today button. | ReactNode | Today |
| todayButtonColor | Sets the color context of the today button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | primary |
| todayButtonSize | Size the today button small or large. | 'sm' | 'lg' | sm |
| todayButtonVariant | Set the today button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | - |
| toggler | The content of toggler. | ReactNode | - |
| tooltipFeedback 4.2.0+ | Display validation feedback in a styled tooltip. | boolean | - |
| valid | Set component validation state to valid. | boolean | - |
| visible | Toggle the visibility of dropdown menu component. | boolean | - |
| weekdayFormat | Set length or format of day name. | number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number) | 2 |
On this page