These pickers let users quickly choose a date or time through a familiar popup across M365 mobile apps. Your app can invoke it from a form, for example setting the date of a new appointment or the due date for a task.

`DateTimePicker` wraps a `DateTimePickerDialog` and provides state retention for configuration changes.

<DisplayToggle onText="Dark" offText="Light" label="Theme Switcher">
<!-- prettier-ignore-start -->

### Date Picker

<img className="off" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/android/updated/img_dateandtime_01_datepicker_light.png?text=LightMode"/>
<img className="on" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/android/updated/img_dateandtime_01_datepicker_dark.png?text=DarkMode"/>

### Time Picker

<img className="off" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/android/updated/img_dateandtime_03_timepicker_light.png?text=LightMode"/>
<img className="on" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/android/updated/img_dateandtime_03_timepicker_dark.png?text=DarkMode"/>

### Range Picker for Dates

<img className="off" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/android/updated/img_dateandtime_02_rangepicker_light.png?text=LightMode"/>
<img className="on" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/android/updated/img_dateandtime_02_rangepicker_dark.png?text=DarkMode"/>
<!-- prettier-ignore-end -->
</DisplayToggle>