DateRangePicker

Date-range selection component with preset shortcuts (last 7/14/30/90 days) and a modal interface. Controlled via `selected` / `onSelect`.

Date-range selection component with preset shortcuts (last 7/14/30/90 days) and a modal interface. Controlled via selected / onSelect.

import { DateRangePicker } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`selected`	Optional	`DateRange \| undefined`	—	Selected date range
`onSelect`	Optional	`((range: DateRange \| undefined) => void) \| undefined`	—	Callback when date range changes
`placeholder`	Optional	`string \| undefined`	`"Pick a date range"`	Placeholder text when no range is selected
`dateFormat`	Optional	`string \| undefined`	`"MM/dd/yyyy"`	Date format for display
`disabled`	Optional	`(boolean & (Matcher \| Matcher[])) \| undefined`	`false`	Whether the picker is disabled
`showPresets`	Optional	`boolean \| undefined`	`true`	Whether to show preset buttons
`presets`	Optional	`PresetItem[] \| undefined`	—	Custom preset items
`allowFutureDates`	Optional	`boolean \| undefined`	`false`	Whether to allow future dates
`triggerClassName`	Optional	`string \| undefined`	—	Custom className for the trigger button
`calendarClassName`	Optional	`string \| undefined`	—	Custom className for the calendar
`modalClassName`	Optional	`string \| undefined`	—	Custom className for the modal

Usage

Single-date and range-date pickers built on react-day-picker. The range picker includes presets and a modal-style popover with Clear / Apply actions.

`DatePicker` props

Prop	Type	Required	Default	Description
`selected`	`Date`	no	—	Selected date.
`onSelect`	`(date?: Date) => void`	no	—	Setter.
`placeholder`	`string`	no	`"Pick a date"`	Trigger button placeholder.
`dateFormat`	`string`	no	`"MM/dd/yyyy"`	`date-fns` format string.
`disabled`	`boolean`	no	`false`	Disable the trigger.
`triggerClassName`	`string`	no	—	Class names on the trigger button.
`calendarClassName`	`string`	no	—	Class names on the day-picker.

`DateRangePicker` props

Adds showPresets, presets: PresetItem[], allowFutureDates, and modalClassName. selected / onSelect use DateRange.

Data contracts

type DateRange = { from: Date | undefined; to?: Date | undefined };
type PresetItem = { label: string; value: DateRange };

Example

/** * Runnable example for DatePicker and DateRangePicker. */import { useState } from 'react'import type { DateRange } from '@tetherto/mdk-react-devkit'import { DatePicker, DateRangePicker } from '@tetherto/mdk-react-devkit'export const DatePickerExample = () => {  const [date, setDate] = useState<Date>()  const [range, setRange] = useState<DateRange>()  return (    <div className="mdk-example-row">      <DatePicker selected={date} onSelect={setDate} />      <DateRangePicker selected={range} onSelect={setRange} showPresets />    </div>  )}