UI
Date (Range) Picker
A simple yet powerful Date (Range) Picker.
Date Picker
Date Range Picker
import { DatePicker, DateRangePicker } from '@tremor/react';
export function DateRangePickerHero() { return ( <div className="mx-auto max-w-md space-y-3"> <p className="text-center font-mono text-sm text-slate-500"> Date Picker </p> <DatePicker /> <p className="pt-6 text-center font-mono text-sm text-slate-500"> Date Range Picker </p> <DateRangePicker className="mx-auto max-w-md" /> </div> );}Import DatePicker
Tremor exports one component 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 { DatePicker } from '@tremor/react';
export function DatePickerUsageExample() { return <DatePicker className="mx-auto max-w-sm" />;}Import DateRangePicker
Tremor exports two components to build a DateRangePicker. The type of its value, DateRangePickerValue is exported as well.
import { DateRangePicker, 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 function DateRangePickerUsageExample() { return <DateRangePicker className="mx-auto max-w-sm" 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 { DateRangePicker, DateRangePickerItem, DateRangePickerValue,} from '@tremor/react';import { es } from 'date-fns/locale';import { useState } from 'react';
export function DateRangePickerUsageExampleWithSpanishWithCustomSelect() { const [value, setValue] = useState<DateRangePickerValue>({ from: new Date(2023, 1, 1), to: new Date(), }); return ( <DateRangePicker className="mx-auto max-w-md" 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> );}API Reference: Date (Range) Picker
client component- value
- Sets the date range.
DateRangePickerValue = {
from?: Date | undefined,
to?: Date | undefined,
selectValue?: string | undefined
}
- defaultValue
- Sets the date range.
DateRangePickerValue = {
from?: Date | undefined,
to?: Date | undefined,
selectValue?: string | undefined
}
- onValueChange
- Event handler called when the state of the datepicker changes.
(value: DateRangePickerValue) => void
- enableSelect (Range Picker Only)
- Enables a select menu.
boolean
Default: true
- minDate
- Controls the mininmum available date.
Date
- maxDate
- Controls the maximum available date.
Date
- disabledDates
- Disable one or more dates
Date[]
- placeholder
- Sets the placeholder text of the DateRangePicker
string
Default: Select
- selectPlaceholder
- Sets the placeholder text of the optional select
string
Default: Select
- disabled
- Set the state of the element to disabled.
boolean
Default: false
- locale
- 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)
locale
Default: enUS
- displayFormat
- Format the in the a given format. The result may vary by locale.
string
- enableClear
- Enables the ability to clear a date range selection.
boolean
Default: true
- enableYearNavigation
- Adds additional buttons to navigate through years.
boolean
Default: false
- weekStartsOn
- Set an index for the first day of the week. Where 0 = Sunday, 1 = Monday, ...).
Number
Default: 0
Theming
DateRangePicker, DatePicker
| Element | Theme Token |
|---|---|
| Roundness borderRadiustremor-default | borderRadiustremor-default |
| Shadow boxShadowtremor-input | boxShadowtremor-input |
| Font size fontSizetremor-default | fontSizetremor-default |
| Border color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
| Border color focus colorstremor-brand-subtle | colorstremor-brand-subtle |
| Ring color focus colorstremor-brand-muted | colorstremor-brand-muted |
| XCircle colorstremor-content-subtle | colorstremor-content-subtle |
| Background color colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
| Background color disabled colorstremor-background-subtle | colorstremor-background-subtle |
| Background color hover colorstremor-background-muted | colorstremor-background-muted |
| Text color no selection colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Text color with selection colorstremor-content-emphasis | colorstremor-content-emphasis |
| Text color disabled colorstremor-content-muted | colorstremor-content-muted |
| Dropdown: Roundness borderRadiustremor-default | borderRadiustremor-default |
| Dropdown: Shadow boxShadowtremor-dropdown | boxShadowtremor-dropdown |
| Dropdown: Background color colortremor-background | colortremor-background |
| Dropdown: border color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
| Dropdown: Caption text color colorstremor-content-emphasis | colorstremor-content-emphasis |
| Dropdown: Caption text size fontSizetremor-default | fontSizetremor-default |
| Dropdown: Navigation button border color colorstremor-border | colorstremor-border |
| Dropdown: Navigation button border color focused colorstremor-brand-subtle | colorstremor-brand-subtle |
| Dropdown: Navigation button ring color focused colorstremor-brand-muted | colorstremor-brand-muted |
| Dropdown: Navigation button arrow color colorstremor-content-subtle | colorstremor-content-subtle |
| Dropdown: Navigation button arrow color hover colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Dropdown: Navigation button background color hover colorstremor-border-muted | colorstremor-border-muted |
| Dropdown: Navigation button roundness borderRadiustremor-small | borderRadiustremor-small |
| Dropdown: Head cell (weekdays) text color colorstremor-content-subtle | colorstremor-content-subtle |
| Dropdown: Cell text color font size fontSizetremor-default | fontSizetremor-default |
| Dropdown: Cell roundness borderRadiustremor-default | borderRadiustremor-default |
| Dropdown: Cell text color colorstremor-content-emphasis | colorstremor-content-emphasis |
| Dropdown: Cell background color hover colorstremor-background-subtle | colorstremor-background-subtle |
| Dropdown: Cell outline color colorstremor-brand | colorstremor-brand |
| Dropdown: Cell text color selected colorstremor-content-inverted | colorstremor-content-inverted |
| Dropdown: Cell background color selected colorstremor-background-emphasis | colorstremor-background-emphasis |
| Dropdown: Cell text color colorstremor-content-subtle | colorstremor-content-subtle |
| Dropdown: Date range middle background color colorstremor-background-subtle | colorstremor-background-subtle |
| Dropdown: Date range middle text color colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Dropdown: Day outside text color colorstremor-content-subtle | colorstremor-content-subtle |
| Dropdown: Date range start/end text color colorstremor-brand-inverted | colorstremor-brand-inverted |
| Dropdown: Date range start/end roundness borderRadiustremor-brand-inverted | borderRadiustremor-brand-inverted |
DateRangePickerItem
| Element | Theme Token |
|---|---|
| Font size fontSizetremor-default | fontSizetremor-default |
| Text color colorstremor-content-emphasis | colorstremor-content-emphasis |
| Background color hover colorstremor-background-muted | colorstremor-background-muted |
| Text color hover colorstremor-content-strong | colorstremor-content-strong |
| Background color selected colorstremor-background-muted | colorstremor-background-muted |
| Text color selected colorstremor-content-strong | colorstremor-content-strong |
| Icon (SelectItem, SearchSelectItem) colorstremor-content-subtle | colorstremor-content-subtle |