Strict Mode in EJ2 JavaScript DatePicker

4 Sep 20266 minutes to read

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

The following example demonstrates the DatePicker in strictMode with min/max range of 5th to 25th in a month of May. Here, it allows entering only the valid date within the specified range. When trying to enter the out-of-range value as like 28th of May, then the value will be set to the max date of 25th May, since the value 28th is greater than the max value of 25th. Or else if trying to enter the invalid date, then the value will stay with the previous value.

var datepicker = new ej.calendars.DatePicker({
        placeholder: 'Choose a date',
              // sets the value
        value: new Date('27/10/2017'),
                //sets the min
         min: new Date('5/5/2017'),
                //sets the max
         max: new Date('5/25/2017'),
                // sets the format
        format: 'dd/MM/yyyy',
    });
    datepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DatePicker 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">
    <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-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 DatePicker acts in strictMode false state, that allows entering the invalid or out-of-range date in textbox.

If the date is out-of-range or invalid, then the model value will be set to out of range date value or null respectively with the highlighted error class to indicate that the date 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 date value, then the model value will be set to out of range date value or null respectively with the highlighted error class to indicate that the date is out of range or invalid.

var datepicker = new ej.calendars.DatePicker({
        placeholder: 'Choose a date',
              // sets the value
        value: new Date('27/10/2017'),
                //sets the min
         min: new Date('5/5/2017'),
                //sets the max
         max: new Date('5/25/2017'),
                // sets the format
        format: 'dd/MM/yyyy',
    });
    datepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DatePicker 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">
    <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-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.