Component
Date picker sheet
A bottom sheet calendar built from scratch, no native date input, so month navigation, selection, and disabled ranges all look and animate the same on every platform. Supports date, time, or both in one sheet.
The primitive
date picker sheet.tsx
<NativeDatePickerSheet
open={open}
onClose={() => setOpen(false)}
value={date}
onValueChange={setDate}
title="Date of birth"
/>Example
A trade form opens this same sheet for its date field, with a max-date constraint disabling anything in the future.
Trade date
date-picker-sheet-example.tsx
<NativeDatePickerSheet
open={open}
onClose={() => setOpen(false)}
value={date}
onValueChange={setDate}
title="Trade date"
maxDate={new Date()}
/>Capabilities
| Prop | Type | Description |
|---|---|---|
| openrequired | boolean | — |
| onCloserequired | () => void | — |
| valuerequired | Date | — |
| onValueChangerequired | (date: Date) => void | — |
| mode | DatePickerMode | — |
| title | string | — |
| minDate | Date | — |
| maxDate | Date | — |
| doneLabel | string | — |