HelpBot Assistant

How can I help you?

Strict mode in React Timepicker component

21 Feb 202611 minutes to read

The strictMode property enforces validation for time entry within the specified min/max range. When enabled:

  • Invalid time values revert to the previously valid value
  • Out-of-range values adjust to the nearest boundary (min or max)

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.

[Class-component]

// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component {
    // initialize the min and max time value
    minTime = new Date('8/3/2017 10:00 AM');
    maxTime = new Date('8/3/2017 4:00 PM');
    time = new Date('8/3/2017 8:00 PM');
    render() {
        return <TimePickerComponent id="timepicker" value={this.time} placeholder="Select a Time" min={this.minTime} max={this.maxTime} strictMode={true}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('timer'));
// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

// enable ripple effect
enableRipple(true);

export default class App extends React.Component<{}, {}> {

    // initialize the min and max time value
    private minTime: Date = new Date('8/3/2017 10:00 AM');
    private maxTime: Date = new Date('8/3/2017 4:00 PM');
    private time: Date = new Date('8/3/2017 8:00 PM');

    public render() {
        return <TimePickerComponent id="timepicker" value={this.time} placeholder="Select a Time" min={this.minTime} max={this.maxTime} strictMode={true} />
    }
};
ReactDOM.render(<App />, document.getElementById('timer'));

[Functional-component]

// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
function App() {
    // initialize the min and max time value
    const minTime = new Date('8/3/2017 10:00 AM');
    const maxTime = new Date('8/3/2017 4:00 PM');
    const time = new Date('8/3/2017 8:00 PM');
    return <TimePickerComponent id="timepicker" value={time} placeholder="Select a Time" min={minTime} max={maxTime} strictMode={true}/>;
}
;
ReactDOM.render(<App />, document.getElementById('timer'));
// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

// enable ripple effect
enableRipple(true);

function App(){

    // initialize the min and max time value
    const minTime: Date = new Date('8/3/2017 10:00 AM');
    const maxTime: Date = new Date('8/3/2017 4:00 PM');
    const time: Date = new Date('8/3/2017 8:00 PM');

    return <TimePickerComponent id="timepicker" value={time} placeholder="Select a Time" min={minTime} max={maxTime} strictMode={true} />

};
ReactDOM.render(<App />, document.getElementById('timer'));

Default Behavior (strictMode = false)

By default, the TimePicker operates with strictMode set to false, which allows entry of invalid or out-of-range times. When this occurs:

  • Out-of-range values: Set to the out-of-range time with an error class applied
  • Invalid values: Set to null with an error class applied to indicate validation failure

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.

[Class-component]

// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
export default class App extends React.Component {
    // initialize the min and max time value
    minTime = new Date('8/3/2017 10:00 AM');
    maxTime = new Date('8/3/2017 4:00 PM');
    time = new Date('8/3/2017 8:00 PM');
    render() {
        return <TimePickerComponent id="timepicker" value={this.time} placeholder="Select a Time" min={this.minTime} max={this.maxTime} strictMode={false}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('timer'));
// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

// enable ripple effect
enableRipple(true);

export default class App extends React.Component<{}, {}> {

    // initialize the min and max time value
    private minTime: Date = new Date('8/3/2017 10:00 AM');
    private maxTime: Date = new Date('8/3/2017 4:00 PM');
    private time: Date = new Date('8/3/2017 8:00 PM');

    public render() {
        return <TimePickerComponent id="timepicker" value={this.time} placeholder="Select a Time" min={this.minTime} max={this.maxTime} strictMode={false} />
    }
};
ReactDOM.render(<App />, document.getElementById('timer'));

[Functional-component]

// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
// enable ripple effect
enableRipple(true);
function App() {
    // initialize the min and max time value
    const minTime = new Date('8/3/2017 10:00 AM');
    const maxTime = new Date('8/3/2017 4:00 PM');
    const time = new Date('8/3/2017 8:00 PM');
    return <TimePickerComponent id="timepicker" value={time} placeholder="Select a Time" min={minTime} max={maxTime} strictMode={false}/>;
}
;
ReactDOM.render(<App />, document.getElementById('timer'));
// import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
// import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

// enable ripple effect
enableRipple(true);

function App() {

    // initialize the min and max time value
    const minTime: Date = new Date('8/3/2017 10:00 AM');
    const maxTime: Date = new Date('8/3/2017 4:00 PM');
    const time: Date = new Date('8/3/2017 8:00 PM');

    return <TimePickerComponent id="timepicker" value={time} placeholder="Select a Time" min={minTime} max={maxTime} strictMode={false} />

};
ReactDOM.render(<App />, document.getElementById('timer'));

If the value of min or max property is changed through code behind, update the value property to set within the range.