Date Range

Usage

import { DateRange } from '@wdzyi/ui';

const [range, setRange] = useState({ start: null, end: null });

<DateRange value={range} onValueChange={setRange} max={new Date()} />

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

value, defaultValue{ start: Date | null; end: Date | null }

The range, when you hold it, or where it starts when it holds its own. A start without an end is a range half picked.

onValueChange(value: DateRangeValue) => void

Called at each press: with the start alone after the first, then with both. An end pressed before the start swaps them round.

monthDate

The month shown at the start. Change it and the calendar slides there. By default, the month of the range, or of today.

onMonthChange(month: Date) => void

Called with the first day of each month it moves to.

presetsDateRangePreset[] = dateRangePresets(today)

Ranges to pick in one press, each with a label and a value: by default the last 7 days, this month so far and last month. dateRangePresets makes those for any day, and an empty list leaves the column out.

min, maxDate

The first and last days that can be picked.

weekStartsOnnumber = 1

The day each week starts on, from 0 for Sunday to 6.

todayDate

Which day is today, for its mark and for the presets. By default it’s read from the clock once it’s in the browser.

localestring = 'en-GB'

How the month and the days are written and read out.

classNamestring

Added to it. The month is 224px wide, with the presets beside it from 372px.

Notes

• After the first press, the run follows the pointer, or the keys, to show where it would end, the end drawn as an outline that keeps up in 150ms. A preset glides both ends to their new days over 440ms, each showing the numbers it passes in reverse, while the plate stretches or draws in after them, a week at a time.
• A new month slides in 24px from the side it’s coming from over 320ms as the old one slides off and fades, its title morphing, and the days’ height eases between five weeks and six.
• The days are a grid to the keys. The arrows move a day or a week, Page Up and Down a month, or a year with Shift, Home and End go to the ends of the week, Enter or Space picks, and Escape drops a range half made. Going past the month slides to the next, and each day is read out in full, with whether it’s the start, the end or today.
• Beside the month are the presets, then the range in words and its length in days. In a container under 372px, the presets move above the month and the words go. With reduced motion, the ends and the plate move at once and months change in place.