Search results

Two-way binding in Angular DatePicker component

22 Oct 2021 / 1 minute to read

The following example demonstrates how to achieve two-way binding by binding the value to the first DatePicker component by using property binding and binding the model data using ngModel to the second DatePicker component. The value of the DatePicker will get change, when their is any change in the property value or model value.

The two-way binding can also be achieved only by using property binding or model binding in the DatePicker component.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['styles.css'],
    template: `
        <!-- two-way binding using the value binding and model binding in the DatePicker --->
        <ejs-datepicker id="fisrtdatepicker" #ejDatePicker [(value)]='value' width="230px"></ejs-datepicker>
        <ejs-datepicker id="seconddatepicker" #ejDatePickers [(ngModel)]='value' width="230px"></ejs-datepicker>
        `
})
export class AppComponent {
    value: Date;
    constructor() {
        this.value = new Date('1/1/2020');
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule,
        DatePickerModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 530px;
    margin: 0 auto;
}

#fisrtdatepicker, #seconddatepicker {
    margin-right:30px;
}

/* span.e-today {
    margin-left: 62px;
}

.e-calendar .e-footer {
    height: 27px;
}

span.e-today,
span.e-clear {
    color: #ff4081;
}

span.e-clear {
    float: right;
    margin-right: 20px;
}

.e-calendar .e-footer {
    padding-bottom: 8px;
} */