Range selection in Angular Daterangepicker component
27 Apr 20246 minutes to read
Range selection in a DateRangePicker can be made-to-order with desire restrictions based on application needs.
Restrict the range within a range
You can restrict the minimum and maximum date that can be allowed as start date, end date in a range selection with help of min
, max
properties.
-
min
– sets the minimum date that can be selected as startDate. -
max
– sets the maximum date that can be selected as endDate
In below sample, you can select a range from 15th day of this month to 15th day of next month.
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule,
DateRangePickerModule
],
standalone: true,
selector: 'app-root',
styleUrls: ['./index.css'],
template: `<ejs-daterangepicker [min]='minDate' [max]='maxDate' placeholder='Select a range'></ejs-daterangepicker>`
})
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 minDate: Object = new Date(this.currentYear, this.currentMonth, 15);
public maxDate: Object = new Date(this.currentYear, this.currentMonth+1, 15);
constructor() {
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
If the value of
min
ormax
properties changed through code behind, then you have to update thestart date
,end date
property to set within the range. Or else , if thestart
andend
date is out of specified date range, a validation error class will be appended to the input element. IfstrictMode
is enabled, and both the start, end date is lesser than the min date then start and end date will be updated withmin
date. If both the start and end date is higher than the max date then start and end date will be updated withmax
date. Or else, if startDate is less thanmin
date, startDate will be updated withmin
date or if endDate is greater thanmax
date, endDate will be updated with themax
date.
Range span
Span between ranges can be limited in order to avoid excess or less days selection towards the required days in a range.
In this, minimum and maximum span that can be allowed within the date range can be customized by minDays
, maxDays
properties.
-
minDays
- Sets the minimum number of days between start date and end date. -
maxDays
- Sets the maximum number of days between start date and end date.
In below sample, the range selection should be greater than 3 days and less than 8 days else it won’t set.
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule,
DateRangePickerModule
],
standalone: true,
selector: 'app-root',
styleUrls: ['./index.css'],
template: `<ejs-daterangepicker [minDays]='minDays' [maxDays]='maxDays' placeholder='Select a range'></ejs-daterangepicker>`
})
export class AppComponent {
public minDays: Number = 4;
public maxDays: Number = 7;
constructor() {
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Strict mode
DateRangePicker provides the option to limit the user towards entering the valid date only.
With strict mode, you can set only valid selection. Also, If any invalid range is specified then the date range value will reset to previous value.
This restriction can be availed by enabling the strictMode
property.
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule,
DateRangePickerModule
],
standalone: true,
selector: 'app-root',
styleUrls: ['./index.css'],
template: `<ejs-daterangepicker strictMode='true' placeholder='Select a range'></ejs-daterangepicker>`
})
export class AppComponent {
constructor() {
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));