---
title: "React Date & Time Start-end selection Example | Mobiscroll"
component: "Date & Time"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/datetime/range-select"
---

# Start-end selection - React Date & Time demo

React date time range picker & scroller with customizable start/end dates, labels, min & max length, range highlight. For React and Next.JS.

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

## Description

To enable range selection set the [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) option to `range`.

The microcopy for [`rangeStartLabel`](https://mobiscroll.com/docs/react/datepicker/api#localization-rangeStartLabel) and [`rangeEndLabel`](https://mobiscroll.com/docs/react/datepicker/api#localization-rangeEndLabel) can be easily overridden. For flight booking *"Outbound"* and *"Return"* makes sense while for accommodation booking *"Check in"* and *"Check out"* might be more appropriate.

Besides [invalidating selection that is before and after a specific date](https://demo.mobiscroll.com/react/datetime/min-max-restrictions), the minimum and maximum allowed length of a range selection can be enforced through the [`minRange`](https://mobiscroll.com/docs/react/datepicker/api#opt-minRange) and [`maxRange`](https://mobiscroll.com/docs/react/datepicker/api#opt-maxRange) options.

Dynamically switching between single, multiple or range select can be done with option changes.

**Looking for more range picker?** [Learn how to customize range selection →](https://demo.mobiscroll.com/react/range)

## What this demo shows

- An inline date range picker for selecting a start and end date from a wheel-style date picker.
- **Display mode** A segmented control on the left side of the picker switches between a date, time list, time grid and date and time picker layout. The date picker is selected by default.
- **Range labels** The configuration panel to the left of the picker includes controls for showing or hiding the start and end labels and for replacing the localized labels with custom text. Labels are shown by default, while custom labels are disabled by default.
- **Range length** At the bottom of the configuration panel, minimum and maximum range length controls define how many days a user may select.
- **Start and end inputs** Clickable inputs appear above the picker. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.

## Best for

- **Bookings and reservations** Hotel stays, travel dates, rentals, and other reservation workflows that require start and end dates.
- **Leave requests** Selecting a bounded period for time-off requests.
- **Reporting periods** Choosing a date range for reports and other time-based data views.
- **Constrained date ranges** Workflows that need minimum or maximum selection lengths, configurable range highlighting, or customized start and end labels.

## Tutorial

- (x) Date
- ( ) Time list
- ( ) Time grid
- ( ) Date & time

### Customize the start & end labels

- [ ] Override localized labels with custom text

Show `Outbound` for the start label

Show `Return` for the end label

### Control the minimum and maximum length of the selection

- [ ] Minimum length of

`3`

days

- [ ] Maximum length of

`10`

days

```jsx
<Datepicker
    controls={['date']}
    select="range"
    showRangeLabels={true}
/>
```

With "Time list":

```jsx
<Datepicker
    controls={['time']}
    select="range"
    showRangeLabels={true}
/>
```

With "Time grid":

```jsx
<Datepicker
    controls={['timegrid']}
    select="range"
    showRangeLabels={true}
/>
```

With "Date & time":

```jsx
<Datepicker
    controls={['datetime']}
    select="range"
    showRangeLabels={true}
/>
```

With "Minimum length of" on:

```jsx
<Datepicker
    controls={['date']}
    select="range"
    showRangeLabels={true}
    minRange={3}
/>
```

With "Maximum length of" on:

```jsx
<Datepicker
    controls={['date']}
    select="range"
    showRangeLabels={true}
    maxRange={10}
/>
```

## 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
- [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`showRangeLabels`](https://mobiscroll.com/docs/react/datepicker/api#opt-showRangeLabels) - option
- [`rangeStartLabel`](https://mobiscroll.com/docs/react/datepicker/api#localization-rangeStartLabel) - option
- [`rangeEndLabel`](https://mobiscroll.com/docs/react/datepicker/api#localization-rangeEndLabel) - option
- [`minRange`](https://mobiscroll.com/docs/react/datepicker/api#opt-minRange) - option
- [`maxRange`](https://mobiscroll.com/docs/react/datepicker/api#opt-maxRange) - option

## Code

### JSX

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

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

function App() {
  return (
    <div>
      <Datepicker
        controls={['datetime']}
        select="range"
        display="inline"
        showRangeLabels={true}
        rangeStartLabel="Outbound"
        rangeEndLabel="Return"
        minRange={3}
        maxRange={10}
      />
    </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={['datetime']}
      select="range"
      display="inline"
      showRangeLabels={true}
      rangeStartLabel="Outbound"
      rangeEndLabel="Return"
      minRange={3}
      maxRange={10}
    />
  </div>
);
export default App;
```

## Implementation notes

- Use `display: 'inline'` and `select: 'range'`; pick the picker layout with `controls: ['date']`, `['time']`, `['timegrid']`, or `['datetime']`.
- Set `showRangeLabels: true` to display "Start"/"End" style labels on the selected boundary dates; override the default wording with `rangeStartLabel`/`rangeEndLabel` (e.g. `'Outbound'`/`'Return'`) - leaving these unset falls back to the localized defaults.
- Set `minRange`/`maxRange` to constrain how short/long the selected range can be. The unit depends on `controls`: with `controls: ['date']` it's a whole number of days (e.g. `minRange: 3`, `maxRange: 10`); with `['time']`, `['timegrid']`, or `['datetime']` it's milliseconds (e.g. `minRange: 9000000` ≈ 2h30m, `maxRange: 36000000` ≈ 10h).
- These are plain reactive props/bindings in React, Vue, and Angular; in JS/jQuery update them at runtime via `setOptions({ rangeStartLabel, rangeEndLabel, minRange, maxRange })` on the instance - switching `controls` at runtime also goes through the same `setOptions` call.
- Read the selected range from the change event/value binding as a two-element array of dates; e.g. `setVal([startDate, endDate])` programmatically sets both boundaries at once.

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

- Previous: [Single value selection](https://demo.mobiscroll.com/react/datetime/single-select.md) - React picker & scroller for single date and date time selection. Tailored for mobile/desktop, touch/pointer interaction.
- Next: [Date types](https://demo.mobiscroll.com/react/datetime/date-object-ISO-8601-moment.md) - React Date picker for mobile & desktop supporting data types: javascript date object, ISO 8601 strings and moment.js objects.