Time range in Angular Timepicker component
27 Apr 20242 minutes to read
TimePicker provides an option to select a time value within a specified range by using the min
and max
properties. The min value should always be lesser than the max value.
When the min and max properties are configured and the selected time value is out-of-range or invalid, then the model value will be set to out of range
time value or null
respectively with highlighted error
class to indicates the time is out of range or invalid.
The value property depends on the min/max with respect to strictMode
property.
The following example allows you to select a time value within a range of 9:00 AM
to 11:30 AM
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
//enable ripple style
enableRipple(true);
@Component({
imports: [
TimePickerModule
],
standalone: true,
selector: 'app-root',
template: `
<ejs-timepicker [value]='dateValue' [min]='minDate' [max]='maxDate'></ejs-timepicker>
`
})
export class AppComponent {
public minDate: Date = new Date('8/3/2017 9:00 AM');
public maxDate: Date = new Date('8/3/2017 11:30 AM');
public dateValue: Date = new Date('8/3/2017 10:00 AM');
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
property is changed through code behind you have to update thevalue
property to set within the range.