DateTimePicker

A comprehensive date and time picker component that provides a native experience on mobile platforms and a custom-built interface for web. Perfect for forms, scheduling, and any date/time input needs. This is an illustration of DateTimePicker component. A basic DateTimePicker with date and time selection

Installation

Run the following command:

npx gluestack-ui@alpha add date-time-picker

API Reference

To use this component in your project, include the following import statement in your file.

import {
  DateTimePicker,
  DateTimePickerTrigger,
  DateTimePickerInput,
  DateTimePickerIcon,
} from '@/components/ui/date-time-picker';

Component Anatomy

export default () => (
  <DateTimePicker>
    <DateTimePickerTrigger>
      <DateTimePickerInput />
      <DateTimePickerIcon />
    </DateTimePickerTrigger>
  </DateTimePicker>
);

DateTimePicker Props

Prop	Type	Default	Description
value	Date	-	The currently selected date/time.
onChange	(date: Date \| undefined) => void	-	Callback when date/time changes.
mode	'date' \| 'time' \| 'datetime'	'datetime'	Selection mode.
minimumDate	Date	-	Minimum selectable date.
maximumDate	Date	-	Maximum selectable date.
locale	string	-	Locale for formatting (e.g., 'en-US').
is24Hour	boolean	-	Use 24-hour format for time (Android only).
disabled	boolean	false	Disable the picker.
placeholder	string	-	Placeholder text when no date selected.
format	string	-	Custom display format (e.g., 'YYYY-MM-DD HH:mm').

DateTimePickerTrigger Props

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Size of the trigger.
variant	'outline' \| 'underlined' \| 'rounded'	'outline'	Visual variant.

DateTimePickerInput Props

Displays the selected date/time value. Inherits all TextInput props.

DateTimePickerIcon Props

Prop	Type	Default	Description
as	Component	-	Icon component to render.
size	'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Size of the icon.

Format Patterns

When using the

format

prop, you can use these patterns: | Pattern | Description | Example | | ------- | -------------------- | ------- | | YYYY | Full year | 2024 | | MM | Month (01-12) | 01 | | DD | Day of month (01-31) | 15 | | HH | Hours (00-23) | 14 | | mm | Minutes (00-59) | 30 | | ss | Seconds (00-59) | 45 |

Features

Cross-platform: Uses native pickers on iOS/Android, custom on web

Expo Go compatible: Works without ejecting or building

Multiple modes: Date only, Time only, or DateTime combined

Fully accessible: Keyboard navigation, screen reader support

Customizable styling: Support for sizes, variants, and custom themes

Min/Max date restrictions: Limit selectable date ranges

Locale support: International date/time formatting

Accessibility

Keyboard Navigation: Tab to focus, Enter/Space to open, Escape to close

Screen Readers: Announces selected date and picker state

ARIA Labels: Proper labeling for input and dialog

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs.

Different Modes

DateTimePicker supports three modes: date only, time only, and combined datetime selection

Variants & Sizes

DateTimePicker supports multiple visual variants (outline, underlined, rounded) and sizes (sm, md, lg, xl)

variant

size

With Form Control

Use DateTimePicker with FormControl for proper labeling, helper text, and validation states

Edit this page on GitHub