Customization

28 Jun 20172 minutes to read

Rounded Corner

e-showRoundedCorner property is used to display the TimePicker control with rounded corners. By default, showRoundedCorner is in disabled state.

HTML View Section

HTML

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

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.

Height/Width

You can use e-height and e-width property to customize TimePicker width and height.

HTML View Section

HTML

<input id="timepicker" ej-timepicker e-height="height" e-width="width"/>

Controller Section

JAVASCRIPT

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

Run the above code to render the following output.

PopupHeight and PopupWidth

You can use e-popupHeight and e-popupWidth property to customize TimePicker popup width and height.

HTML View Section

HTML

<input id="timepicker" ej-timepicker e-popupHeight="popupHeight" e-popupWidth="popupWidth"/>

Controller Section

JAVASCRIPT

<script type="text/javascript">
            angular.module("TimeCtrl", ['ejangular']).controller("TimeCtrller", function ($scope) {
        //set popup height and popup width
                $scope.popupHeight=200,
                $scope.popupWidth=150
                    });
        </script>

Run the above code to render the following output.