Date Range in Angular Calendar

31 Aug 20263 minutes to read

You can restrict the user to select a date from a specified range of dates by using the min and max properties. The min date must always be less than the max date. If min is set greater than max, the Calendar will not restrict the range correctly and may render an invalid selectable range, so ensure min is always earlier than max.

The following example allows you to select a date within a range from the 7th to the 27th day of a month. In the sample, min is set to the 7th day and max is set to the 27th day of the current month.

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



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

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
        <!--Sets the value, min and max -->
        <ejs-calendar [value]='dateValue' [min]='minDate' [max]='maxDate'></ejs-calendar>
        `
})
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, 7);
    public maxDate: Object =  new Date(this.currentYear, this.currentMonth, 27);
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

When the min or max values are changed through code-behind, keep the following in mind:

  • Update an existing value: You must update the value property so it stays within the new range.
  • Auto-correction of an out-of-range value: If the value is out of the specified date range, it is auto-corrected. If the value is less than the min date, the value property will be updated with the min value. If the value is greater than the max date, the value property will be updated with the max value.
  • Unset value: If the value is unset (null) when min or max are changed, no auto-correction occurs.