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

# Custom Date & Time Format - JavaScript Range demo

Set custom date and time display formats on the Javascript date range picker — override locale defaults per input field. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/range/formatting-return-values)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/range/formatting-return-values)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/range/formatting-return-values.md), [Angular](https://demo.mobiscroll.com/angular/range/formatting-return-values.md), [React](https://demo.mobiscroll.com/react/range/formatting-return-values.md), [Vue](https://demo.mobiscroll.com/vue/range/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 time picker wheels and change its formats with the [`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/range/localization)

## What this demo shows

- Fourteen input-based date, month, time, and date-time range pickers demonstrate different ways to format selected values.
- **Date range picker with inputs** These examples opens the range picker when the user focuses or clicks the input.
- **Input behavior** The range picker opens below the input over a darkened backdrop. Clicking outside the picker closes it. 
- **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.
- **Footer actions** The gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date range. Until a range is selected, the `Set` button remains inactive.
- **Input value** Confirming a date with `Set` displays the selected range in the input using a month, day, and year format.
- **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 date ranges 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 range values without displaying a full date range in the input.
- **Time entry** Supporting 12-hour or 24-hour time values, with optional seconds.
- **Date-time forms** Showing combined date and time range 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: 'D MMMM 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/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
- [`select`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-select) - 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 currentWeek = ['2026-10-21T00:00', '2026-10-27T00:00'];
var currentHour = ['2026-10-21T15:00', '2026-10-21T17:00'];

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

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

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

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

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

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

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

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

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

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

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

mobiscroll.datepicker('#demo-datetime-day', {
  controls: ['calendar', 'time'],
  select: 'range',
  dateFormat: 'DDD D MMM, YYYY',
  timeFormat: 'H:mm',
  dateWheels: '|DDD D MMM, YYYY|',
  onInit: function (event, inst) {
    inst.setVal(currentHour, 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 name
        <input mbsc-input id="demo-date-month" />
    </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

- Set `select: 'range'` on the `Datepicker` so it returns a start/end pair instead of a single value; when no `dateFormat`/`timeFormat` is set, the format is inherited from the active localization settings.
- Use `controls: ['calendar']` with `dateFormat` for date-only ranges: `'DD.MM.YYYY'` (numeric with separators), `'D MMMM YYYY'` (full month name), `'DDD DD MMM, YYYY'` (weekday + abbreviated month), `'YYYY-MM-DD'` (ATOM), or `'DDD, DD MMM YYYY'` (COOKIE).
- Use `controls: ['time']` with `timeFormat` for time-only ranges: `'hh:mm A'` (12-hour), `'HH:mm'` (24-hour), or `'HH:mm:ss'` (24-hour with seconds).
- Use `controls: ['calendar', 'time']` with both a `dateFormat` and `timeFormat` for combined date-and-time ranges, e.g. `timeFormat: 'HH:mm:ss'` alone, or `dateFormat: 'DDD D MMM, YYYY'` with `timeFormat: 'H:mm'`.
- Reorder or reformat the time picker wheels independently of the display format with `timeWheels`, e.g. `dateWheels: '|DDD D MMM, YYYY|'` to control how a single combined wheel renders.
- Set the initial range programmatically with `.setVal([startDate, endDate], true)` on the picker instance (the second argument suppresses the change event on init).

## 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 Formats](https://demo.mobiscroll.com/javascript/range/date-object-ISO-8601-moment.md) - Use the Javascript date range picker with JS Date, ISO 8601, or Moment.js — auto-detect input formats and configure the return format.
- Next: [Timezone Settings](https://demo.mobiscroll.com/javascript/range/setting-the-picker-timezone.md) - Set independent data and display timezones on the Javascript date range picker — configure timezone conversion with Luxon, Moment-Timezone, or Day.js.