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);