Having trouble getting help?
Contact Support
Contact Support
Date selection in Angular Calendar component
27 Apr 20242 minutes to read
You can set or get the currently selected date of the calendar using the value
property.
The following example demonstrates the Calendar with selected date and change
event to display the selected date value.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';
@Component({
imports: [
CalendarModule //declaration of ej2-angular-calendars module into NgModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-calendar #ejCalendar [value]='dateValue' (change)='onChange($event)'></ejs-calendar>
<p id=output style="margin-left:18%; margin-left: 31%;word-wrap: break-word;"></p>`
})
export class AppComponent {
@ViewChild('ejCalendar') ejCalendar: any;
public dateValue: Date = new Date();
constructor() {
}
ngAfterViewInit(): void {
(document.getElementById('output') as HTMLElement).textContent = "" + this.ejCalendar.value;
}
onChange(args:any) {
(document.getElementById('output') as HTMLElement).textContent = "" + args.value;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));