---
title: "Vue date time scroller picker example | Mobiscroll"
component: "Date & Time"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/datetime/date-time-picker"
---

# Date & time selection - Vue Date & Time demo

Vue Datetime scroller demo with date, hour and minute wheels. Featuring iPhone style rendering and format. With source code. For Vue and Nuxt.

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

## Description

The date picker ships with five built-in variations for rendering the UI. The [`controls` option](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) supports the following:

- `date` - renders a date-only scroller or dropdown control
- `time` - renders a time-only scroller or dropdown control
- `timegrid` - renders a time grid for time selection
- `datetime` - renders a date & time scroller or dropdown
- `calendar` - renders a calendar view for date picking

Use `controls: ['datetime']` for rendering a date & time picker within the same control, tied to the same input, or use them separately for two inputs - `controls: ['date']` and `controls: ['time']`. It will render a scrollers for `touchUi: true` and a dropdowns for `touchUi: false`.

**Interested in dynamically switching between modes?** [Learn how to set up responsive behavior →](https://demo.mobiscroll.com/vue/datetime/responsive)

## What this demo shows

- Three wheel-style configurations for selecting a single date and time.
- **Compact date and time picker** The first example uses separate scrollable wheels for the date, hour, minute, and AM/PM. The current date is labeled `Today`, while other dates use an abbreviated day, month, and date format.
- **Expanded date and time picker** The second example uses separate scrollable wheels for the month, date, and year, with the hour, minute, and AM/PM wheels displayed alongside them.
- **Date and time picker with separate inputs** The third example uses one input to open month, date, and year wheels and a second input to open hour, minute, and AM/PM wheels.
- **Input behavior** Each picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Scrolling behavior** The selected values appear in a central selection area, while neighboring values are visually subdued. Users scroll vertically through each wheel to change the selection.
- **Footer actions** In the input-based examples, `Cancel` discards the changes and `Set` confirms the selected values.
- **Input value** After the user selects `Set`, the input displays the confirmed value in the format configured for that example.

## Best for

- **Compact date and time selection** Forms and mobile interfaces where users need to choose a date and time in a space-efficient picker.
- **Detailed date and time selection** Workflows where displaying the month, date, year, and time wheels together makes each part of the selection easy to review.
- **Separate date and time fields** Forms that collect the date and time independently or apply separate validation and formatting to each value.

## Tutorial

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

```vue
<MbscDatepicker
  :controls="['date', 'time']"
  :touchUi="true"
/>
```

```vue
<!-- date picker -->
<MbscDatepicker
  :controls="['date']"
  :touchUi="true"
/>

<!-- time picker -->               
<MbscDatepicker
  :controls="['time']"
  :touchUi="true"
/>
```

## 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
- [`inputStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labelStyle) - option

## Code

### SFC JS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <MbscDatepicker
      :controls="['datetime']"
      label="Compact date & time picker"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['date', 'time']"
      label="Expanded date & time picker"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <div class="mbsc-grid mbsc-no-padding">
      <div class="mbsc-row">
        <div class="mbsc-col-6">
          <MbscDatepicker
            :controls="['date']"
            label="Date"
            inputStyle="outline"
            labelStyle="stacked"
            placeholder="Please Select..."
          />
        </div>
        <div class="mbsc-col-6">
          <MbscDatepicker
            :controls="['time']"
            label="Time"
            inputStyle="outline"
            labelStyle="stacked"
            placeholder="Please Select..."
          />
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <MbscDatepicker
      :controls="['datetime']"
      label="Compact date & time picker"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['date', 'time']"
      label="Expanded date & time picker"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <div class="mbsc-grid mbsc-no-padding">
      <div class="mbsc-row">
        <div class="mbsc-col-6">
          <MbscDatepicker
            :controls="['date']"
            label="Date"
            inputStyle="outline"
            labelStyle="stacked"
            placeholder="Please Select..."
          />
        </div>
        <div class="mbsc-col-6">
          <MbscDatepicker
            :controls="['time']"
            label="Time"
            inputStyle="outline"
            labelStyle="stacked"
            placeholder="Please Select..."
          />
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Four independent `Datepicker` instances, each bound to its own input, illustrating three ways to combine date and time controls.
- **Compact picker** `controls: ['datetime']` renders a single combined wheel set (day/date label + hour + minute + AM/PM) in one control tied to one input.
- **Expanded picker** `controls: ['date', 'time']` renders the full month/date/year wheels alongside the hour/minute/AM-PM wheels in the same picker instance/input - two control types combined but still one input, distinct from the single fused `datetime` wheel of the compact variant.
- **Separate inputs** Two independent `Datepicker` instances are used instead of one: `controls: ['date']` on one input and `controls: ['time']` on the other, so date and time are captured, validated, and formatted independently.
- `touchUi` (true by default on touch devices) determines whether each picker renders as scroller wheels (`touchUi: true`) or dropdowns (`touchUi: false`); all three configurations respect it identically.

## 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 selection](https://demo.mobiscroll.com/vue/datetime/time-picker.md) - Vue Time picker demo with scroller wheel rendering for mobile and touch devices. Bottom or center display.
- Next: [Setting time select steps](https://demo.mobiscroll.com/vue/datetime/time-value-steps.md) - Vue Date and time demo with 5 and 15 minute steps. Control hour, minute and second steps. With source code.