---
title: "React Range Initializing the Picker Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/range/usage-on-input-or-inline"
---

# Initializing the Picker - React Range demo

Use the React date range picker on a single input, two separate start/end inputs, or inline on the page — no input required. For React and Next.JS.

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

## Description

The range component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overridden by setting the relevant options for the component.

There are four ways to use the range picker:

- Use it on an existing input by using the `inputComponent` prop. A great example is usage with an `IonInput`
- Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
- Use it with two separate inputs of any type, one for `start` and another for `end`
- Embed the picker without an input. This can be the page itself or a more complex popup

## What this demo shows

- Shows three date range picker examples for selecting a date range: using a single input, separate start and end inputs, or an inline picker.
- **Date range picker with inputs** The first example opens the range picker when the user focuses or clicks the input. The second uses two separate inputs, one for the range start and one for the range end.
- **Input behavior** In the input-based examples, the range picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Inline date picker** The third example embeds the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable 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.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows 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 cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.
- **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date range. Until a range is selected, the `Set` button remains inactive.
- **Input value** In the input-based examples, confirming a date range with `Set` displays the selected range in the input using a month, day, and year format.

## Best for

- **Booking and reservations** Selecting start and end dates for hotels, rentals, appointments, or other reservation flows.
- **Travel planning** Choosing arrival and departure dates for trips and accommodation.
- **Date-based filtering** Filtering reports, analytics, or other data by a specific date range.
- **Separate date inputs** Forms that require dedicated inputs for the start and end dates.
- **Inline date selection** Interfaces where the date range picker needs to remain permanently visible on the page.

## Tutorial

### Range picker with one input

Use it on any external input by passing the component to the `inputComponent` option.

```jsx
<Datepicker
    select="range"
    inputComponent="input"
    inputProps={{
        placeholder: 'Please Select...'
    }}
/>
```

If you don't pass a reference to an external input, the component takes care of generating its own input.

```jsx
<Datepicker
    select="range"
/>
```

### Range picker 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
    select="range"
    startInput={start}
    endInput={end}
/>
<Input
    ref={startRef}
    label="Start"
    placeholder="Please Select...">
</Input>
<Input
    ref={endRef}
    label="End"
    placeholder="Please Select...">
</Input>
```

### Embeddable range picker

It can be embedded into the page or a popup as an inline picker by setting the `display` option to `inline`.

```jsx
<Datepicker
    select="range"
    display="inline"
/>
```

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

## Code

### JSX

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

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

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

  const inputProps = useMemo(
    () => ({
      placeholder: 'Please Select...',
    }),
    [],
  );

  const boxInputProps = useMemo(
    () => ({
      label: 'Range',
      labelStyle: 'stacked',
      inputStyle: 'outline',
      placeholder: 'Please Select...',
    }),
    [],
  );

  return (
    <Page>
      <Datepicker select="range" inputComponent="input" inputProps={inputProps} />
      <Datepicker select="range" inputProps={boxInputProps} />
      <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>
      <Datepicker select="range" startInput={start} endInput={end} />
      <Datepicker select="range" display="inline" />
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, Input, Page, setOptions } from '@mobiscroll/react';
import { FC, useMemo, 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);

  const inputProps = useMemo(
    () => ({
      placeholder: 'Please Select...',
    }),
    [],
  );

  const boxInputProps = useMemo(
    () => ({
      label: 'Range',
      labelStyle: 'stacked',
      inputStyle: 'outline',
      placeholder: 'Please Select...',
    }),
    [],
  );

  return (
    <Page>
      <Datepicker controls={['calendar']} select="range" inputComponent="input" inputProps={inputProps} />
      <Datepicker controls={['calendar']} select="range" inputProps={boxInputProps} />
      <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>
      <Datepicker select="range" startInput={start} endInput={end} />
      <Datepicker controls={['calendar']} select="range" display="inline" />
    </Page>
  );
};
export default App;
```

## Implementation notes

- Set `select: 'range'` on `Datepicker` to enable range selection; `controls: ['calendar']` restricts it to the calendar-only mode used in this demo.
- Single-input mode is the default - no extra option is needed. In React/Vue, pass an external element via `inputComponent` (e.g. `inputComponent="input"`) to render the picker on a plain `<input>` instead of the generated Mobiscroll input; in Angular, apply `mbsc-datepicker` directly as a directive on an existing `<input>`; in JS/jQuery, initialize the picker on the existing input element's selector/id.
- Two-input mode is set with `startInput`/`endInput`: in JS/jQuery these take a selector string (`startInput: '#start', endInput: '#end'`); in React/Vue they take input element/ref values (`startInput={start}`, `:startInput="startInput"`); in Angular they take template reference variables (`[startInput]="start"`, `[endInput]="end"` bound to `#start`/`#end` on `mbsc-input` elements).
- Embedding without an input is done with `display: 'inline'`, which renders the calendar directly in the page or a container instead of anchoring it to an input.
- `showRangeLabels: true` displays the Start/End clickable input labels above the calendar header when using range selection.

## 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: [Mobile and Desktop](https://demo.mobiscroll.com/react/range/mobile-desktop-usage.md) - Configure the React date range picker for touch screens or desktop — link it to a form field, custom input, or embed it inline.
- Next: [Responsive Layout](https://demo.mobiscroll.com/react/range/responsive.md) - Configure the React date range picker responsively — show one month on mobile and two months on larger screens using built-in breakpoints.