---
title: "Vue Calendar Input Field or Inline Embed Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/calendar/usage-on-input-or-inline"
---

# Input Field or Inline Embed - Vue Calendar demo

Embed a Vue calendar date picker directly in a page or attach it to a form input — supports self-generated and custom input fields. For Vue and Nuxt.

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

## Description

The calendar can be used on a Mobiscroll input or any other input part of an existing form.

There are two ways to use the calendar:

- Initialize it on a single input, either Mobiscroll or non-Mobisroll input.
- Embed the picker without an input. This can be the page itself or a more complex popup

## What this demo shows

- Three monthly date picker examples for selecting a single date or multiple dates using input-based pickers or an inline display.
- **Date picker with inputs** The first and second examples open the picker when the user focuses or clicks the input.
- **Input behavior** The input-based pickers open below the input with a darkened backdrop. Clicking outside the picker closes it.
- **Inline date picker** The third example embeds the date picker 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. 
- **Footer actions** In the input-based examples, the gray Cancel button discards the change, while the blue Set button confirms the selected date.
- **Input value** After the user confirms a single date with Set, the input displays it in month, day, and year format.
- **Multiple date selection** The second example supports selecting multiple dates. Selected days have a blue background, and confirming with Set displays them as removable date chips in the input. Clicking a chip's remove button removes that date from the selection.

## Best for

- **Single-date form fields** Choosing one date for an appointment, reservation, delivery, or deadline from an input-based picker.
- **Multiple nonconsecutive dates** Selecting several dates for attendance, availability, recurring visits, or planned workdays and reviewing them as removable chips in an input.
- **Compact forms** Keeping the date picker hidden until the user focuses or clicks a date field.
- **Always-visible date selection** Embedding a monthly picker directly in a page when users need immediate access to calendar navigation and date selection.

## Tutorial

### Calendar picker with input

Use it on any external input by passing the component to the `inputComponent` option.

```vue
<template>
  <MbscDatepicker
    :controls="['calendar']"
    inputComponent="input"
    :inputProps="{ 
      placeholder: 'Please Select...'
    }"
  />
</template>
```

If you don't pass a reference to an external input, the component takes care of generating its own input.

### Multiple date selection

Use it for multiple date picking with a mobiscroll input and pill rendering for the selected values.

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

### Embeddable calendar picker

It can be embedded into the page or a popup as an inline picker by setting the `display` option to `inline`.

```vue
<template>
  <MbscDatepicker
    :controls="['calendar']"
    display="inline"
  />
<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
- [`inputComponent`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputComponent) - option
- [`inputProps`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputProps) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputStyle) - option
- [`display`](https://mobiscroll.com/docs/vue/datepicker/api#opt-display) - option

## Code

### SFC JS

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

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

const inputProps = {
  placeholder: 'Please Select...'
}
</script>

<template>
  <MbscPage>
    <MbscDatepicker :controls="['calendar']" inputComponent="input" :inputProps="inputProps" />
    <MbscDatepicker
      :controls="['calendar']"
      label="Calendar"
      labelStyle="stacked"
      inputStyle="outline"
      placeholder="Please Select..."
    />
    <MbscDatepicker :controls="['calendar']" display="inline" />
  </MbscPage>
</template>
```

### SFC TS

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

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

const inputProps = {
  placeholder: 'Please Select...'
}
</script>

<template>
  <MbscPage>
    <MbscDatepicker :controls="['calendar']" inputComponent="input" :inputProps="inputProps" />
    <MbscDatepicker
      :controls="['calendar']"
      label="Calendar"
      labelStyle="stacked"
      inputStyle="outline"
      placeholder="Please Select..."
    />
    <MbscDatepicker :controls="['calendar']" display="inline" />
  </MbscPage>
</template>
```

## Implementation notes

- **On an input, generated Mobiscroll input**: use `controls: ['calendar']` with `display: 'anchored'` (the default) on a labeled input (`label`, `inputStyle`, `labelStyle`, `placeholder`) - the picker opens on focus/click and writes the formatted value back into the input.
- **On an input, custom external input**: React/Vue bind the picker to a plain `<input>` (or any custom input component) via the `inputComponent` option, optionally with `inputProps` for attributes like `placeholder`. Angular applies the picker as a directive directly on an existing input element (e.g. `<input mbsc-datepicker>`, including third-party inputs like `ion-input`) instead of using the standalone component. JS/jQuery don't need this variant - their generated Mobiscroll input already covers both input cases.
- **Multiple dates on a generated input**: `controls: ['calendar']` with `selectMultiple: true` on a tag-enabled input (`tags: true` / `data-tags="true"`) - confirmed dates render as removable chips inside the generated Mobiscroll input.
- **Inline, no input**: use `controls: ['calendar']` with `display: 'inline'` on a plain container instead of an input.

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

- Previous: [Touch & Desktop Layout](https://demo.mobiscroll.com/vue/calendar/mobile-desktop-usage.md) - Set a Vue date picker to render in touch-optimized or desktop mode — link it to an input, trigger it with a button, or embed it inline. For Vue and Nuxt.
- Next: [Responsive Calendar](https://demo.mobiscroll.com/vue/calendar/responsive.md) - A Vue date picker that switches layout by screen size — bottom-sheet on mobile, popover on tablet, and inline calendar on desktop. For Vue and Nuxt.