HelpBot Assistant

How can I help you?

Strict mode in React Datepicker component

21 Feb 202611 minutes to read

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

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

The following example demonstrates the DatePicker in strictMode with a range from the 5th to the 25th of May. When attempting to enter the 28th (exceeding the maximum), the component sets the value to the maximum date (25th). If an invalid date is entered, the component preserves the previous selection.

[Class-component]

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with strictMode property
export default class App extends React.Component {
    // sets the value
    dateValue = new Date('5/28/2017');
    // sets the min
    minDate = new Date('5/5/2017');
    // sets the max
    maxDate = new Date('5/25/2017');
    disable = true;
    render() {
        return <DatePickerComponent id="datepicker" strictMode={this.disable} format="dd/MM/yyyy" value={this.dateValue} min={this.minDate} max={this.maxDate} placeholder="Enter date"/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with strictMode property
export default class App extends React.Component<{}, {}> {

     // sets the value
    private dateValue:Date= new Date('5/28/2017');
    // sets the min
    private minDate:Date= new Date('5/5/2017');
    // sets the max
    private maxDate:Date= new Date('5/25/2017');
    private disable: boolean = true;

    public render() {
        return <DatePickerComponent id="datepicker" strictMode={this.disable} format="dd/MM/yyyy" value={this.dateValue} min={this.minDate} max={this.maxDate}  placeholder="Enter date" />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with strictMode property
function App() {
    // sets the value
    const dateValue = new Date('5/28/2017');
    // sets the min
    const minDate = new Date('5/5/2017');
    // sets the max
    const maxDate = new Date('5/25/2017');
    const disable = true;
    return <DatePickerComponent id="datepicker" strictMode={disable} format="dd/MM/yyyy" value={dateValue} min={minDate} max={maxDate} placeholder="Enter date"/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with strictMode property
function App() {
     // sets the value
    const dateValue:Date= new Date('5/28/2017');
    // sets the min
    const minDate:Date= new Date('5/5/2017');
    // sets the max
    const maxDate:Date= new Date('5/25/2017');
    const disable: boolean = true;

    return <DatePickerComponent id="datepicker" strictMode={disable} format="dd/MM/yyyy" value={dateValue} min={minDate} max={maxDate}  placeholder="Enter date" />
};
ReactDOM.render(<App />, document.getElementById('element'));

By default, strictMode is disabled (false), allowing users to enter invalid or out-of-range dates in the input field. When an invalid or out-of-range date 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 the strictMode as false. Here, it allows to enter the valid or invalid value in textbox. If you are entering out-of-range or invalid date value, then the model value will be set to out of range date value or null respectively with highlighted error class to indicates the date is out of range or invalid.

[Class-component]

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with strictMode property
export default class App extends React.Component {
    // sets the value
    dateValue = new Date('5/28/2017');
    // sets the min
    minDate = new Date('5/5/2017');
    // sets the max
    maxDate = new Date('5/25/2017');
    disable = false;
    render() {
        return <DatePickerComponent id="datepicker" strictMode={this.disable} format="dd/MM/yyyy" value={this.dateValue} min={this.minDate} max={this.maxDate} placeholder="Enter date"/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with strictMode property
export default class App extends React.Component<{}, {}> {

    // sets the value
    private dateValue:Date= new Date('5/28/2017');
    // sets the min
    private minDate:Date= new Date('5/5/2017');
    // sets the max
    private maxDate:Date= new Date('5/25/2017');
    private disable: boolean = false;

    public render() {
        return <DatePickerComponent id="datepicker" strictMode={this.disable} format="dd/MM/yyyy" value={this.dateValue} min={this.minDate} max={this.maxDate}   placeholder="Enter date" />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with strictMode property
function App() {
    // sets the value
    const dateValue = new Date('5/28/2017');
    // sets the min
    const minDate = new Date('5/5/2017');
    // sets the max
    const maxDate = new Date('5/25/2017');
    const disable = false;
    return <DatePickerComponent id="datepicker" strictMode={disable} format="dd/MM/yyyy" value={dateValue} min={minDate} max={maxDate} placeholder="Enter date"/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with strictMode property
function App() {
    // sets the value
    const dateValue:Date= new Date('5/28/2017');
    // sets the min
    const minDate:Date= new Date('5/5/2017');
    // sets the max
    const maxDate:Date= new Date('5/25/2017');
    const disable: boolean = false;

    return <DatePickerComponent id="datepicker" strictMode={disable} format="dd/MM/yyyy" value={dateValue} min={minDate} max={maxDate}   placeholder="Enter date" />
};
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.