You can restrict the user to select the date
from the specified range of dates by using the
min
and
max
properties.
When the min and max properties are configured and the selected date value is out-of-range or
invalid, then the model value will be set to out of range
date value or null
respectively
with highlighted error
class to indicates the date is out of range or invalid.
The below example demonstrates the Calendar to select a date within a range from 1 to 27 in a month.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ejs-datepicker [value]='dateValue' [min]='minDate' [max]='maxDate'></ejs-datepicker>
`
})
export class AppComponent {
public today: Date = new Date();
public currentYear: number = this.today.getFullYear();
public currentMonth: number = this.today.getMonth();
public currentDay: number = this.today.getDate();
public dateValue: Object = new Date(new Date().setDate(14));
public minDate: Object = new Date(this.currentYear, this.currentMonth, 1);
public maxDate: Object = new Date(this.currentYear, this.currentMonth, 27);
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DatePickerModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);