---
title: "React Range Mobile and Desktop Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/range/mobile-desktop-usage"
---

# Mobile and Desktop - React Range demo

See how the React date range picker renders on touch screens versus desktop — link it to a form field or custom input, or embed it inline. For React and Next.JS.

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

## Description

Use the range picker for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the `touchUi` option to `false` and the component shows up suitable for larger screens and pointer interaction while setting it to `true` renders it suitable for touch screens.

Use it on an existing form field, custom input or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

**Handle different screen sizes by setting it up responsively** [Check out the responsive demo →](https://demo.mobiscroll.com/react/datetime/responsive)

## What this demo shows

- Shows four date range picker examples for selecting a start and end date from a monthly calendar.
- **Date range picker with inputs** The first example opens the range picker when the user focuses or clicks a standard input. The second opens it only from the `Show picker` button next to the input. The third uses a Mobiscroll input. 
- **Input behavior** In the three 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 range picker** The fourth 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 with `Set` displays the selected range in the input using a month, day, and year format.

## Best for

- **Booking and reservation forms** Users can easily select an arrival and departure date, rental period, or reservation window.
- **Travel and accommodation searches** A date range can be entered through a standard input or a dedicated picker button.
- **Reporting and analytics filters** Users can define a start and end date for filtering data.
- **Forms with different input requirements** The picker can work with a standard HTML input, a Mobiscroll input, a trigger button, or without an input at all.
- **Always-visible date selection** An inline calendar provides direct access to range selection without opening a popup.

## Tutorial

```jsx
const props = { placeholder: 'Please Select...' };
<Datepicker
    controls={['calendar']}
    select="range"
    touchUi={true}
    inputComponent="input"
    inputProps={props}
/>
```

```jsx
const props = { placeholder: 'Please Select...' };
const [openPicker, setOpenPicker] = React.useState(false);
const show = () => {
    setOpenPicker(true);
};
const onClose = () => {
    setOpenPicker(false);
};
<Datepicker
    controls={['calendar']}
    select="range"
    showOnClick={false}
    showOnFocus={false}
    isOpen={openPicker}
    onClose={onClose}
    touchUi={true}
    inputComponent="input"
    inputProps={props}
/>
<Button onClick={show}>Show picker</Button>
```

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

```jsx
<Datepicker
    controls={['calendar']}
    select="range"
    display="inline"
    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
- [`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
- [`showOnClick`](https://mobiscroll.com/docs/react/datepicker/api#opt-showOnClick) - option
- [`showOnFocus`](https://mobiscroll.com/docs/react/datepicker/api#opt-showOnFocus) - option
- [`isOpen`](https://mobiscroll.com/docs/react/datepicker/api#opt-isOpen) - option
- [`onClose`](https://mobiscroll.com/docs/react/datepicker/api#event-onClose) - event
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option

## Code

### JSX

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

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

function App() {
  const [openPicker, setOpenPicker] = useState(false);

  const handleClick = useCallback(() => {
    setOpenPicker(true);
  }, []);

  const handleClose = useCallback(() => {
    setOpenPicker(false);
  }, []);

  const inputProps = useMemo(
    () => ({
      className: 'md-mobile-picker-input',
      placeholder: 'Please Select...',
    }),
    [],
  );

  const boxInputProps = useMemo(
    () => ({
      className: 'md-mobile-picker-box-label',
      inputStyle: 'box',
      placeholder: 'Please Select...',
    }),
    [],
  );

  return (
    <Page>
      <div className="mbsc-grid">
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12">
              <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
              <Datepicker select="range" inputComponent="input" inputProps={inputProps} />
            </div>
          </div>
        </div>
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">
              Disable <code>onClick/onFocus</code> and only show on button
            </div>
            <div className="mbsc-col-8">
              <Datepicker
                select="range"
                inputComponent="input"
                inputProps={inputProps}
                showOnClick={false}
                showOnFocus={false}
                isOpen={openPicker}
                onClose={handleClose}
              />
            </div>
            <div className="mbsc-col-4">
              <Button variant="outline" color="primary" className="md-mobile-picker-button" onClick={handleClick}>
                Show picker
              </Button>
            </div>
          </div>
        </div>
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12">
              <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
              <Datepicker select="range" inputProps={boxInputProps} />
            </div>
          </div>
        </div>
        <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
      </div>
      <div className="md-mobile-picker-inline">
        <Datepicker display="inline" select="range" />
      </div>
    </Page>
  );
}

export default App;
```

### TSX

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

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

const App: FC = () => {
  const [openPicker, setOpenPicker] = useState<boolean>(false);

  const handleClick = useCallback(() => {
    setOpenPicker(true);
  }, []);

  const handleClose = useCallback(() => {
    setOpenPicker(false);
  }, []);

  const inputProps = useMemo(
    () => ({
      className: 'md-mobile-picker-input',
      placeholder: 'Please Select...',
    }),
    [],
  );

  const boxInputProps = useMemo(
    () => ({
      className: 'md-mobile-picker-box-label',
      inputStyle: 'box',
      placeholder: 'Please Select...',
    }),
    [],
  );

  return (
    <Page>
      <div className="mbsc-grid">
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12">
              <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
              <Datepicker select="range" inputComponent="input" inputProps={inputProps} />
            </div>
          </div>
        </div>
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">
              Disable <code>onClick/onFocus</code> and only show on button
            </div>
            <div className="mbsc-col-8">
              <Datepicker
                select="range"
                inputComponent="input"
                inputProps={inputProps}
                showOnClick={false}
                showOnFocus={false}
                isOpen={openPicker}
                onClose={handleClose}
              />
            </div>
            <div className="mbsc-col-4">
              <Button variant="outline" color="primary" className="md-mobile-picker-button" onClick={handleClick}>
                Show picker
              </Button>
            </div>
          </div>
        </div>
        <div className="mbsc-form-group">
          <div className="mbsc-row">
            <div className="mbsc-col-12">
              <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
              <Datepicker select="range" inputProps={boxInputProps} />
            </div>
          </div>
        </div>
        <div className="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
      </div>
      <div className="md-mobile-picker-inline">
        <Datepicker display="inline" select="range" />
      </div>
    </Page>
  );
};
export default App;
```

### CSS

```css
.md-mobile-picker-header {
  font-size: 14px;
}

input.md-mobile-picker-input {
  color: initial;
  width: 100%;
  padding: 10px;
  margin: 6px 0 12px 0;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.md-mobile-picker-button.mbsc-button {
  font-size: 13px;
  padding: 0 15px;
  line-height: 36px;
  float: right;
  margin: 6px 0;
  width: 100%;
}

.mbsc-col-no-padding {
  padding-left: 0;
}

.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
  margin: 6px 0 12px 0;
}
```

## Implementation notes

- Use `select: 'range'` with `showRangeLabels: true` and `touchUi: true`/`false` to switch the range picker between touch and pointer rendering.
- Any standard input can trigger the picker by default (`display` unset defaults to opening on focus/click); a Mobiscroll-styled input works the same way by adding the `mbsc-input` directive/component to the input element - no extra picker option is needed.
- Set `showOnClick: false` and `showOnFocus: false` to stop the picker opening from the input itself, then trigger it imperatively from a separate button: JS/jQuery call `.open()` on the stored instance; React tracks open state with `isOpen`/`onClose` props; Angular exposes the picker via a template reference (`#picker="mobiscroll"`) and calls `pickerInst.open()` from a `ViewChild`; Vue tracks `isOpen` in a ref and toggles it, binding `@close` to reset it.
- `display: 'inline'` embeds the range picker directly in the page markup with no trigger input at all.
- In React, `inputComponent="input"` plus `inputProps={{ placeholder: ... }}` render a plain native `<input>` instead of the default Mobiscroll input; other frameworks configure the native/Mobiscroll input directly in markup.

## 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: [Initializing the Picker](https://demo.mobiscroll.com/react/range/usage-on-input-or-inline.md) - Use the React date range picker on a single input, two separate start/end inputs, or inline on the page — no input required.