Date Picker Sheet

ProNew

A date field that opens a bottom sheet with a calendar and quick presets, shows the chosen date in the field and reports it when Done is pressed. Use this when a phone form needs one date and a popover calendar would be too small to tap.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it when a phone form needs one date and a popover calendar would be too small to tap.

Do not use it for a date range (use a range picker) or for birth dates years back (use separate fields).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`Date`	`-`	Selected date.
`onValueChange`	`(date: Date`	`undefined) => void`	required
`label`	`string`	`"Date"`	Field label and sheet title.

Accessibility

The field is a button whose text is the formatted date or "Choose a date"; the sheet title repeats the label.
The calendar is the shadcn calendar grid with its arrow-key navigation; presets are plain buttons above it.
Done applies the choice; Escape and closing leave the previous date untouched.

Testing

The pattern ships with a Testing Library test (date-picker-sheet.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone form needs one date and a popover calendar would be too small to tap.

Do not use it for a date range (use a range picker) or for birth dates years back (use separate fields).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`Date`	`-`	Selected date.
`onValueChange`	`(date: Date`	`undefined) => void`	required
`label`	`string`	`"Date"`	Field label and sheet title.

Accessibility

The field is a button whose text is the formatted date or "Choose a date"; the sheet title repeats the label.
The calendar is the shadcn calendar grid with its arrow-key navigation; presets are plain buttons above it.
Done applies the choice; Escape and closing leave the previous date untouched.

Testing

The pattern ships with a Testing Library test (date-picker-sheet.test.tsx) that drives it through roles and the keyboard.