Strict mode in EJ2 JavaScript TimePicker

4 Sep 20266 minutes to read

The strictMode is an act that allows entering only valid time value within the specified min/max
range in the textbox. If the time value is invalid, the component value sets to the previous value. If the time value is out of range, the component sets the time value to min/max value.

The following example demonstrates the TimePicker in strictMode with min/max range of 10:00 AM to 4:00 PM . It allows entering
only valid time within the specified range. When entering 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 the max value of 4:00 PM. When entering an invalid time value like 9:00 tt, the value sets to the previous value.

ej.base.enableRipple(true);
   
    var timepicker = new ej.calendars.TimePicker({
        placeholder: 'Select a time',
         strictMode: true,
    min: new Date('7/18/2017 10:00 AM'),
    max: new Date('7/18/2017 4:00 PM'),
    value: new Date('7/18/2017 3:00 PM'),
    });    
    timepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 TimePicker 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">
    <!--style reference from the TimePicker 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-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">
    <link href="style.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 type="text" id="element">
    </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 TimePicker acts in strictMode false state, that allows entering the invalid or out-of-range time in textbox.

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

ej.base.enableRipple(true);
   
    var timepicker = new ej.calendars.TimePicker({
        placeholder: 'Select a time',     
    min: new Date('7/18/2017 10:00 AM'),
    max: new Date('7/18/2017 4:00 PM'),
    value: new Date('7/18/2017 3:00 PM')
    });    
    timepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 TimePicker 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">
    <!--style reference from the TimePicker 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-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">
    <link href="style.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 type="text" id="element">
    </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 property is changed through code, update the value property to set within the range.