---
title: "React Calendar Date & Time Picker Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/calendar/date-time-picker"
---

# Date & Time Picker - React Calendar demo

Pick a date, time, or both with the React date picker — choose from an inline calendar, scroller, or time grid in one component. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/calendar/date-time-picker)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/calendar/date-time-picker)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/calendar/date-time-picker)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/date-time-picker.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/date-time-picker.md), [Angular](https://demo.mobiscroll.com/angular/calendar/date-time-picker.md), [Vue](https://demo.mobiscroll.com/vue/calendar/date-time-picker.md)

## Description

The date picker ships with five built-in variations for rendering the UI. The [`controls` option](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) supports the following:

- `date` - renders a date-only scroller or dropdown control
- `time` - renders a time-only scroller or dropdown control
- `timegrid` - renders a time grid for time selection
- `datetime` - renders a date & time scroller or dropdown
- `calendar` - renders a calendar view for date picking

Use `controls: ['datetime']` for rendering a date & time picker within the same control, tied to the same input, or use them separately for two inputs - `controls: ['date']` and `controls: ['time']`. It will render a scrollers for `touchUi: true` and a dropdowns for `touchUi: false`.

For a time grid use the `controls: ['timegrid']` instead of `'time'`.

**Interested in dynamically switching between modes?** [Learn how to set up responsive behavior →](https://demo.mobiscroll.com/react/calendar/responsive)

## What this demo shows

- Two inline examples demonstrate different ways to combine date and time selection.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month. 
- **Scroller time picker** The first example places a scroller-based time picker next to the single-month calendar. Its three rows contain hours from 1 to 12, minutes from 0 to 59, and AM/PM options. Users scroll each row to select an exact time.
- **Time grid picker** The second example places a time grid next to the single-month calendar. It presents 30-minute time slots from 12:00 AM through 12:00 PM.

## Best for

- **Appointment scheduling** Let users choose a calendar date and an exact appointment time with the scroller.
- **Date and time entry** Present date and time controls together in an inline, side-by-side layout.
- **Compact time selection** Use the scroller when users need to choose hours, minutes, and AM or PM independently.
- **Fixed-interval booking** Use the time grid when users choose from predefined 30-minute slots, such as for appointments or reservations.
- **Selection pattern comparison** Compare scroller and time grid interactions before choosing the approach that fits a date and time workflow.

## Tutorial

### Calendar with time picker

For date and time selection pass `'calendar'` and a `'time'` to the `controls` option.

```jsx
<Datepicker
    controls={['calendar', 'time']}
    touchUi={true}
/>
```

### Calendar with time grid

Alternatively the time-part can be selected from a time grid instead of a scrollable list. Pass `'calendar'` and a `'timegrid'` to the `controls` option.

```jsx
<Datepicker
    controls={['calendar', 'timegrid']}
    touchUi={true}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option

## Code

### JSX

```jsx
import { Datepicker, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  return (
    <div>
      <Datepicker controls={['calendar', 'time']} display="inline" />
      <Datepicker controls={['calendar', 'timegrid']} display="inline" />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => (
  <div>
    <Datepicker controls={['calendar', 'time']} display="inline" />
    <Datepicker controls={['calendar', 'timegrid']} display="inline" />
  </div>
);
export default App;
```

## Implementation notes

- **Scroller time picker**: set `controls: ['calendar', 'time']` and `display: 'inline'` to pair the calendar with a scrollable time list (hours, minutes, AM/PM wheels).
- **Time grid picker**: set `controls: ['calendar', 'timegrid']` and `display: 'inline'` to pair the calendar with a fixed-interval time grid instead of the scroller.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Date Picker](https://demo.mobiscroll.com/react/calendar/date-picker.md) - Embed an inline monthly calendar in a React date picker for single-date selection — ideal for booking forms and reservation interfaces. For React and Next.JS.
- Next: [Week View](https://demo.mobiscroll.com/react/calendar/week-view.md) - Display 1, 2, or 3 weeks inline in a React date picker — switch between week and month views dynamically without recreating the component. For React and Next.JS.