Date Range Picker

Overview

Date Range Picker lets users choose a start and end date from a calendar. It renders as a Button showing the current range, which opens a Popover containing a month calendar with navigation.

Usage

Import the component:

import { DateRangePicker } from "@eqtylab/equality";

Hold the range in state and pass it back through onSelect:

import { useState } from "react";

const [dateRange, setDateRange] = useState<{ from?: Date; to?: Date }>({});

<DateRangePicker dateRange={dateRange} onSelect={setDateRange} />;

Both from and to are optional Date objects. from is normalized to the start of the day (00:00:00) and to to the end of the day (23:59:59), so a completed range covers both selected days in full.

Default

Props