Date range picker

A pill that says a period in words and opens named periods, "the last N", two typed ends and two months to pick any range from.

Use case

Use it when

• A report or a log read for a period, kept in the address (`?period=last-30-days`)
• Any custom range of days, typed or clicked
• A figure compared to the period before or to last year
• Choosing among the finished periods an export covers (pass `presets`, `max`, `maxDays`)

Use something else when

• One day in a form (a due date, a start day): Date picker
• Two or three fixed views a page switches between at once, with no custom range: Segmented control
• The month itself belongs on the page (a schedule's side panel): Calendar

Examples

Code

Import

import { useState } from "react"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { resolveRange } from "@/lib/date-range"

Usage

export function SalesPeriod({ today }: { today: string }) {
  const [period, setPeriod] = useState("last-30-days")
  const range = resolveRange(period, today) // { from, to }, or null for all time
  return <DateRangePicker value={period} onValueChange={setPeriod} today={today} max={today} />
}

Rules