Components

Datepicker

A simple yet powerful datepicker.

   

Import Datepicker

Tremor exports one component for Datepicker.

import { Datepicker } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { Datepicker } from "@tremor/react";

export default () => (
  <Datepicker
    placeholder="Select..."
    enableRelativeDates={true}
    enableYearPagination={false}
    handleSelect={undefined}
    defaultStartDate={null}
    defaultEndDate={null}
    defaultRelativeFilterOption={null}
    minDate={null}
    maxDate={null}
    color="blue"
    maxWidth="max-w-none"
    marginTop="mt-0"
  />
);

Usage example

The example below shows a date picker without the relative dates menu.

import { Datepicker } from "@tremor/react";

export default () => (
  <Datepicker enableRelativeDates={false} maxWidth="max-w-lg" />
);

API Reference: Datepicker