DatePicker

Single-date selection component built on react-day-picker with the MDK dark theme. Controlled via `selected` / `onSelect`.

Single-date selection component built on react-day-picker with the MDK dark theme. Controlled via selected / onSelect.

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

Prop	Status	Type	Default	Description
`selected`	Optional	`Date \| undefined`	—	Currently selected date
`onSelect`	Optional	`((date: Date \| undefined) => void) \| undefined`	—	Callback when date changes
`placeholder`	Optional	`string \| undefined`	`"Pick a date"`	Placeholder text when no date 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
`triggerClassName`	Optional	`string \| undefined`	—	Custom className for the trigger button
`calendarClassName`	Optional	`string \| undefined`	—	Custom className for the calendar

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>  )}