---
title: "React Range Date Range Picker Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/range/date-range"
---

# Date Range Picker - React Range demo

Set up a React date range picker as a calendar view or date scroller — inline or in a popup, with one or two inputs. For React and Next.JS.

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

## Description

Set up the range picker for date pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date range picker. The `controls` option supports different values:

- `calendar` - will render a calendar view for date range selection
- `date` - will render a date scroller or dropdown for date range selection
- `datetime` - will render a compact date scroller or dropdown with time picker for date & time range selection ([explore date & time ranges](https://demo.mobiscroll.com/react/range/date-time-range))
- `time` - will render a time picker for range selection ([explore time ranges](https://demo.mobiscroll.com/react/range/time-range))
- `timegrid` - will render a time grid for range selection ([explore time ranges](https://demo.mobiscroll.com/react/range/time-range))

## What this demo shows

- Shows five range picker examples for selecting start and end dates.
- **Inline calendar** The first example displays two months in an inline calendar for range selection.
- **Inline date scroller** The second example uses an inline date scroller designed for touch interaction.
- **Preset date range** The third example displays a two-month inline calendar with preset selection parameters instead of unrestricted start and end date selection.
- **Input-triggered calendar** The fourth example opens a two-month range calendar below an input when the input is clicked.
- **Separate start and end inputs** The fifth example uses separate inputs for the start and end dates and opens a two-month range calendar for each input.
- **Popup behavior** Clicking outside the picker closes it.
- **Start and end controls** Clickable start and end inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day states** Hovering over a day highlights its number with a gray background. The first selected day sets the range start, and the second sets the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Footer actions** In the input-based examples, `Cancel` discards the change and `Set` confirms the selected date range. The `Set` button remains inactive until a complete range is selected.
- **Input value** Selecting `Set` displays the confirmed range in the input using a month, day, and year format.

## Best for

- **Travel bookings** Select check-in and check-out dates for hotels, rentals, and other accommodations.
- **Appointment scheduling** Define start and end dates for appointments, meetings, and reservations.
- **Event planning** Select start and end dates for multi-day events.
- **Reporting and analytics** Choose a date range for filtering reports, dashboards, and historical data.

## Tutorial

### Date range with a calendar view

One of the most common ways to represent date range selection is through a calendar view with one or more months. Learn about how to [configure and customize the calendar](https://demo.mobiscroll.com/react/range/week-month-view-scrolling-direction).

```jsx
<Datepicker
    controls={['calendar']}
    select="range"
    calendarType="month"
    pages={2}
    display="inline"
    touchUi={true}
/>
```

### Date range with a scroller/dropdown

Passing `date` to the `controls` option renders a date scroller or dropdown with [customizable start and end labels](https://demo.mobiscroll.com/react/range/customizing-labels-selection).

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

### Pre-set date range

By setting the `select: 'preset-range'` you can pre-set the parameters of the selection rather than let people freely pick start/end dates. The first day and length can be set through the `firstSelectDay` and `selectSize` options.

```jsx
<Datepicker
    controls={['calendar']}
    select="preset-range"
    firstSelectDay={2}
    selectSize={10}
    display="inline"
    touchUi={true}
/>
```

### Using the range with one input

Besides rendering it inline, you can link the range to an input that can be a Mobiscroll input or an existing field. Explore [more ways to use the picker](https://demo.mobiscroll.com/react/range/usage-on-input-or-inline).

```jsx
<Datepicker
    controls={['calendar']}
    select="range"
    calendarType="month"
    pages={2}
    touchUi={true}
/>
```

### Using the range with two inputs

Sometimes it makes sense to use two separate inputs for `start` and `end`. You can pass a reference through the `startInput` and `endInput` options of mobiscroll or any type of input, like an `ion-input`.

```jsx
const [start, startRef] = React.useState(null);
const [end, endRef] = React.useState(null);
                            
<Datepicker
    controls={['calendar']}
    select="range"
    startInput={start}
    endInput={end}
    calendarType="month"
    pages={2}
    touchUi={true}
/>
<Input
    ref={startRef}
    placeholder="Please Select...">Start
</Input>
<Input
    ref={endRef}
    placeholder="Please Select...">End
</Input>
```

## 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
- [`calendarType`](https://mobiscroll.com/docs/react/datepicker/api#opt-calendarType) - option
- [`pages`](https://mobiscroll.com/docs/react/datepicker/api#opt-pages) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`firstSelectDay`](https://mobiscroll.com/docs/react/datepicker/api#opt-firstSelectDay) - option
- [`selectSize`](https://mobiscroll.com/docs/react/datepicker/api#opt-selectSize) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputStyle) - option
- [`startInput`](https://mobiscroll.com/docs/react/datepicker/api#opt-startInput) - option
- [`endInput`](https://mobiscroll.com/docs/react/datepicker/api#opt-endInput) - option

## Code

### JSX

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

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

function App() {
  const [start, startRef] = useState(null);
  const [end, endRef] = useState(null);

  return (
    <Page>
      <Datepicker controls={['calendar']} select="range" calendarType="month" pages={2} display="inline" />
      <Datepicker controls={['date']} select="range" display="inline" />
      <Datepicker controls={['calendar']} select="preset-range" display="inline" pages={2} firstSelectDay={2} selectSize={10} />
      <Datepicker
        controls={['calendar']}
        select="range"
        label="Range"
        labelStyle="stacked"
        inputStyle="outline"
        placeholder="Please Select..."
      />
      <Datepicker controls={['calendar']} select="range" startInput={start} endInput={end} />
      <div className="mbsc-grid mbsc-no-padding">
        <div className="mbsc-row">
          <div className="mbsc-col-6">
            <Input ref={startRef} label="Start" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..."></Input>
          </div>
          <div className="mbsc-col-6">
            <Input ref={endRef} label="End" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..."></Input>
          </div>
        </div>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

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

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

const App: FC = () => {
  const [start, startRef] = useState<Input | null>(null);
  const [end, endRef] = useState<Input | null>(null);

  return (
    <Page>
      <Datepicker controls={['calendar']} select="range" calendarType="month" pages={2} display="inline" />
      <Datepicker controls={['date']} select="range" display="inline" />
      <Datepicker controls={['calendar']} select="preset-range" display="inline" pages={2} firstSelectDay={2} selectSize={10} />
      <Datepicker
        controls={['calendar']}
        select="range"
        label="Range"
        labelStyle="stacked"
        inputStyle="outline"
        placeholder="Please Select..."
      />
      <Datepicker controls={['calendar']} select="range" startInput={start} endInput={end} />
      <div className="mbsc-grid mbsc-no-padding">
        <div className="mbsc-row">
          <div className="mbsc-col-6">
            <Input ref={startRef} label="Start" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..."></Input>
          </div>
          <div className="mbsc-col-6">
            <Input ref={endRef} label="End" labelStyle="stacked" inputStyle="outline" placeholder="Please Select..."></Input>
          </div>
        </div>
      </div>
    </Page>
  );
};
export default App;
```

## Implementation notes

- Set `select: 'range'` with `controls: ['calendar']` for a calendar-grid range picker, or `controls: ['date']` for a date scroller/dropdown range picker.
- On the calendar variant, set `calendarType: 'month'` with `pages: 2` to show two months side by side; `display: 'inline'` embeds it directly on the page, while omitting `display` (or using `'anchored'`) opens it below an input.
- Use `select: 'preset-range'` instead of `select: 'range'` to constrain selection to a fixed-length window rather than free start/end picking; `firstSelectDay` sets which day of the range is clickable to anchor the selection, and `selectSize` sets the fixed number of days in the range.
- To drive the picker from two separate fields instead of one, pass `startInput`/`endInput`: React/Vue pass input element refs, Angular passes template reference variables via `[startInput]`/`[endInput]`, and JS/jQuery pass CSS selector strings (e.g. `'#start'`, `'#end'`).
- `touchUi` controls whether the scroller/dropdown variants render as a scroller (touch) or dropdown (pointer); it has no effect on the calendar-grid variant.

## 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: [Time Range Picker](https://demo.mobiscroll.com/react/range/time-range.md) - Select start and end times with the React time range picker — inline scroller, time grid, or single/split input layouts for any form design.