HelpBot Assistant

How can I help you?

Strict mode in React Datetimepicker component

21 Feb 20269 minutes to read

When strictMode is enabled, the DateTimePicker validates user input against specified min/max constraints. The following behaviors apply:

  • Valid date-times within range: Accepted and applied
  • Out-of-range date-times: Automatically adjusted to the nearest boundary (min or max)
  • Invalid date-times: Rejected; the component retains the previous value

The following example demonstrates the DateTimePicker in strictMode with a range from 5/5/2019 2:00 AM to 5/25/2019 2:00 AM. When attempting to enter 5/28/2019 (exceeding the maximum), the component sets the value to the maximum date-time (5/25/2019 2:00 AM). If an invalid date-time is entered, the component preserves the previous selection.

[Class-component]

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    minDate = new Date('5/5/2019 2:00 AM');
    maxDate = new Date('5/25/2019 2:00 AM');
    dateValue = new Date('5/28/2019 2:00 AM');
    enable = true;
    render() {
        return <DateTimePickerComponent id="datetimepicker" value={this.dateValue} min={this.minDate} strictMode={this.enable} max={this.maxDate}/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

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

    private minDate: Date =new Date('5/5/2019 2:00 AM');
    private  maxDate: Date =new Date('5/25/2019 2:00 AM');
    private  dateValue: Date = new Date('5/28/2019 2:00 AM');
    private  enable: boolean = true;

    public render() {
        return <DateTimePickerComponent id="datetimepicker" value={this.dateValue} min={this.minDate} strictMode={this.enable} max={this.maxDate} />;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    const minDate = new Date('5/5/2019 2:00 AM');
    const maxDate = new Date('5/25/2019 2:00 AM');
    const dateValue = new Date('5/28/2019 2:00 AM');
    const enable = true;
    return <DateTimePickerComponent id="datetimepicker" value={dateValue} min={minDate} strictMode={enable} max={maxDate}/>;
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {

    const minDate: Date =new Date('5/5/2019 2:00 AM');
    const maxDate: Date =new Date('5/25/2019 2:00 AM');
    const dateValue: Date = new Date('5/28/2019 2:00 AM');
    const enable: boolean = true;
    return <DateTimePickerComponent id="datetimepicker" value={dateValue} min={minDate} strictMode={enable} max={maxDate} />;
}
ReactDOM.render(<App />, document.getElementById('element'));

By default, strictMode is disabled (false), allowing users to enter invalid or out-of-range date-times in the input field. When an invalid or out-of-range date-time is entered:

  • The model value is set to the out-of-range value or null respectively
  • The input is highlighted with an error class to indicate the validation failure

The following example demonstrates strictMode as false, where out-of-range or invalid date-times are flagged with the error class but allowed:

[Class-component]

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    minDate = new Date('5/5/2019 2:00 AM');
    maxDate = new Date('5/25/2019 2:00 AM');
    dateValue = new Date('5/28/2019 2:00 AM');
    enable = false;
    render() {
        return <DateTimePickerComponent id="datetimepicker" value={this.dateValue} min={this.minDate} strictMode={this.enable} max={this.maxDate} placeholder='Select a date and time'/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

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

    private minDate: Date =new Date('5/5/2019 2:00 AM');
    private  maxDate: Date =new Date('5/25/2019 2:00 AM');
    private  dateValue: Date = new Date('5/28/2019 2:00 AM');
    private  enable: boolean = false;

    public render() {
        return <DateTimePickerComponent id="datetimepicker" value={this.dateValue} min={this.minDate} strictMode={this.enable} max={this.maxDate} placeholder='Select a date and time' />;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    const minDate = new Date('5/5/2019 2:00 AM');
    const maxDate = new Date('5/25/2019 2:00 AM');
    const dateValue = new Date('5/28/2019 2:00 AM');
    const enable = false;
    return <DateTimePickerComponent id="datetimepicker" value={dateValue} min={minDate} strictMode={enable} max={maxDate} placeholder='Select a date and time'/>;
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {

    const minDate: Date =new Date('5/5/2019 2:00 AM');
    const maxDate: Date =new Date('5/25/2019 2:00 AM');
    const dateValue: Date = new Date('5/28/2019 2:00 AM');
    const enable: boolean = false;
    return <DateTimePickerComponent id="datetimepicker" value={dateValue} min={minDate} strictMode={enable} max={maxDate} placeholder='Select a date and time' />;
}
ReactDOM.render(<App />, document.getElementById('element'));

 If the value of min or max properties changed through code behind, then you have to update the value property to set within the range.