---
title: "Vue Calendar Formatting Values Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/calendar/formatting-return-values"
---
# Formatting Values - Vue Calendar demo
Customize how dates and times appear in Vue date picker inputs — set custom date and time formats or inherit them from locale settings. For Vue and Nuxt.
- [Live demo](https://demo.mobiscroll.com/vue/calendar/formatting-return-values)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/calendar/formatting-return-values)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/datepicker/calendar/formatting-return-values)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/formatting-return-values.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/formatting-return-values.md), [Angular](https://demo.mobiscroll.com/angular/calendar/formatting-return-values.md), [React](https://demo.mobiscroll.com/react/calendar/formatting-return-values.md)
## Description
Use the [`dateFormat`](https://mobiscroll.com/docs/vue/datepicker/api#localization-dateFormat), [`timeFormat`](https://mobiscroll.com/docs/vue/datepicker/api#localization-timeFormat) options to customize how the values show up in the inputs after selection. If the formats are not explicitly set, they are inherited from the localization settings.
Besides customizing the date and time formats you can reorder the time picker wheels and change its formats with the [`timeWheels`](https://mobiscroll.com/docs/vue/datepicker/api#localization-timeWheels) options.
**Interested in learning about localization?** [Check out how the return format changes based on locale →](https://demo.mobiscroll.com/vue/calendar/localization)
## What this demo shows
- Fourteen input-based date, month, time, and date-time pickers demonstrate different ways to format selected values.
- **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. 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 the calendar to the corresponding month.
- **Footer actions** The gray Cancel button discards the change, while the blue Set button confirms the selected date or time.
- **Input value** Confirming a selection with Set displays the formatted value in the input.
- **Example 1 - Default date format** Displays the month, day, and year as numbers separated by `/`.
- **Example 2 - Numeric date** Uses `dateFormat: 'DD.MM.YYYY'`.
- **Example 3 - Month only** Uses `dateFormat: 'MMMM'`.
- **Example 4 - Full month name** Uses `dateFormat: 'D MMMM YYYY'`.
- **Example 5 - Month and year** Uses `dateFormat: 'MM/YYYY'`.
- **Example 6 - Weekday and abbreviated month** Uses `dateFormat: 'DDD DD MMM, YYYY'`.
- **Example 7 - ATOM date** Uses `dateFormat: 'YYYY-MM-DD'`.
- **Example 8 - COOKIE date** Uses `dateFormat: 'DDD, DD MMM YYYY'`.
- **Example 9 - Default time format** Uses a time-only scroller with the default time format.
- **Example 10 - 12-hour time** Uses a time-only scroller with `timeFormat: 'hh:mm A'`.
- **Example 11 - 24-hour time** Uses a time-only scroller with `timeFormat: 'HH:mm'`.
- **Example 12 - 24-hour time with seconds** Uses a time-only scroller with `timeFormat: 'HH:mm:ss'`.
- **Example 13 - Date and time** Combines a date picker with a time scroller using `timeFormat: 'HH:mm:ss'`.
- **Example 14 - Custom date and time** Combines a date picker with a time scroller using `dateFormat: 'DDD D MMM, YYYY'` and `timeFormat: 'H:mm'`.
## Best for
- **Regional date conventions** Displaying dates in the numeric or text-based order expected by a specific audience.
- **Standardized date values** Presenting selections in formats such as the ATOM-style `YYYY-MM-DD` pattern.
- **Month-based workflows** Collecting a month or a month-and-year value without displaying a full date in the input.
- **Time entry** Supporting 12-hour or 24-hour time values, with optional seconds.
- **Date-time forms** Showing combined date and time selections in a format suited to the surrounding form or workflow.
- **Readable summaries** Using weekday and month names when a more descriptive input value is easier to scan than a fully numeric date.
## Tutorial
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
```vue
```
## 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
- [`dateFormat`](https://mobiscroll.com/docs/vue/datepicker/api#localization-dateFormat) - option
- [`timeFormat`](https://mobiscroll.com/docs/vue/datepicker/api#localization-timeFormat) - option
- [`dateWheels`](https://mobiscroll.com/docs/vue/datepicker/api#localization-dateWheels) - option
## Code
### SFC JS
```vue
```
### SFC TS
```vue
```
## Implementation notes
- For date-only examples, use `controls: ['calendar']` with `dateFormat` set to a token pattern: `'DD.MM.YYYY'` (separator order), `'MMMM'` (month name only), `'D MMMM YYYY'` (day + month name + year), `'MM/YYYY'` (month/year), `'DDD DD MMM, YYYY'` (weekday name), `'YYYY-MM-DD'` (ATOM-style), or `'DDD, DD MMM YYYY'` (COOKIE-style).
- For time-only examples, use `controls: ['time']` with `timeFormat` set to `'hh:mm A'` (12-hour with AM/PM), `'HH:mm'` (24-hour), or `'HH:mm:ss'` (24-hour with seconds).
- For combined date-and-time examples, use `controls: ['calendar', 'time']` with both `dateFormat` and `timeFormat` set together.
- To also change the wording used in the time-picker scroller wheels (not just the formatted input value), set `dateWheels` to a pipe-delimited token pattern, e.g. `'|DDD D MMM, YYYY|'`.
- Each example calls `setVal(now, true)` (or the equivalent bound value) on `onInit` purely to populate the input with a preview value in that format - not required for the format option itself to work.
## 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 Formats](https://demo.mobiscroll.com/vue/calendar/date-object-ISO-8601-moment.md) - Use a Vue calendar date picker that accepts JS Date objects, ISO 8601 strings, and Moment.js objects.
- Next: [Programmatic Value Control](https://demo.mobiscroll.com/vue/calendar/setting-values-defaults.md) - Set a default date or update the Vue date picker value programmatically — via bound state or custom buttons.