Strict mode in Angular Timepicker component
27 Apr 20244 minutes to read
The strictMode
is an act that allows you to enter only valid time value within the specified min/max range in the textbox. If the time value is invalid, the component value sets to the previous value.
If the time value is out of range, the component sets the time value to min/max value.
The following example demonstrates the TimePicker in strictMode
with min/max range of 10:00 AM
to 4:00 PM
. It allows you to enter only valid time within the specified range. If you enter the out-of-range value like 8:00 PM
, the value sets to the max time 4:00 PM
as the value 8:00 PM
is greater than max
value of 4:00 PM
. If you enter invalid time value like 9:00 tt
, the value sets to the previous value.
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]='minValue' [max]='maxValue' [strictMode]='isStrictMode'></ejs-timepicker>
`
})
export class AppComponent {
public dateValue: Date = new Date('10/8/2017 3:00 PM');
public minValue: Date = new Date('10/8/2017 10:00 AM');
public maxValue: Date = new Date('10/8/2017 4:00 PM');
public isStrictMode: boolean = true;
constructor() {
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
By default, the TimePicker act in strictMode false
state, that allows to enter the invalid or out-of-range time in textbox.
If the time 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 following example demonstrates the strictMode
as false
. Here, it allows to enter the valid or invalid value in textbox.
If you are entering the out-of-range or invalid time value, 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.
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]='minValue' [max]='maxValue' [strictMode]='isStrictMode'></ejs-timepicker>
`
})
export class AppComponent {
public dateValue: Date = new Date('10/8/2017 4:00 PM');
public minValue: Date = new Date('10/8/2017 5:00 AM');
public maxValue: Date = new Date('10/8/2017 10:00 PM');
public isStrictMode: boolean = false;
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, update thevalue
property to set within the range.