DateInput

DateInput

Single-date input that lets users pick a calendar date from the RNUI date sheet. Use it for deadlines, booking dates, and optional form dates.

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 { DateInput } from '@truongdq01/ui';

Usage

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

export function DueDateField() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <DateInput
      label="Due date"
      value={date}
      onChange={setDate}
      placeholder="Select a date"
      helperText="Used to schedule the next review."
      minimumDate={new Date()}
      clearable
    />
  );
}

Native demos: apps/example → DateInput screen.