---
title: "Javascript Calendar Date Formats Example | Mobiscroll"
component: "Calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/calendar/date-object-ISO-8601-moment"
---
# Date Formats - JavaScript Calendar demo
Use a Javascript calendar date picker that accepts JS Date objects, ISO 8601 strings, and Moment.js objects. Plain JS api for usage everywhere.
- [Live demo](https://demo.mobiscroll.com/javascript/calendar/date-object-ISO-8601-moment)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/calendar/date-object-ISO-8601-moment)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/calendar/date-object-ISO-8601-moment.md), [Angular](https://demo.mobiscroll.com/angular/calendar/date-object-ISO-8601-moment.md), [React](https://demo.mobiscroll.com/react/calendar/date-object-ISO-8601-moment.md), [Vue](https://demo.mobiscroll.com/vue/calendar/date-object-ISO-8601-moment.md)
## Description
The date & time picker 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/javascript/datetime/disabled-invalid-values), [min/max](https://demo.mobiscroll.com/javascript/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/javascript/datepicker/api#opt-returnFormat) option.
## What this demo shows
- An inline date picker for selecting a date from a calendar.
- **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.
- **Current date** 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 the corresponding month.
- **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.
## 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
```js
cal = mobiscroll.datepicker('#cal', {
returnFormat: 'jsdate'
});
cal.setVal(new Date(2020, 10, 15, 10, 45));
cal.getVal(); // returns the selected date
```
### ISO date string
```js
cal = mobiscroll.datepicker('#cal', {
returnFormat: 'iso8601'
});
cal.setVal('2020-05-20T12:30:00');
cal.getVal(); // returns the selected date
```
### Moment.js object
```js
cal = mobiscroll.datepicker('#cal', {
returnFormat: 'moment'
});
cal.setVal(moment([2020, 2, 6, 15, 30]));
cal.getVal(); // returns the selected date
```
## 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
- [`onChange`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onChange) - event
- [`returnFormat`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-returnFormat) - option
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
var dateInstance = mobiscroll.datepicker('#demo-date', {
controls: ['calendar'],
onChange: function (event, inst) {
updateValue('returnVal', inst);
},
});
var isoInstance = mobiscroll.datepicker('#demo-iso', {
controls: ['calendar'],
returnFormat: 'iso8601',
onChange: function (event, inst) {
updateValue('returnISO', inst);
},
});
var momentInstance = mobiscroll.datepicker('#demo-moment', {
returnFormat: 'moment',
onChange: function (event, inst) {
updateValue('returnMoment', inst);
},
});
document.getElementById('setDate').addEventListener(
'click',
function () {
dateInstance.setVal(new Date(2020, 10, 15, 10, 45), true);
updateValue('returnVal', dateInstance);
},
false,
);
document.getElementById('setISO').addEventListener(
'click',
function () {
isoInstance.setVal('2020-05-20T12:30:00', true);
updateValue('returnISO', isoInstance);
},
false,
);
document.getElementById('setMoment').addEventListener(
'click',
function () {
// Make sure that moment js is loaded
momentInstance.setVal(moment([2020, 2, 6, 15, 30]), true);
updateValue('returnMoment', momentInstance);
},
false,
);
function updateValue(id, inst) {
setTimeout(function () {
if (id == 'returnMoment') {
document.getElementById(id).innerHTML = inst.getVal().format();
} else {
document.getElementById(id).innerHTML = inst.getVal();
}
});
}
```
### HTML
```html
Return value:
Return value:
Return value:
```
## Implementation notes
- Use `controls: ['calendar']` and `display: 'inline'` - a single calendar instance is used across all return-format examples, not one per format.
- Set `returnFormat` to control the type the picker's value is read as and accepts: `'jsdate'` (native JS `Date`), `'iso8601'` (ISO date string, e.g. `'2020-05-20T12:30:00'`), or `'moment'` (a Moment.js object).
- JS/jQuery: keep the datepicker instance in a variable and call `setVal(value, true)` on it, with `value` in the corresponding format (e.g. `new Date(2020, 10, 15, 10, 45)`, `'2020-05-20T12:30:00'`, or `moment([2018, 3, 27, 12, 15])`), animating the calendar to the target date; read the current value back with `getVal()` (call `.format()` on it for the moment instance).
- React: manage the value in state (`useState`) and pass it via `value`/`onChange`, calling `setValue(...)` in the corresponding format instead of an imperative `setVal`. Angular/Vue: bind the value with `[(ngModel)]`/`v-model` and assign the corresponding format directly to the bound variable.
## 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 Range Picker with Booking Date Validation](https://demo.mobiscroll.com/javascript/calendar/range-select.md) - Build booking date inputs with a Javascript date range picker — set min/max range, custom "Check in/Check out" labels, and toggle range highlight.
- Next: [Date & Time Format Customization](https://demo.mobiscroll.com/javascript/calendar/formatting-return-values.md) - Customize how dates and times appear in Javascript date picker inputs — set custom date and time formats or inherit them from locale settings.