---
title: "Javascript Date & Time Formatting values Example | Mobiscroll"
component: "Date & Time"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/datetime/formatting-return-values"
---

# Formatting values - JavaScript Date & Time demo

Javascript Date & time picker with variable formats, AM/PM, 12h/24h. Inherited from localization with override possibility. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/datetime/formatting-return-values)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/datetime/formatting-return-values)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/datetime/formatting-return-values.md), [Angular](https://demo.mobiscroll.com/angular/datetime/formatting-return-values.md), [React](https://demo.mobiscroll.com/react/datetime/formatting-return-values.md), [Vue](https://demo.mobiscroll.com/vue/datetime/formatting-return-values.md)

## Description

Use the [`dateFormat`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-dateFormat), [`timeFormat`](https://mobiscroll.com/docs/javascript/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 picker wheels and change its formats with the [`dateWheels`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-dateWheels) and [`timeWheels`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-timeWheels) options.

**Interested in learning about localization?** [Check out how the return format changes based on locale →](https://demo.mobiscroll.com/javascript/datetime/localization)

## What this demo shows

- Fourteen input-based wheel-style date, month, time, and date-time pickers demonstrate different ways to format selected values.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Time selection** Separate scrollable wheels for the hour, minute, and AM/PM. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Date and time selection** Separate scrollable wheels for the date, hour, minute, and AM/PM. The current date is labeled `Today`; other dates display an abbreviated weekday, month, and day.
- **Input behavior** Each picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Scrolling behavior** The selected values appear in a central selection area, while neighboring values are visually subdued. Users scroll vertically through each wheel to change the selection.
- **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: ['date']
}
```

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

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

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

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

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

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

```js
{
    controls: ['date'],
    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: ['date', 'time']
}
```

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

## API used in this demo

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

## Code

### JS

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

var now = new Date();

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

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

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

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

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

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

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

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

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

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

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

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

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

mobiscroll.datepicker('#demo-datetime-day', {
  controls: ['date', '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

- Fourteen independent input-triggered `Datepicker` instances, each pre-filled on load via `onInit: (event, inst) => inst.setVal(now, true)` so every example shows a populated, formatted value without user interaction.
- **Date examples** (`controls: ['date']`) vary only `dateFormat`: default (unset), `'DD.MM.YYYY'` (separator), `'MMMM'` (month only), `'D MMMM YYYY'` (full month name), `'MM/YYYY'` (month & year), `'DDD DD MMM, YYYY'` (weekday + abbreviated month), `'YYYY-MM-DD'` (ATOM), `'DDD, DD MMM YYYY'` (COOKIE).
- **Time examples** (`controls: ['time']`) vary only `timeFormat`: default (unset), `'hh:mm A'` (12-hour), `'HH:mm'` (24-hour), `'HH:mm:ss'` (24-hour with seconds).
- **Date & time examples** (`controls: ['date', 'time']`) show the default combined format (both unset) and a custom combination: `dateFormat: 'DDD D MMM, YYYY'` with `timeFormat: 'H:mm'`, plus `dateWheels: '|DDD D MMM, YYYY|'` to make the wheel display match the custom `dateFormat` - `dateWheels` only needs to be set when the wheel layout should mirror a non-default `dateFormat`/`timeFormat`; the input-returned value itself is governed purely by `dateFormat`/`timeFormat`.
- `dateFormat`/`timeFormat` control what value the input displays/returns after selection; `dateWheels`/`timeWheels` independently control which wheels are rendered and their per-wheel format - setting one does not require setting the other unless the wheel layout needs to diverge from (or explicitly match) the return format.
- When `dateFormat`/`timeFormat` are not explicitly set, the picker falls back to the active locale's default formats.

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

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

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

## Related demos

- Previous: [Date types](https://demo.mobiscroll.com/javascript/datetime/date-object-ISO-8601-moment.md) - Javascript Date picker for mobile & desktop supporting data types: javascript date object, ISO 8601 strings and moment.js objects.
- Next: [Credit card expiration](https://demo.mobiscroll.com/javascript/datetime/month-year-picker.md) - Javascript credit card expiration date select. Set up the date picker with month/year configuration.