Date ranges and reporting

Draft first, apply once

DateRangeInput keeps an editing draft. Only Apply calls onValueChange. Cancel, Escape, an external value change, or making the control disabled or read-only closes the editor without committing the draft. ISO calendar dates, endpoint order, and bounds are validated before the optional application validator.

const [range, setRange] = useState({ start: '2026-09-01', end: '2026-09-30' })

<DateRangeInput
  label="Reporting period"
  value={range}
  onValueChange={setRange}
  labels={{ start: 'From', end: 'To', presets: 'Ranges', apply: 'Apply', cancel: 'Cancel' }}
/>

Supply localized labels and formatDate. Use name with explicitstart and end names for native form entries. Fetch reports in response to the applied state; the application owns requests, aggregation, and stored filters.

Keep identity separate from presentation

This example uses ISO dates as x, day numbers as xLabel, and a fullformatCategory for details. Missing measurements remain null, so the line has an honest gap. Every series needs unique X values. Short axes never replace the exact dates and values in the accessible data table.

Explore LineChart oruse the native-input DateRangePickerfor a lighter Astro or Elements form. The two-calendar draft editor is currently a React API.