DateRangeInput

DateRangeInput

Range input for selecting a start and end date from a dual-month calendar sheet. Use it for analytics periods, report filters, bookings, and campaign windows.

Live preview

Date, range, and datetime field shapes.

Scheduling

Due dateJul 18, 2026Optional fields can show a clear affordance in native.Reporting periodJul 1, 2026 - Jul 31, 2026Starts atJul 18, 2026, 09:30

Import

import { DateRangeInput } from '@truongdq01/ui';

Usage

import { DateRangeInput } from '@truongdq01/ui';
import { useState } from 'react';

export function ReportingPeriodField() {
  const [range, setRange] = useState({
    start: null as Date | null,
    end: null as Date | null,
  });

  return (
    <DateRangeInput
      label="Reporting period"
      value={range}
      onChange={setRange}
      presets={['last7', 'last30', 'thisMonth']}
      helperText="Choose the period used for summary metrics."
    />
  );
}

Native demos: apps/example → DateRangeInput screen.