Components

Date (Range) Picker

A simple yet powerful 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

DateRangePickerItem

API Reference: Date (Range) Picker

client component