Components
Date (Range) Picker
A simple yet powerful Date (Range) Picker.
Date Picker
Date Range Picker
Import DatePicker
Tremor exports one components to build a DatePicker. The type of its value,
DatePickerValue
is exported as well.
import { DatePicker, DatePickerValue } from "@tremor/react";
Usage example date picker
The example below renders a date picker.
import { DateRangePicker } from "@tremor/react"; export default () => <DatePicker className="max-w-sm mx-auto" />;
Import DateRangePicker
Tremor exports two components to build a DateRangePicker. The type of its value,
DateRangePickerValue
is exported as well.
import { DateRangePicker, DateRangePickerItem, DateRangePickerValue } from "@tremor/react";
Usage example date range picker
The example below shows a date range picker without the relative dates menu.
import { DateRangePicker } from "@tremor/react"; export default () => <DateRangePicker className="max-w-sm mx-auto" enableSelect={false} />;
Usage Example with controlled state and Spanish localization and custom select values
The example below shows a date range picker with a controlled state and the
Spanish locale, e.g. { es }. Note that for all locales other than
English { enUS } you have to import the locale from date-fns
.
import { useState } from "react"; import { DateRangePicker, DateRangePickerItem, DateRangePickerValue } from "@tremor/react"; import { es } from "date-fns/locale"; export function DateRangePickerSpanish() { const [value, setValue] = useState<DateRangePickerValue>({ from: new Date(2023, 1, 1), to: new Date(), }); return ( <DateRangePicker className="max-w-md mx-auto" value={value} onValueChange={setValue} locale={es} selectPlaceholder="Seleccionar" color="rose" > <DateRangePickerItem key="ytd" value="ytd" from={new Date(2023, 0, 1)}> Año transcurrido </DateRangePickerItem> <DateRangePickerItem key="half" value="half" from={new Date(2023, 0, 1)} to={new Date(2023, 5, 31)} > Primer semestre </DateRangePickerItem> </DateRangePicker> ); }
Theming
DateRangePicker, DatePicker
Element | Theme Token |
---|---|
Roundness borderRadiustremor-default | |
Shadow boxShadowtremor-input | |
Font size fontSizetremor-default | |
Border color colorstremor-border-DEFAULT | |
Border color focus colorstremor-brand-subtle | |
Ring color focus colorstremor-brand-muted | |
XCircle colorstremor-content-subtle | |
Background color colorstremor-background-DEFAULT | |
Background color disabled colorstremor-background-subtle | |
Background color hover colorstremor-background-muted | |
Text color no selection colorstremor-content-DEFAULT | |
Text color with selection colorstremor-content-emphasis | |
Text color disabled colorstremor-content-muted | |
Dropdown: Roundness borderRadiustremor-default | |
Dropdown: Shadow boxShadowtremor-dropdown | |
Dropdown: Background color colortremor-background | |
Dropdown: border color colorstremor-border-DEFAULT | |
Dropdown: Caption text color colorstremor-content-emphasis | |
Dropdown: Caption text size fontSizetremor-default | |
Dropdown: Navigation button border color colorstremor-border | |
Dropdown: Navigation button border color focused colorstremor-brand-subtle | |
Dropdown: Navigation button ring color focused colorstremor-brand-muted | |
Dropdown: Navigation button arrow color colorstremor-content-subtle | |
Dropdown: Navigation button arrow color hover colorstremor-content-DEFAULT | |
Dropdown: Navigation button background color hover colorstremor-border-muted | |
Dropdown: Navigation button roundness borderRadiustremor-small | |
Dropdown: Head cell (weekdays) text color colorstremor-content-subtle | |
Dropdown: Cell text color font size fontSizetremor-default | |
Dropdown: Cell roundness borderRadiustremor-default | |
Dropdown: Cell text color colorstremor-content-emphasis | |
Dropdown: Cell background color hover colorstremor-background-subtle | |
Dropdown: Cell outline color colorstremor-brand | |
Dropdown: Cell text color selected colorstremor-content-inverted | |
Dropdown: Cell background color selected colorstremor-background-emphasis | |
Dropdown: Cell text color colorstremor-content-subtle | |
Dropdown: Date range middle background color colorstremor-background-subtle | |
Dropdown: Date range middle text color colorstremor-content-DEFAULT | |
Dropdown: Day outside text color colorstremor-content-subtle | |
Dropdown: Date range start/end text color colorstremor-brand-inverted | |
Dropdown: Date range start/end roundness borderRadiustremor-brand-inverted |
DateRangePickerItem
Element | Theme Token |
---|---|
Font size fontSizetremor-default | |
Text color colorstremor-content-emphasis | |
Background color hover colorstremor-background-muted | |
Text color hover colorstremor-content-strong | |
Background color selected colorstremor-background-muted | |
Text color selected colorstremor-content-strong | |
Icon (SelectItem, SearchSelectItem) colorstremor-content-subtle |
API Reference: Date (Range) Picker
client component
- valueoptional
- Description
- Sets the date range.
- Type
- DateRangePickerValue = { from?: Date | undefined, to?: Date | undefined, selectValue?: string | undefined }
- Default
- Values
- e.g. { from: new Date(2023, 1, 1), to: new Date() }
- defaultValueoptional
- Description
- Sets the date range.
- Type
- DateRangePickerValue = { from?: Date | undefined, to?: Date | undefined, selectValue?: string | undefined }
- Default
- Values
- e.g. { from: new Date(2023, 1, 1), to: new Date() }
- onValueChangeoptional
- Description
- Event handler called when the state of the datepicker changes.
- Type
- (value: DateRangePickerValue) => void
- Default
- Values
- enableSelect (Range Picker Only)optional
- Description
- Enables a select menu.
- Type
- boolean
- Default
- true
- Values
- true, false
- minDateoptional
- Description
- Controls the mininmum available date.
- Type
- Date
- Default
- Values
- e.g. new Date(2022, 12, 31)
- maxDateoptional
- Description
- Controls the maximum available date.
- Type
- Date
- Default
- Values
- e.g. new Date(2022, 12, 31)
- placeholderoptional
- Description
- Sets the placeholder text of the DateRangePicker
- Type
- string
- Default
- Select
- Values
- selectPlaceholderoptional
- Description
- Sets the placeholder text of the optional select
- Type
- string
- Default
- Select
- Values
- disabledoptional
- Description
- Set the state of the element to disabled.
- Type
- boolean
- Default
- false
- Values
- true, false
- localeoptional
- Description
- Sets the placeholder text of the optional Date Range Dropdown. Note that for all locales other than English {enUS} you have to import the locale from `date-fns`. E.g. {frCH} for French locale (Switzerland)
- Type
- locale
- Default
- enUS
- Values
- enableClearoptional
- Description
- Enables the ability to clear a date range selection.
- Type
- boolean
- Default
- true
- Values
- true, false
- enableYearNavigationoptional
- Description
- Adds additional buttons to navigate through years.
- Type
- boolean
- Default
- false
- Values
- true, false
- weekStartsOnoptional
- Description
- Set an index for the first day of the week. Where 0 = Sunday, 1 = Monday, ...).
- Type
- Number
- Default
- 0
- Values
- 0, 1, 2, 3, 4, 5, 6, 7
Need help? You can also ask the community on GitHub Discussions or Slack.