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

# Time Range Picker - React Range demo

Select start and end times with the React time range picker — choose inline scroller, time grid, or single/split input layouts. For React and Next.JS.

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

## Description

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

- `time` - will render a time picker or dropdown for range selection
- `timegrid` - will render a time grid for range selection
- `calendar` - will render a calendar view for date range selection ([explore date ranges](https://demo.mobiscroll.com/react/range/date-range))
- `date` - will render a date scroller or dropdown for date range selection ([explore date ranges](https://demo.mobiscroll.com/react/range/date-range))
- `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))

## What this demo shows

- Four inline examples of time-only range selection, each using a different control configuration.
- **Inline time scroller** A compact scroller for picking start and end times directly on the page, without any date component.
- **Inline time grid** A time grid displayed at 30-minute increments, letting users select a start and end slot by tapping directly on the grid.
- **Single input with popover** One input field that opens a time range scroller as a popover on mobile and as a dropdown on desktop.
- **Separate start and end inputs** Dedicated input fields for start and end time, each opening its own popover/dropdown scroller. In all examples the selected start and end times are displayed above the picker component.

## Best for

- **Time-only scheduling** Use cases where only the time range matters and no date needs to be selected, such as setting working hours, defining shift windows, or configuring opening times.
- **Slot-based selection** The time grid variant is well-suited for appointment booking or resource scheduling where time is divided into fixed increments.
- **Flexible form layouts** The four examples cover the main form patterns (inline, single input, split inputs), making it straightforward to match the control to the surrounding form design.

## Tutorial

### Embeddable time range

Use the time range inline by setting the `display` option to `inline`. Learn about [the different ways to use the picker](https://demo.mobiscroll.com/react/range/usage-on-input-or-inline).

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

### Time range selection with a time grid

For a time grid rendering pass `'timegrid'` to the `controls` option.

```jsx
<Datepicker
    controls={['timegrid']}
    select="range"
    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 [the different ways to display the picker](https://demo.mobiscroll.com/react/range/mobile-desktop-display).

```jsx
<Datepicker
    controls={['time']}
    select="range"
    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={['time']}
    select="range"
    startInput={start}
    endInput={end}
    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
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - 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
- [`inputProps`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputProps) - 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={['time']} select="range" display="inline" />
      <Datepicker controls={['timegrid']} select="range" display="inline" />
      <Datepicker
        controls={['time']}
        select="range"
        label="Range"
        labelStyle="stacked"
        inputStyle="outline"
        placeholder="Please Select..."
      />
      <Datepicker controls={['time']} 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={['time']} select="range" display="inline" />

      <Datepicker controls={['timegrid']} select="range" display="inline" />

      <Datepicker
        controls={['time']}
        select="range"
        inputProps={{
          label: 'Range',
          labelStyle: 'stacked',
          inputStyle: 'outline',
          placeholder: 'Please Select...',
        }}
      />

      <Datepicker controls={['time']} 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'` together with `controls` to pick the time-range rendering: `['time']` renders a scroller/dropdown time picker, `['timegrid']` renders a tappable time grid (30-minute slots in this demo), `['date']`/`['calendar']` render date-only range pickers, and `['datetime']` renders a combined date & time range picker.
- Set `display: 'inline'` to embed the picker directly in the page instead of anchoring it to an input.
- For a single-input range, initialize the `Datepicker` on one input element (or bind `value`/`v-model`/`[(ngModel)]` in the component frameworks) - the same input shows both the selected start and end time.
- For two separate inputs, pass `startInput` and `endInput` pointing at the start/end fields: JS/jQuery take CSS selector strings (`startInput: '#start', endInput: '#end'`); React takes state/ref values (`startInput={start} endInput={end}`) set via input `ref` callbacks; Vue takes `ref()` values bound with `:startInput="startInput" :endInput="endInput"`; Angular takes template reference variables bound with `[startInput]="start" [endInput]="end"` where `start`/`end` are declared with `#start`/`#end` on the corresponding `mbsc-input` elements.
- `touchUi` controls whether the time picker renders as a touch-friendly scroller (`true`) or a compact dropdown (`false`); it can be set directly in the options/props or updated at runtime via `.setOptions({ touchUi })` (JS/jQuery) or by updating the bound prop.

## 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: [Date Range Picker](https://demo.mobiscroll.com/react/range/date-range.md) - Set up a React date range picker as a calendar view or date scroller — inline or in a popup, with one or two inputs.
- Next: [Date & Time Range Picker](https://demo.mobiscroll.com/react/range/date-time-range.md) - Pick start and end date-times with the React range picker — choose from calendar, time grid, or date-time scroller, with single or split input layouts.