Behavior Settings

28 Jun 20176 minutes to read

Set value

You can use e-value property to set default time for the TimePicker. TimePicker value API is two way binding enabled API that can be accessed using “e-value attribute”. This API value could be set either as a Time object or a formatted string.

HTML View Section

HTML

<input id="timepicker" ej-timepicker e-value="value" />

Controller Section

JAVASCRIPT

<script type="text/javascript">
           angular.module("TimeCtrl", ['ejangular']).controller("TimeCtrller", function ($scope) {
           // Set default Value to TimePicker
             $scope.value = "10:00 AM"
                    })
        </script>

Run the above code to render the following output.

Time Range

Time selection can be restricted using our offered APIs e-minTime and e-maxTime, which is used to set the minimum time that can be selected and minimum time range that can be chosen. These APIs value can be updated directly in inline, else via scope also.

e-minTime: Specifies the minimum time to be picked in TimePicker by disabling below time of minTime.

e-maxTime: Specifies the maximum time to be picked in TimePicker by disabling above time of maxTime.

HTML View Section

HTML

<input id="timepicker" ej-timepicker e-minTime="minTime" e-maxTime="maxTime"/>

Controller Section

JAVASCRIPT

<script type="text/javascript">
            angular.module("TimeCtrl", ['ejangular']).controller("TimeCtrller", function ($scope) {
                $scope.minTime= "9:00 AM",
                $scope.maxTime= "9:00 PM"
            });
        </script>

Run the above code to render the following output.

Enable/Disable

TimePicker widget provides you an option to enable /disable the widget. You can disable the TimePicker by setting the “e-enabled” property value as false. Disabling the controls will unbind the all UI interactions of components.

Check with the below code for disabling the component,

HTML View Section

HTML

<input id="timepicker" ej-timepicker e-value="value" e-enabled="true" />

Controller Section

JAVASCRIPT

<script type="text/javascript">
            angular.module("TimeCtrl", ['ejangular']).controller("TimeCtrller", function ($scope) {
                $scope.value = "12:00 AM";
            });
        </script>

Run the above code to render the following output.

HTML View Section

HTML

<input id="timepicker" ej-timepicker e-enabled="false" />

Controller Section

JAVASCRIPT

<script type="text/javascript">
            angular.module("TimeCtrl", ['ejangular']).controller("TimeCtrller", function ($scope) {
            });
        </script>

Run the above code to render the following output.

ReadOnly

TimePicker widget provides e-readOnly property to disable editing in the control. Therefore, you can only read the value set to TimePicker and cannot modify it.

HTML View Section

HTML

<input id="timepicker" ej-timepicker e-readOnly="true" />

Controller Section

JAVASCRIPT

<script type="text/javascript">
            angular.module("TimeCtrl", ['ejangular']).controller("TimeCtrller", function ($scope) {
                        });
        </script>

Interval

TimePicker widget provides you an option to change the intervals between the of the hours/ minutes /seconds in a popup. TimePicker component have below available options to change the intervals based on application needs.

Sl.No	Property Name	Description	Default Value
1.	e-hourInterval	Sets the step value for increment an hour value through arrow keys or mouse scroll.	1
2.	e-minutesInterval	Sets the step value for increment the minute value through arrow keys or mouse scroll.	1
3.	e-secondsInterval	Sets the step value for increment the seconds value through arrow keys or mouse scroll.	1

HTML View Section

HTML

<input id="timepicker" ej-timepicker e-value="value" e-timeFormat="timeFormat" e-hourinterval="hourinterval" e-minutesinterval="minutesinterval" e-secondsinterval="secondsinterval"/>

Controller Section

JAVASCRIPT

<script type="text/javascript">
            angular.module("TimeCtrl", ['ejangular']).controller("TimeCtrller", function ($scope) {
                $scope.value = "10:00:00 AM",
                $scope.timeFormat="h:mm:ss tt",
                $scope.hourinterval=2,
                $scope.minutesinterval=40,
                $scope.secondsinterval=30
                
            });
        </script>

Run the above code to render the following output.