---
title: "Vue Calendar Date Picker Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/calendar/date-picker"
---

# Date Picker - Vue Calendar demo

Embed an inline monthly calendar in a Vue date picker for single-date selection — ideal for booking forms and reservation interfaces. For Vue and Nuxt.

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

When passing `controls: ['calendar']`, the date picker will render a monthly calendar for selecting a date.

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

## What this demo shows

- A monthly date picker for selecting a single date.
- **Inline date picker** The date picker is embedded directly in the page without an input by using inline display mode.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month.

## Best for

- **Single-date selection** Choosing one date from a monthly calendar while keeping surrounding dates and the day-of-week layout visible.

## Tutorial

```vue
<MbscDatepicker
  :controls="['calendar']"
/>
```

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

## Code

### SFC JS

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

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

<template>
  <MbscDatepicker :controls="['calendar']" display="inline" />
</template>
```

### SFC TS

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

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

<template>
  <MbscDatepicker :controls="['calendar']" display="inline" />
</template>
```

## Implementation notes

- `controls: ['calendar']` renders the monthly calendar view - this is the default control, so it doesn't need to be set explicitly unless overriding another value. Set `display: 'inline'` to embed the calendar directly in the page instead of opening it in a modal/popup.

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

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

- Next: [Date & Time Picker](https://demo.mobiscroll.com/vue/calendar/date-time-picker.md) - Pick a date, time, or both with the Vue date picker — choose from an inline calendar, scroller, or time grid in one component. For Vue and Nuxt.