---
title: "React Calendar Single Date Selection Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/calendar/single-select"
---

# Single Date Selection - React Calendar demo

Select a single date with the React date picker — combine it with a scroller or time-slot picker for appointments and reservations. For React and Next.JS.

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

## Description

Single value selection is the default behavior of the date picker. You can explicitly enable it by setting the [`selectMultiple`](https://mobiscroll.com/docs/react/datepicker/api#opt-selectMultiple) to `false`.

You can dynamically switch between single and multiple select or range select which helps with building a system for one-way and two-way bookings.

**Looking for multiple select?** [See how to enable multi-select →](https://demo.mobiscroll.com/react/calendar/multiple-select)

## What this demo shows

- Three inline examples demonstrate different ways to combine single-date selection with optional 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. 
- **Calendar selection:** The first example shows an inline, single-month date picker for selecting one date.
- **Calendar and scroller time selection:** The second example places a scroller-based time picker next to the single-month calendar. Its three scrollers contain hours from 1 to 12, minutes from 0 to 59, and AM/PM options. Users scroll each one to select an exact time.
- **Calendar and time grid selection:** The third example pairs a single-month date picker with a time slot picker displayed beside it.

## Best for

- **Date-only selection:** Choosing a single date for a delivery, deadline, reminder, or one-way booking.
- **Appointment scheduling:** Selecting an appointment date and exact time with an inline calendar and scroller-based time picker.
- **Reservations:** Choosing a date and time slot for a service, table, room, or other reservable item.
- **Interface comparison:** Evaluating scroller-based and time-grid selection patterns alongside the same single-month calendar.

## Tutorial

```jsx
<Datepicker
    controls={['calendar']}
    selectMultiple={false}
/>
```

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

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

## 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
- [`selectMultiple`](https://mobiscroll.com/docs/react/datepicker/api#opt-selectMultiple) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-labelStyle) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option

## Code

### JSX

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

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

function App() {
  return (
    <Page>
      <Datepicker selectMultiple={false} label="Date" inputStyle="box" labelStyle="stacked" placeholder="Please Select..." />
      <Datepicker
        controls={['calendar', 'time']}
        selectMultiple={false}
        label="Date & time"
        inputStyle="box"
        labelStyle="stacked"
        placeholder="Please Select..."
      />
      <Datepicker
        controls={['calendar', 'timegrid']}
        selectMultiple={false}
        label="Date & timegrid"
        inputStyle="box"
        labelStyle="stacked"
        placeholder="Please Select..."
      />
    </Page>
  );
}

export default App;
```

### TSX

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

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

const App: FC = () => (
  <Page>
    <Datepicker selectMultiple={false} label="Date" inputStyle="box" labelStyle="stacked" placeholder="Please Select..." />
    <Datepicker
      controls={['calendar', 'time']}
      selectMultiple={false}
      label="Date & time"
      inputStyle="box"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <Datepicker
      controls={['calendar', 'timegrid']}
      selectMultiple={false}
      label="Date & timegrid"
      inputStyle="box"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
  </Page>
);

export default App;
```

## Implementation notes

- Three separate inline calendar instances render side by side, each using `display: 'inline'` and `selectMultiple: false` - none is bound to an input.
- **Date only**: `controls: ['calendar']` - a single-month inline calendar for picking one date.
- **Date and time (scroller)**: `controls: ['calendar', 'time']` - pairs the inline calendar with a scrollable hour/minute/AM-PM time list.
- **Date and time (grid)**: `controls: ['calendar', 'timegrid']` - pairs the inline calendar with a fixed-interval time grid instead.
- `selectMultiple` defaults to `false`; it is passed explicitly in all three variants for clarity even though single-date selection is the default behavior.

## 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
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

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

- Next: [Multi-Date Selection](https://demo.mobiscroll.com/react/calendar/multiple-select.md) - Let users pick multiple dates in a React date picker. Set min and max selection counts and show a live counter in the header.