---
title: "Angular Calendar Date Formats Example | Mobiscroll"
component: "Calendar"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/calendar/date-object-ISO-8601-moment"
---

# Date Formats - Angular Calendar demo

Use a Angular calendar date picker that accepts JS Date objects, ISO 8601 strings, and Moment.js objects.

- [Live demo](https://demo.mobiscroll.com/angular/calendar/date-object-ISO-8601-moment)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/datepicker/calendar/date-object-ISO-8601-moment)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/date-object-ISO-8601-moment.md), [jQuery](https://demo.mobiscroll.com/jquery/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/angular/datetime/disabled-invalid-values), [min/max](https://demo.mobiscroll.com/angular/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/angular/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

```html
<mbsc-datepicker
    [(ngModel)]="date"
    returnFormat="jsdate">
</mbsc-datepicker>
```

```ts
this.date = new Date(2020, 10, 15, 10, 45);
```

### ISO date string

```html
<mbsc-datepicker
    [(ngModel)]="date"
    returnFormat="iso8601">
</mbsc-datepicker>
```

```ts
this.date = '2020-05-20T12:30:00';
```

### Moment.js object

```html
<mbsc-datepicker
    [(ngModel)]="date"
    returnFormat="moment">
 </mbsc-datepicker>
```

```ts
this.date = moment([2020, 2, 6, 15, 30]);
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option
- [`returnFormat`](https://mobiscroll.com/docs/angular/datepicker/api#opt-returnFormat) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
import moment from 'moment';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
  date: Date | undefined;
  iso: string | undefined;
  momentJs: any;

  setDate(): void {
    this.date = new Date(2020, 10, 15, 10, 45);
  }

  setISO(): void {
    this.iso = '2020-05-20T12:30:00';
  }

  setMoment(): void {
    // Make sure that moment js is loaded
    this.momentJs = moment([2020, 2, 6, 15, 30]);
  }
}
```

### Template

```html
<mbsc-page>
  <div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Controlling the default value</div>
    <div class="mbsc-button-group-block">
      <mbsc-button (click)="setDate()">Set: Sun Nov 15 2020 03:24:00 GMT</mbsc-button>
    </div>
    <mbsc-datepicker [controls]="['calendar']" [(ngModel)]="date" returnFormat="jsdate" label="Date object">Date object</mbsc-datepicker>
  </div>
  <div class="mbsc-padding">Return value: {{date}}</div>

  <div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Working with Date strings</div>
    <div class="mbsc-button-group-block">
      <mbsc-button (click)="setISO()">Set: 2020-05-20T12:30:00</mbsc-button>
    </div>
    <div>
      <mbsc-datepicker [controls]="['calendar']" [(ngModel)]="iso" returnFormat="iso8601" label="ISO string"></mbsc-datepicker>
    </div>
  </div>
  <div class="mbsc-padding">Return value: {{iso}}</div>

  <div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Working with Moment JS Objects</div>
    <div class="mbsc-button-group-block">
      <mbsc-button (click)="setMoment()">Set: 2020-03-06T15:30:00+02:00</mbsc-button>
    </div>
    <div>
      <mbsc-datepicker [controls]="['calendar']" [(ngModel)]="momentJs" returnFormat="moment" label="Moment JS"></mbsc-datepicker>
    </div>
  </div>
  <div class="mbsc-padding">Return value: {{momentJs ? momentJs.format() : ''}}</div>
</mbsc-page>
```

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

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

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

## Related demos

- Previous: [Date Range Picker](https://demo.mobiscroll.com/angular/calendar/range-select.md) - Select a start/end date range from an inline Angular calendar — set custom labels, range highlighting, and min/max range for booking or reservation.
- Next: [Formatting Values](https://demo.mobiscroll.com/angular/calendar/formatting-return-values.md) - Customize how dates and times appear in Angular date picker inputs — set custom date and time formats or inherit them from locale settings.