Strict Mode in EJ2 JavaScript DateTime Picker

4 Sep 20266 minutes to read

The strictMode is an act, that allows entering only the valid date and time within the specified min/max range in textbox. If the input entered is invalid, then the component will stay with the previous value. Else, if the date and time is
out of range, then the component will set the date to the min/max value.

The following example demonstrates the DateTime Picker in strictMode with min/max range of 5/5/2019 2:00 AM to 5/25/2019 2:00 AM. Here, it allows entering only the valid date and time within the specified range. When trying to enter the out-of-range value as
like 5/28/2019, then the value will be set to the max value as 5/25/2019 2:00 AM, since the value 28 is greater than the max value
of 25. Or else if trying to enter the invalid date, then the value will stay with the previous value.

var datetimepickerObject = new ej.calendars.DateTimePicker({
    // sets the value
    value: new Date('5/25/2017 4:00 PM'),
    //sets the min
    min: new Date('5/5/2017 2:00 PM'),
    //sets the max
    max: new Date('5/25/2017 3:00 PM'),
    // sets the placeholder
    placeholder: 'Select a date and time'
    });
    datetimepickerObject.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DateTimePicker control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <!--style reference from the DateTimePicker component-->
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <input id="element" type="text">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

By default, the DateTime Picker acts in strictMode false state, that allows entering the invalid or out-of-range datetime in textbox.

If the datetime is out-of-range or invalid, then the model value will be set to out of range datetime value or null respectively with the highlighted error class to indicate that the datetime is out of range or invalid.

The following example demonstrates the strictMode as false. Here, it allows entering the valid or invalid value in textbox. When entering an out-of-range or invalid datetime value, then the model value will be set to out of range datetime value or null respectively with the highlighted error class to indicate that the datetime is out of range or invalid.

var datetimepickerObject = new ej.calendars.DateTimePicker({
    // sets the value
    value: new Date('5/25/2017 4:00 PM'),
    //sets the min
    min: new Date('5/5/2017 2:00 PM'),
    //sets the max
    max: new Date('5/25/2017 3:00 PM'),
    // sets the placeholder
    placeholder: 'Select a date and time'
    });
    datetimepickerObject.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DateTimePicker control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <!--style reference from the DateTimePicker component-->
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <input id="element" type="text">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

If the value of the min or max properties is changed through code, then the value property has to be updated to be set within the range.