---
title: "Vue Range Date & Time Range Picker Example | Mobiscroll"
component: "Range"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/range/date-time-range"
---

# Date & Time Range Picker - Vue Range demo

Pick start and end date-times with the Vue range picker — choose from calendar, time grid, or date-time scroller, with single or split input layouts. For Vue and Nuxt.

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

## Description

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

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

## What this demo shows

- Five inline examples of date-and-time range selection, each using a different control configuration.
- **Calendar + time picker** A month calendar for date selection combined with a time picker, giving a familiar two-panel layout for picking start and end date-times.
- **Calendar + time grid** A month calendar paired with a time grid at 30-minute increments, suited for slot-based selection.
- **Date-time scroller** A compact inline scroller combining date and time in a single control for both the start and end values.
- **Single input with popover/dropdown** One input field that opens a date-time range scroller as a popover on mobile and as a dropdown on desktop.
- **Separate start and end inputs** Same responsive behavior as the single-input example, but with dedicated input fields for the start and end date-time. In all examples the selected start and end date-times are displayed above the picker component.

## Best for

- **Flexible form configurations** The five examples cover the most common form layouts: fully inline, single-input, and split start/end inputs, making it easy to pick the right pattern for a given form design.
- **Use-cases that need both date and time precision** Booking systems, scheduling tools, or any workflow where selecting just a date is not enough and the time component is required for both ends of the range.
- **Responsive UIs** The popover/dropdown examples demonstrate how the same control adapts between mobile and desktop without additional configuration.

## Tutorial

### Range with a calendar and time picker

One of the most common ways to represent date range selection is through a calendar with or without a time picker. Learn how to build [a date-only picker](https://demo.mobiscroll.com/vue/range/date-range).

```vue
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    :controls="['date']"
    :touchUi="true"
  />
</template>
```

### Range with a calendar and time grid

Instead of selecting time from a list of values you can show a grid by passing `'timegrid'` to the `controls` option.

```vue
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    :controls="['calendar', 'timegrid']"
    :touchUi="true"
  />
</template>
```

### Range with a scroller/dropdown

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

```vue
<template>
  <MbscDatepicker
    select="range"
    display="inline"
    :controls="['datetime']"
    :touchUi="true"
  />
</template>
```

### 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/vue/range/usage-on-input-or-inline).

```vue
<template>
  <MbscDatepicker
    select="range"
    :controls="['datetime']"
    :touchUi="true"
  />
</template>
```

### Using the range with two inputs

When using two separate inputs for `start` and `end`, you will want to initialize the component on the first input and make sure to pass the references of the two inputs through the `startInput` and `endInput` options.

```vue
<script setup>
const startInput = ref(null)
const endInput = ref(null)
</script>
                        
<template>
  <MbscDatepicker
    :controls="['datetime']"
    select="range"
    :startInput="startInput"
    :endInput="endInput"
    :touchUi="true"
  />
  <MbscInput ref="startInput" label="Start"/>
  <MbscInput ref="endInput" label="End"/>
</template>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`select`](https://mobiscroll.com/docs/vue/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/vue/datepicker/api#opt-display) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labelStyle) - option
- [`startInput`](https://mobiscroll.com/docs/vue/datepicker/api#opt-startInput) - option
- [`endInput`](https://mobiscroll.com/docs/vue/datepicker/api#opt-endInput) - option

## Code

### SFC JS

```vue
<script setup>
import { MbscDatepicker, MbscInput, MbscPage, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'

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

const startInput = ref(null)
const endInput = ref(null)
</script>

<template>
  <MbscPage>
    <MbscDatepicker :controls="['calendar', 'time']" select="range" display="inline" />
    <MbscDatepicker :controls="['calendar', 'timegrid']" select="range" display="inline" />
    <MbscDatepicker :controls="['datetime']" select="range" display="inline" />
    <MbscDatepicker
      :controls="['datetime']"
      select="range"
      label="Range"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['calendar, time']"
      :startInput="startInput"
      :endInput="endInput"
      select="range"
    />
    <div class="mbsc-grid mbsc-no-padding">
      <div class="mbsc-row">
        <div class="mbsc-col-6">
          <MbscInput
            ref="startInput"
            label="Start"
            inputStyle="outline"
            labelStyle="stacked"
            placeholder="Please Select..."
          />
        </div>
        <div class="mbsc-col-6">
          <MbscInput
            ref="endInput"
            label="End"
            inputStyle="outline"
            labelStyle="stacked"
            placeholder="Please Select..."
          />
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscDatepicker, MbscInput, MbscPage, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'

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

const startInput = ref<any>(null)
const endInput = ref<any>(null)
</script>

<template>
  <MbscPage>
    <MbscDatepicker :controls="['calendar', 'time']" select="range" display="inline" />
    <MbscDatepicker :controls="['calendar', 'timegrid']" select="range" display="inline" />
    <MbscDatepicker :controls="['datetime']" select="range" display="inline" />
    <MbscDatepicker
      :controls="['datetime']"
      select="range"
      label="Range"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['calendar, time']"
      :startInput="startInput"
      :endInput="endInput"
      select="range"
    />
    <div class="mbsc-grid mbsc-no-padding">
      <div class="mbsc-row">
        <div class="mbsc-col-6">
          <MbscInput
            ref="startInput"
            label="Start"
            inputStyle="outline"
            labelStyle="stacked"
            placeholder="Please Select..."
          />
        </div>
        <div class="mbsc-col-6">
          <MbscInput
            ref="endInput"
            label="End"
            inputStyle="outline"
            labelStyle="stacked"
            placeholder="Please Select..."
          />
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Set `select: 'range'` on the `Datepicker` for every configuration below - it is what turns single-value selection into start/end range selection.
- Use `controls: ['calendar', 'time']` for a calendar paired with a scroller-style time picker, or `controls: ['calendar', 'timegrid']` to pair the calendar with a 30-minute time grid instead of scroller wheels.
- Use `controls: ['datetime']` alone for the compact combined date-and-time scroller/dropdown layout (both inline and input-anchored).
- Set `display: 'inline'` to render the picker directly on the page, or omit `display` (default `'anchored'`) to open it from an input.
- For a single input driving the whole range, initialize the picker directly on that input element/ref.
- For two separate start/end inputs, initialize the picker once and pass `startInput`/`endInput` pointing at the two input elements/refs - React/Vue/Angular pass element refs (`startInput={start}` / `:startInput="startInput"` / `[startInput]="start"`), JS/jQuery pass selector strings (`startInput: '#start'`, `endInput: '#end'`).

## 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-vue.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 vue
   ```

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 vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Time Range Picker](https://demo.mobiscroll.com/vue/range/time-range.md) - Select start and end times with the Vue time range picker — choose inline scroller, time grid, or single/split input layouts.
- Next: [Range Picker Customization](https://demo.mobiscroll.com/vue/range/week-month-view-scrolling-direction.md) - Show multiple months or weeks in the Vue date range picker calendar — set scroll direction, display count, week numbers, and outer day visibility.