Date Range Picker

Installation & usage

npm i @youj/react date-fns react-day-picker

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Requires date-fns and react-day-picker, optional dependencies. Import it from @youj/react/date.

Use a date range picker for a period: a reporting window, a freeze, a trip, a billing cycle. Presets cover the common spans, and the calendar covers the rest. For a single date, use a Date Picker. When the range is the focus of the page, show a Calendar in range mode instead.

import { useState } from 'react'
import { Field, FieldLabel } from '@youj/react'
import { DateRangePicker, type DateRange } from '@youj/react/date'

export function ReportingPeriod() {
  const [range, setRange] = useState<DateRange | null>(null)
  return (
    <Field>
      <FieldLabel>Reporting period</FieldLabel>
      <DateRangePicker value={range} onValueChange={setRange} maxDate={new Date()} />
    </Field>
  )
}

The field holds two inputs, start and end, under one label. Each reads text the way the Date Picker does: the locale's order with any separator, month names, ISO dates. An end typed before the start swaps them. The value is react-day-picker's { from, to }, or null.

The calendar button opens a Popover with presets beside a two-month range Calendar. On a narrow screen it shows one month, with the presets wrapped above it. On touch it's a sheet (see Touch). The footer says how many days are chosen and is announced as it changes. Clicking a day after a full range starts a new one.

Description

A reporting period that starts as the last seven days, with no date after today.

The defaults are Today, Yesterday, Last 7 days, Last 30 days, This month, Last month and Year to date, exported as dateRangePresets. The preset matching the current range carries a pill that glides between presets, and choosing one moves the calendar to it with the month slide, so you see the band land. Pass your own list, or presets={false} to hide them.

import { addDays, startOfWeek } from 'date-fns'
import { dateRangePresets, type DateRangePreset } from '@youj/react/date'

const presets: DateRangePreset[] = [
  { label: 'This sprint', range: (today) => ({ from: startOfWeek(today), to: addDays(startOfWeek(today), 13) }) },
  ...dateRangePresets.slice(2, 4),
]

Each preset's range receives today at the start of the day, in local time.

Reference

Propsvalue, defaultValue, onValueChange… (18)

Props

DateRangePicker props
Prop	Type	Default
`value`	`DateRange \| null`	–
`defaultValue`	`DateRange \| null` default null	`null`
`onValueChange`	`(range: DateRange \| null) => void`	–
`presets`	`false \| DateRangePreset[]` Default: Today, Yesterday, Last 7 / 30 days, This / Last month, Year to date. `false` hides them.	–
`locale`	`Locale` A date-fns / react-day-picker locale. Default: YoujProvider's `locale`, through Intl (see Calendar's dateLocale).	–
`minDate`	`Date`	–
`maxDate`	`Date`	–
`disabledDates`	`Matcher \| Matcher[]` Days that can't be chosen (react-day-picker matchers); a range can't span them.	–
`numberOfMonths`	`number` Months side by side. Default 2 (1 on phones).	–
`disabled`	`boolean`	–
`name`	`string` Also submits `${name}From` / `${name}To` (yyyy-MM-dd) with a native form.	–
`id`	`string`	–
`ref`	`Ref<HTMLInputElement>`	–
`onBlur`	`() => void`	–
`className`	`string`	–
`startLabel`	`string` Names the start and end fields. Default "Start date" / "End date".	–
`endLabel`	`string`	–
`presentation`	`OverlayPresentation` `'auto''sheet''popover'` `auto` (the default) opens the calendar in a popover under a pointer and in a bottom sheet on touch; force either one. default 'auto'	`'auto'`

DateRangePreset is { label: string; range: (today: Date) => { from: Date; to: Date } }.

TouchOn a touch device the two fields are still text fields, set at 16px

MotionOpen, close, preset pill… · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Openthe popover grows out of the field (`yj-pop`)	`duration.fastease.enter` 140ms · cubic-bezier(0.16, 1, 0.3, 1)	140mscubic-bezier(0.16, 1, 0.3, 1)
Close	`duration.instantease.exit` 80ms · cubic-bezier(0.4, 0, 1, 1)	80mscubic-bezier(0.4, 0, 1, 1)
Preset pillglides to the preset matching the range	`spring.smooth` 0.36s, bounce 0	0.36s, bounce 0
Month changefrom the arrows or a preset: slides in from the side it comes from	`duration.baseease.enter` 220ms · cubic-bezier(0.16, 1, 0.3, 1)	220mscubic-bezier(0.16, 1, 0.3, 1)

Reduced motion

The pill jumps to its preset, the months swap in place and the popover opens and closes at once.

Reduced motion

The preset pill moves without gliding, the calendar changes month in place, and the popover appears at once. Presets, typing and announcements are unchanged.

AccessibilityARIA, focus, announcements