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

# Date Formats - Vue Range demo

Use the Vue date range picker with JS Date, ISO 8601, or Moment.js — auto-detect input formats and configure the return format. For Vue and Nuxt.

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

## Description

The range 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/range/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 range from a calendar.
- **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.
- **Inline date range picker** Displays the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** 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 shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. 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 its corresponding month.

## 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), new Date(2020, 10, 21)]
}
</script>
<template>
  <MbscDatepicker v-model="date" returnFormat="jsdate" />
</template>
```

### ISO date string

```vue
<script setup>
const date = ref()
function setDate() {
  date.value = ['2020-05-20', '2020-05-26']
}
</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]), moment([2020, 2, 12])]
}
</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
- [`select`](https://mobiscroll.com/docs/vue/datepicker/api#opt-select) - 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), new Date(2020, 10, 21)]
}

function setISO() {
  iso.value = ['2020-05-20', '2020-05-26']
}

function setMoment() {
  // Make sure that moment js is loaded
  momentJs.value = [moment([2020, 2, 6]), moment([2020, 2, 12])]
}
</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 - Sat Nov 21 2020</MbscButton>
      </div>
      <MbscDatepicker
        :controls="['calendar']"
        select="range"
        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-20 - 2020-05-26</MbscButton>
      </div>
      <div>
        <MbscDatepicker
          :controls="['calendar']"
          select="range"
          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-06 - 2020-03-12</MbscButton>
      </div>
      <div>
        <MbscDatepicker
          :controls="['calendar']"
          select="range"
          v-model="momentJs"
          returnFormat="moment"
          label="Moment JS"
        />
      </div>
    </div>
    <div class="mbsc-padding">
      Return value: {{ momentJs ? momentJs[0].format() + ' - ' + momentJs[1].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<any>()
const iso = ref<any>()
const momentJs = ref<any>()

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

function setISO() {
  iso.value = ['2020-05-20', '2020-05-26']
}

function setMoment() {
  // Make sure that moment js is loaded
  momentJs.value = [moment([2020, 2, 6]), moment([2020, 2, 12])]
}
</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 - Sat Nov 21 2020</MbscButton>
      </div>
      <MbscDatepicker
        :controls="['calendar']"
        select="range"
        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-20 - 2020-05-26</MbscButton>
      </div>
      <div>
        <MbscDatepicker
          :controls="['calendar']"
          select="range"
          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-06 - 2020-03-12</MbscButton>
      </div>
      <div>
        <MbscDatepicker
          :controls="['calendar']"
          select="range"
          v-model="momentJs"
          returnFormat="moment"
          label="Moment JS"
        />
      </div>
    </div>
    <div class="mbsc-padding">
      Return value: {{ momentJs ? momentJs[0].format() + ' - ' + momentJs[1].format() : '' }}
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Set `controls: ['calendar']`, `select: 'range'`, and `display: 'inline'` for the inline range calendar.
- Incoming values (e.g. for `value`/`setVal`, `invalid`/`valid`, `min`/`max`) accept a JS `Date` object (`new Date(2020, 10, 15)`), an ISO 8601 date string (`'2020-05-20'`), or a Moment.js object (`moment([2020, 2, 6])`) - for a range, pass a two-element array/tuple of `[start, end]` in any of these formats.
- Set `returnFormat` to `'jsdate'`, `'iso8601'`, or `'moment'` to control the type the picker returns/emits on selection, independent of the format used to set the value.
- Framework-specific value wiring differs: React uses a controlled `value` prop plus `onChange`; Angular uses `[(ngModel)]`; Vue uses `v-model`; JS/jQuery set/read values imperatively via `setVal(value)`/`getVal()` (jQuery: `.mobiscroll('setVal', value)`/`.mobiscroll('getVal')`) on the picker instance.
- Moment.js objects require Moment.js to be loaded separately; do not pass a date string directly to `new Date()` - construct it with explicit year/month/day arguments instead.

## 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: [Presets](https://demo.mobiscroll.com/vue/range/presets.md) - Add predefined date range presets — Today, Yesterday, This week, Last month — to a Vue date range picker for one-click filtering.
- Next: [Custom Date & Time Format](https://demo.mobiscroll.com/vue/range/formatting-return-values.md) - Set custom date and time display formats on the Vue date range picker — override locale defaults per input field.