1. Components
  2. Date (Range) Picker

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

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

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.