---
id: Date and time picker
section: components
subsection: date-and-time
---

import { useState } from 'react';
import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';

## Demos

In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calendar-month) component and a [Dropdown](/components/menus/dropdown) component to compose a simple DateTimePicker. The input is read only, meaning that the following example does not cover pasting a copied date and time. Also, you can pick the time only from the predefined options and cannot change it in the input.

### Date and time picker

```ts file="examples/DateTimePicker/DateTimePicker.tsx"

```

### Date and time range picker

```ts file="examples/DateTimePicker/DateTimeRangePicker.tsx"

```