Json data binding with timepicker in Angular Timepicker component

27 Apr 20242 minutes to read

In most of the real cases, the model data will be available with JSON format only. Here we have showcased TimePicker component by setting JSON string to value property.
In this JSON, we have used ISO formatted date string which is frequently used date format to get proper date and time value without any misreading.
Also our TimePicker component supports the ISO formatted date value, so parsed JSON value can be directly set to TimePicker model.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'



import { Component } from '@angular/core';

export interface User {
    selectedDate: Date;
}
export interface JSONUser {
    selectedDate: string;
}
@Component({
imports: [
        
        TimePickerModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
    <!-- To Render TimePicker -->
    <ejs-timepicker id="timepicker" width="240px" [(value)]='user.selectedDate' (change)='onChange($event)'></ejs-timepicker>
    <div class="valuestring">
    <b>User model</b>:  <br/>
    <br/><br/>
    <b>JSON Data</b>: <br/>
    <br/><br/>
    </div>`
})
export class AppComponent {
    public user?: User | any;
    public JSONData: JSONUser = JSON.parse('{ "selectedDate": "2018-12-18T08:56:00+00:00"}');
    public model_result: string = JSON.stringify(this.JSONData);

    public ngOnInit() {
        this.user = this.JSONData;
    }
    onChange(args: any) {
        this.JSONData.selectedDate = args.value;
        this.model_result = JSON.stringify(this.JSONData);
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));