---
title: "Vue Calendar Date Formats Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/calendar/date-object-ISO-8601-moment"
---

# Date Formats - Vue Calendar demo

Use a Vue calendar date picker that accepts JS Date objects, ISO 8601 strings, and Moment.js objects. For Vue and Nuxt.

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

## Description

The date & time picker works with different date types:

- **JS date object** - a common way of passing a date is through a Date object: `new Date(1995, 11, 17, 15, 24)` (make sure to not simply pass a date string to `new Date()`)
- **ISO date string** - standardized way of passing dates: `'2008-09-15T15:53:00'` (make sure to pass it as a string)
- **Moment.js object** - a great solution that solves common date management difficulties: `moment([2018, 3, 27, 12, 15])` (make sure to have moment.js loaded)

When passing dates to the component - eg. [invalids](https://demo.mobiscroll.com/vue/datetime/disabled-invalid-values), [min/max](https://demo.mobiscroll.com/vue/datetime/min-max-restrictions) - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the [`returnFormat`](https://mobiscroll.com/docs/vue/datepicker/api#opt-returnFormat) option.

## What this demo shows

- An inline date picker for selecting a date from a calendar.
- **Header navigation** Clicking the month and year label in the upper-left corner opens the month and year picker. The 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 dates arranged in a grid below.
- **Month navigation** Dragging the calendar left or right moves between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. Selecting a day highlights its number with a blue background.
- **Current date** The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to the corresponding month.
- **Example panel** Three code snippets appear to the left of the calendar, each demonstrating a supported date format.
- **Supported formats** The examples use a `JS date object`, an `ISO date string`, and a `Moment.js object`.
- **Navigate actions** Each code example includes a button that navigates the calendar to a specific date using the corresponding format.
- **Button labels** The buttons are labeled `Set JS date object`, `Set ISO string`, and `Set moment.js object`.
- **Button interaction** Hovering over a button highlights it. Clicking the button navigates the calendar to the example date.

## Best for

- **Supported date inputs** Showing developers which date formats the date picker accepts and how each format can be used to navigate to a specific date.

## Tutorial

### JS date object

```vue
<script setup>
const date = ref()
function setDate() {
  date.value = new Date(2020, 10, 15, 10, 45)
}
</script>
<template>
  <MbscDatepicker v-model="date" returnFormat="jsdate" />
</template>
```

### ISO date string

```vue
<script setup>
const date = ref()
function setDate() {
  date.value = '2020-05-20T12:30:00'
}
</script>
<template>
  <MbscDatepicker v-model="date" returnFormat="iso8601" />
</template>
```

### Moment.js object

```vue
<script setup>
const date = ref()
function setDate() {
  date.value = moment([2020, 2, 6, 15, 30])
}
</script>
<template>
  <MbscDatepicker v-model="date" returnFormat="moment" />
</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
- [`returnFormat`](https://mobiscroll.com/docs/vue/datepicker/api#opt-returnFormat) - option

## Code

### SFC JS

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

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

const date = ref()
const iso = ref()
const momentJs = ref()

function setDate() {
  date.value = new Date(2020, 10, 15, 10, 45)
}

function setISO() {
  iso.value = '2020-05-20T12:30:00'
}

function setMoment() {
  // Make sure that moment js is loaded
  momentJs.value = moment([2020, 2, 6, 15, 30])
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Controlling the default value</div>
      <div class="MbscButton-group-block">
        <MbscButton @click="setDate">Set: Sun Nov 15 2020 03:24:00 GMT</MbscButton>
      </div>
      <MbscDatepicker
        :controls="['calendar']"
        v-model="date"
        returnFormat="jsdate"
        label="Date object"
      />
    </div>
    <div class="mbsc-padding">Return value: {{ date }}</div>

    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Working with Date strings</div>
      <div class="MbscButton-group-block">
        <MbscButton @click="setISO()">Set: 2020-05-20T12:30:00</MbscButton>
      </div>
      <div>
        <MbscDatepicker
          :controls="['calendar']"
          v-model="iso"
          returnFormat="iso8601"
          label="ISO string"
        />
      </div>
    </div>
    <div class="mbsc-padding">Return value: {{ iso }}</div>

    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Working with Moment JS Objects</div>
      <div class="MbscButton-group-block">
        <MbscButton @click="setMoment()">Set: 2020-03-06T15:30:00+02:00</MbscButton>
      </div>
      <div>
        <MbscDatepicker
          :controls="['calendar']"
          v-model="momentJs"
          returnFormat="moment"
          label="Moment JS"
        />
      </div>
    </div>
    <div class="mbsc-padding">Return value: {{ momentJs ? momentJs.format() : '' }}</div>
  </MbscPage>
</template>
```

### SFC TS

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

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

const date = ref<Date>()
const iso = ref<string>()
const momentJs = ref<any>()

function setDate() {
  date.value = new Date(2020, 10, 15, 10, 45)
}

function setISO() {
  iso.value = '2020-05-20T12:30:00'
}

function setMoment() {
  // Make sure that moment js is loaded
  momentJs.value = moment([2020, 2, 6, 15, 30])
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Controlling the default value</div>
      <div class="MbscButton-group-block">
        <MbscButton @click="setDate">Set: Sun Nov 15 2020 03:24:00 GMT</MbscButton>
      </div>
      <MbscDatepicker
        :controls="['calendar']"
        v-model="date"
        returnFormat="jsdate"
        label="Date object"
      />
    </div>
    <div class="mbsc-padding">Return value: {{ date }}</div>

    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Working with Date strings</div>
      <div class="MbscButton-group-block">
        <MbscButton @click="setISO()">Set: 2020-05-20T12:30:00</MbscButton>
      </div>
      <div>
        <MbscDatepicker
          :controls="['calendar']"
          v-model="iso"
          returnFormat="iso8601"
          label="ISO string"
        />
      </div>
    </div>
    <div class="mbsc-padding">Return value: {{ iso }}</div>

    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Working with Moment JS Objects</div>
      <div class="MbscButton-group-block">
        <MbscButton @click="setMoment()">Set: 2020-03-06T15:30:00+02:00</MbscButton>
      </div>
      <div>
        <MbscDatepicker
          :controls="['calendar']"
          v-model="momentJs"
          returnFormat="moment"
          label="Moment JS"
        />
      </div>
    </div>
    <div class="mbsc-padding">Return value: {{ momentJs ? momentJs.format() : '' }}</div>
  </MbscPage>
</template>
```

## Implementation notes

- Use `controls: ['calendar']` and `display: 'inline'` - a single calendar instance is used across all return-format examples, not one per format.
- Set `returnFormat` to control the type the picker's value is read as and accepts: `'jsdate'` (native JS `Date`), `'iso8601'` (ISO date string, e.g. `'2020-05-20T12:30:00'`), or `'moment'` (a Moment.js object).
- JS/jQuery: keep the datepicker instance in a variable and call `setVal(value, true)` on it, with `value` in the corresponding format (e.g. `new Date(2020, 10, 15, 10, 45)`, `'2020-05-20T12:30:00'`, or `moment([2018, 3, 27, 12, 15])`), animating the calendar to the target date; read the current value back with `getVal()` (call `.format()` on it for the moment instance).
- React: manage the value in state (`useState`) and pass it via `value`/`onChange`, calling `setValue(...)` in the corresponding format instead of an imperative `setVal`. Angular/Vue: bind the value with `[(ngModel)]`/`v-model` and assign the corresponding format directly to the bound variable.

## 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: [Date Range Picker](https://demo.mobiscroll.com/vue/calendar/range-select.md) - Select a start/end date range from an inline Vue calendar — set custom labels, range highlighting, and min/max range for booking or reservation.
- Next: [Formatting Values](https://demo.mobiscroll.com/vue/calendar/formatting-return-values.md) - Customize how dates and times appear in Vue date picker inputs — set custom date and time formats or inherit them from locale settings.