--- modificationDate: September 15, 2026 title: DateTimePicker description: Jetpack Compose components for selecting dates, date ranges, and times. sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-58/packages/expo-ui' packageName: '@expo/ui' platforms: ['android', 'expo-go'] --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # DateTimePicker Jetpack Compose components for selecting dates, date ranges, and times. ## Submitting Feedback If you encounter errors, misleading or outdated information, report it so Expo can be improved: Preferred command: npx --yes submit-expo-feedback@latest --category docs --subject "/versions/v58.0.0/sdk/ui/jetpack-compose/datetimepicker/" "" Direct HTTP fallback: curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v58.0.0/sdk/ui/jetpack-compose/datetimepicker/","feedback":"🤖 Agent feedback for docs: (, )"}' Only submit when you have something specific and actionable to report. Try to give the most context. ## Navigation When answering a related or follow-up question, use llms.txt to find the relevant page as Markdown (.md) instead of guessing. You are here: Reference (v58.0.0) > Expo UI > Jetpack Compose (51 pages in this section) Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt) Android, Included in Expo Go Expo UI's date and time picker components match the official Jetpack Compose [Date Picker](https://developer.android.com/develop/ui/compose/components/datepickers), [Date Range Picker](https://developer.android.com/develop/ui/compose/components/datepickers#range), and [Time Picker](https://developer.android.com/develop/ui/compose/components/time-pickers) APIs. > **Note:** The date variants render Material's calendar grid and input field, both of which scroll horizontally internally. The parent `Host` must provide a finite width on the horizontal axis, use `matchContents={{ vertical: true }}` together with `style={{ width: '100%' }}` (or any finite width). See [Match contents in Host reference](/versions/v58.0.0/sdk/ui/jetpack-compose/host.md#match-contents) for details. > **Note:** `DateRangePicker` also scrolls vertically and fills the finite height provided by its parent. Place its `Host` in a bounded layout, such as one using `flex: 1`. Do not use `matchContents` on the vertical axis. Image: Material 3 date picker showing a selected date in a calendar grid ## Installation ```sh # npm npx expo install @expo/ui # yarn yarn expo install @expo/ui # pnpm pnpm expo install @expo/ui # bun bun expo install @expo/ui ``` If you are installing this in an [existing React Native app](/bare/overview.md), make sure to [install `expo`](/bare/installing-expo-modules.md) in your project. ## Usage ### Date picker ```tsx DatePickerExample.tsx import { useState } from 'react'; import { Host, DateTimePicker } from '@expo/ui/jetpack-compose'; export default function DatePickerExample() { const [selectedDate, setSelectedDate] = useState(new Date()); return ( { setSelectedDate(date); }} displayedComponents="date" initialDate={selectedDate.toISOString()} variant="picker" /> ); } ``` ### Time picker ```tsx TimePickerExample.tsx import { useState } from 'react'; import { Host, DateTimePicker } from '@expo/ui/jetpack-compose'; export default function TimePickerExample() { const [selectedDate, setSelectedDate] = useState(new Date()); return ( { setSelectedDate(date); }} displayedComponents="hourAndMinute" initialDate={selectedDate.toISOString()} variant="picker" /> ); } ``` ### Input variant Use `variant="input"` to display the picker as a text input field instead of the default picker UI. ```tsx InputVariantExample.tsx import { useState } from 'react'; import { Host, DateTimePicker } from '@expo/ui/jetpack-compose'; export default function InputVariantExample() { const [selectedDate, setSelectedDate] = useState(new Date()); return ( { setSelectedDate(date); }} displayedComponents="date" initialDate={selectedDate.toISOString()} variant="input" /> ); } ``` ### Date range picker ```tsx DateRangePickerAndroidExample.tsx import { useState } from 'react'; import { DateRangePicker, type DateRangeSelection, Host, } from '@expo/ui/jetpack-compose'; export default function DateRangePickerAndroidExample() { const [range, setRange] = useState({ start: new Date(), end: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000), }); return ( ); } ``` The callback's `end` value is `null` until the user finishes selecting the range. ### Date range picker dialog ```tsx DateRangePickerDialogExample.tsx import { useState } from 'react'; import { Button } from 'react-native'; import { DateRangePickerDialog, type DateRangeSelection, Host, } from '@expo/ui/jetpack-compose'; export default function DateRangePickerDialogExample() { const [visible, setVisible] = useState(false); const [range, setRange] = useState({ start: null, end: null, }); return ( <>