---
title: "JQuery Calendar Formatting Values Example | Mobiscroll"
component: "Calendar"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/calendar/formatting-return-values"
---

# Formatting Values - jQuery Calendar demo

Customize how dates and times appear in JQuery date picker inputs — set custom date and time formats or inherit them from locale settings. For jQuery or jQuery Mobile.

- [Live demo](https://demo.mobiscroll.com/jquery/calendar/formatting-return-values)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/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), [Angular](https://demo.mobiscroll.com/angular/calendar/formatting-return-values.md), [React](https://demo.mobiscroll.com/react/calendar/formatting-return-values.md), [Vue](https://demo.mobiscroll.com/vue/calendar/formatting-return-values.md)

## Description

Use the [`dateFormat`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-dateFormat), [`timeFormat`](https://mobiscroll.com/docs/jquery/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/jquery/datepicker/api#localization-timeWheels) options.

**Interested in learning about localization?** [Check out how the return format changes based on locale →](https://demo.mobiscroll.com/jquery/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

```js
{
    controls: ['calendar']
}
```

```js
{
    controls: ['calendar'],
    dateFormat: 'DD.MM.YYYY'
}
```

```js
{
    controls: ['calendar'],
    dateFormat: 'MMMM'
}
```

```js
{
    controls: ['calendar'],
    dateFormat: 'D MMMM YYYY'
}
```

```js
{
    controls: ['calendar'],
    dateFormat: 'MM/YYYY'
}
```

```js
{
    controls: ['calendar'],
    dateFormat: 'DDD DD MMM, YYYY'
}
```

```js
{
    controls: ['calendar'],
    dateFormat: 'YYYY-MM-DD'
}
```

```js
{
    controls: ['calendar'],
    dateFormat: 'DDD, DD MMM YYYY'
}
```

```js
{
    controls: ['time']
}
```

```js
{
    controls: ['time'],
    timeFormat: 'hh:mm A'
}
```

```js
{
    controls: ['time'],
    timeFormat: 'HH:mm'
}
```

```js
{
    controls: ['time'],
    timeFormat: 'HH:mm:ss'
}
```

```js
{
    controls: ['calendar', 'time'],
    timeFormat: 'HH:mm:ss'
}
```

```js
{
    controls: ['calendar', 'time'],
    dateFormat: 'DDD D MMM, YYYY',
    timeFormat: 'H:mm',
    dateWheels: '|DDD D MMM, YYYY|'
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-controls) - option
- [`onInit`](https://mobiscroll.com/docs/jquery/datepicker/api#event-onInit) - event
- [`dateFormat`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-dateFormat) - option
- [`timeFormat`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-timeFormat) - option
- [`dateWheels`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-dateWheels) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  var now = new Date();

  $('#demo-date-def')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-date-sep')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      dateFormat: 'DD.MM.YYYY',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-date-month-only')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      dateFormat: 'MMMM',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-date-month')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      dateFormat: 'D MMMM YYYY',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-date-month-year')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      dateFormat: 'MM/YYYY',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-date-day')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      dateFormat: 'DDD DD MMM, YYYY',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-date-atom')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      dateFormat: 'YYYY-MM-DD',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-date-cookie')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      dateFormat: 'DDD, DD MMM YYYY',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-time-def')
    .mobiscroll()
    .datepicker({
      controls: ['time'],
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-time-12h')
    .mobiscroll()
    .datepicker({
      controls: ['time'],
      timeFormat: 'hh:mm A',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-time-24h')
    .mobiscroll()
    .datepicker({
      controls: ['time'],
      timeFormat: 'HH:mm',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-time-hms')
    .mobiscroll()
    .datepicker({
      controls: ['time'],
      timeFormat: 'HH:mm:ss',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-datetime-def')
    .mobiscroll()
    .datepicker({
      controls: ['calendar', 'time'],
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });

  $('#demo-datetime-day')
    .mobiscroll()
    .datepicker({
      controls: ['calendar', 'time'],
      dateFormat: 'DDD D MMM, YYYY',
      timeFormat: 'H:mm',
      dateWheels: '|DDD D MMM, YYYY|',
      onInit: function (event, inst) {
        inst.setVal(now, true);
      },
    });
});
```

### HTML

```html
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Date</div>
    <label>
        Default
        <input mbsc-input id="demo-date-def" />
    </label>
    <label>
        Separator
        <input mbsc-input id="demo-date-sep" />
    </label>
    <label>
        Month only
        <input mbsc-input id="demo-date-month-only" />
    </label>
    <label>
        Month name
        <input mbsc-input id="demo-date-month" />
    </label>
    <label>
        Month/year
        <input mbsc-input id="demo-date-month-year" />
    </label>
    <label>
        Day of week
        <input mbsc-input id="demo-date-day" />
    </label>
    <label>
        ATOM
        <input mbsc-input id="demo-date-atom" />
    </label>
    <label>
        COOKIE
        <input mbsc-input id="demo-date-cookie" />
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Time</div>
    <label>
        Default
        <input mbsc-input id="demo-time-def" />
    </label>
    <label>
        12 h
        <input mbsc-input id="demo-time-12h" />
    </label>
    <label>
        24 h
        <input mbsc-input id="demo-time-24h" />
    </label>
    <label>
        Hour, min, sec
        <input mbsc-input id="demo-time-hms" />
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Date & Time</div>
    <label>
        Default
        <input mbsc-input id="demo-datetime-def" />
    </label>
    <label>
        Day name
        <input mbsc-input id="demo-datetime-day" />
    </label>
</div>
```

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

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 jquery --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation

## Related demos

- Previous: [Date Formats](https://demo.mobiscroll.com/jquery/calendar/date-object-ISO-8601-moment.md) - Use a JQuery calendar date picker that accepts JS Date objects, ISO 8601 strings, and Moment.js objects.
- Next: [Programmatic Value Control](https://demo.mobiscroll.com/jquery/calendar/setting-values-defaults.md) - Set a default date or update the JQuery date picker value programmatically — via bound state or custom buttons.