Components

Date Range Picker

A simple yet powerful Date Picker with ranges.

   

Import DateRangePicker

Tremor exports one component for DateRangePicker. The type of its value, DateRangePickerValue is exported as well.

import { DateRangePicker, DateRangePickerValue } from "@tremor/react";

Usage example

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" enableDropdown={false} />
);

Controlled state example with alternative language locale

The example below shows a date range picker with a controlled state and the Spanish locale, e.g. { en }. Note that for all locales other than English { enUS } you have to import the locale from date-fns.

import { useState } from "react";
import { DateRangePicker, DateRangePickerValue } from "@tremor/react";
import { es } from "date-fns/locale";

export function DateRangePickerSpanish() {
  const [value, setValue] = useState<DateRangePickerValue>([
    new Date(2022, 1, 1),
    new Date(),
  ]);

  return (
    <DateRangePicker
      className="max-w-md mx-auto"
      value={value}
      onValueChange={setValue}
      locale={es}
      dropdownPlaceholder="Seleccionar"
    />
  );
}

API Reference: DateRangePicker

client component