1. Components
  2. Datepicker

Components

Datepicker

A simple yet powerful datepicker.

Note: This component is deprecated with the release v1.4.0 and has been replaced with the Date Range Picker.

   

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

placeholderoptional
Description
Sets the placeholder text of the datepicker
Type
string
Default
Select...
Values
enableRelativeDatesoptional
Description
Controls the relative date menu.
Type
boolean
Default
true
Values
true, false
enableYearPaginationoptional
Description
Adds additional buttons to jump through years.
Type
boolean
Default
false
Values
true, false
handleSelectoptional
Description
Callback receiving selected values as inputs.
Type
function
Default
(startDate: Date, endDate: Date) => null
Values
defaultStartDateoptional
Description
Set a default start date for the range.
Type
Date
Default
Values
e.g. new Date(2022, 1, 1)
defaultEndDateoptional
Description
Set a default start date for the range.
Type
Date
Default
Values
e.g. new Date(2022, 12, 31)
defaultRelativeFilterOptionoptional
Description
Set a default relative filter option when relative dates are enabled.
Type
string
Default
null
Values
'tdy' (Today), 'w' (Last 7 days), 't' (Last 30 days), 'm' (Month to date), 'y' (Year to date), null
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)
maxWidthoptional
Description
Set the maximum width of the component.
Type
string
Default
-
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0