All Components

Integration with JSON

Generally, the data which is received from the server is serialized in a JSON format.

The date object in JSON is an ISO8601-formatted date string. For more details, refer to the documentation on the JSON.stringify method. On the other hand, the Calendar works only with JavaScript Date instances.

To bind the Calendar to dates which are serialized as strings, handle the parsing process:

  1. Convert the JSON date strings into valid JavaScript Date objects by using the IntlService or any other suitable Date parser.
  2. Define the value input property of the component—the same approach applies to reactive and template-driven forms.
  3. Wire the valueChange output property of the Calendar to get the selected Date value.

The following example demonstrates how to set the value of the Calendar.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

export interface JsonModel {
   birthDate: string;

export interface User {
   birthDate: Date;

    selector: 'my-app',
    template: `
      <form #form="ngForm">
           <div class="example-config">
               <p>Form model: {{ user | json }}</p>
               <p>Model: {{ output }}</p>
               Select Birthdate:
export class AppComponent implements OnInit {
   public user: User;

   // Parse JSON data
   public model: JsonModel = JSON.parse('{ "birthDate": "2017-06-30" }');

   // Stringify model for presentational purposes
   public output: string = JSON.stringify(this.model);

   constructor(private intl: IntlService) {}

   public ngOnInit() {
       this.user = this.parse(this.model);

   public handleChange(value: Date) {
       // Update the JSON birthDate string date
       this.model.birthDate = this.intl.formatDate(value, 'yyyy-MM-dd');

       this.output = JSON.stringify(this.model);

   // A simple method for the string-to-date conversion
   private parse(json) {
       Object.keys(json).map(key => {
           const date = new Date(json[key]);
           if (!isNaN(date.getTime())) { json[key] = date; }

       return json;
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IntlModule } from '@progress/kendo-angular-intl';
import { HttpModule } from '@angular/http';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

import 'hammerjs';

import { AppComponent } from './app.component';

  imports:      [ FormsModule, BrowserModule, BrowserAnimationsModule, IntlModule, HttpModule, DateInputsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';


const platform = platformBrowserDynamic();
In this article