Integration

AngularJS Support

TimePicker control is availed with two types of AngularJS supports namely,

  • One way binding
  • Two way binding

One way binding refers to the process of applying scope values to all the available properties of the TimePicker control where the changes made in the control are not reflected or triggered in turn to the scope collection. This kind of binding applies to all the properties of the TimePicker control.

Two-way binding supports both the processes – it applies the scope values to the TimePicker properties as well as the changes made in the control are also reflected back and triggered within the AngularJS scope change function.

Apply the plugin property assigning to the TimePicker control element through the directive that starts with a letter “e-“.

To know more details about AngularJS binding, refer to the following link location,

http://help.syncfusion.com/js/angularjs

The following code example depicts you the way to bind data to the TimePicker control through AngularJS support.

  • html
  • <html ng-app="TimeCtrl">
        <head>
            <title>Essential Studio for JavaScript : Timepicker AngularJS</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
            <link href="[http://cdn.syncfusion.com/17.1.0.47 /js/web/flat-azure/ej.web.all.min.css](http://cdn.syncfusion.com/13.1.0.21/js/web/flat-azure/ej.web.all.min.css)" rel="stylesheet" />
            <!--scripts-->
            <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
            <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"> </script>
            <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
            <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
            <script src="[http://cdn.syncfusion.com/17.1.0.47 /js/web/ej.web.all.min.js](http://cdn.syncfusion.com/13.1.0.21/js/web/ej.web.all.min.js)"></script>
            <script src="[http://cdn.syncfusion.com/17.1.0.47 /js/web/ej.unobtrusive.min.js](http://cdn.syncfusion.com/13.1.0.21/js/web/ej.unobtrusive.min.js)"></script>
            <script src="[http://cdn.syncfusion.com/17.1.0.47 /js/ej.widget.angular.min.js](http://cdn.syncfusion.com/13.1.0.21/js/ej.widget.angular.min.js)"> </script>
        </head>
        <body ng-controller="TimePickerCtrl">
            <div class="content-container-fluid">
                <div class="row">
                    <div class="cols-sample-area">
                        <div class="frame" style="width: 30%; height: 17px;">
                            <div id="control" style="float: left;width: 45%;">
                                <input id="time" type="text" ej-timepicker e-value="timeValue" />
                                <h6><span style="font-style: italic; font-weight: normal; position: absolute; margin-top: 5px;">Note:Two Way AngularJS Support</span></h6>
                            </div>
                            <div id="binding" style=" float right;width 45%;">
                                <input id="timectrl" type="text" ej-timepicker e-value="timeValue" e-interval="10" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
            angular.module('TimeCtrl', ['ejangular'])
                   .controller('TimePickerCtrl', function ($scope) {
                       $scope.timeValue = "12:50 AM";
                   });
            </script>
            <style type="text/css" class="cssStyles">
                .control {
                    margin: 0 auto;
                    width: 136px;
                }
    
                #time_timewidget, #timectrl_timewidget {
                    width: 84%;
                }
    
                #timeValue {
                    text-indent: 10px;
                }
            </style>
        </body>
    </html>

    Run the above code to render the following output.

    KnockoutJS Support

    KnockoutJS support allows you to bind the ASPX elements against any of the available data model.

    Two types of KnockoutJS binding are supported,

    • One-way binding
    • Two-way binding

    One way binding refers to the process of applying observable values to all the available properties of the TimePicker control, where the changes made in the control are not reflected and triggered in turn to the observable collection. This kind of binding applies to all the properties of the TimePicker control.

    Two-way binding supports both the processes – it applies the observable values to the TimePicker control properties as well as the changes made in the TimePicker control are also reflected back and triggered within the observable collections.

    For more information about the KnockoutJS binding, refer to the following link location,

    http://help.syncfusion.com/js/knockoutjs

    The following example depicts the way to bind data to the TimePicker control through the KnockoutJS support that enables and populates data to the TimePicker control based on the value set to another TimePicker control.

  • html
  • <html>
    <head>
        <title>Essential Studio for JavaScript : Timepicker KnockoutJS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"  />
        <!-- Style sheet for default theme (flat azure) -->
        <link href=" [http://cdn.syncfusion.com/17.1.0.47 /js/web/flat-azure/ej.web.all.min.css](http://cdn.syncfusion.com/13.1.0.21/js/web/flat-azure/ej.web.all.min.css)" rel="stylesheet" />
        <!--scripts-->
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"> </script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"> </script>
        <script src="http://cdn.syncfusion.com/js/assets/external/knockout.min.js"></script>    
        <script src="[http://cdn.syncfusion.com/17.1.0.47 /js/web/ej.web.all.min.js](http://cdn.syncfusion.com/13.1.0.21/js/web/ej.web.all.min.js)"></script>
        <script src="[http://cdn.syncfusion.com/17.1.0.47 /js/web/ej.unobtrusive.min.js](http://cdn.syncfusion.com/13.1.0.21/js/web/ej.unobtrusive.min.js)"></script>
        <script src="[http://cdn.syncfusion.com/17.1.0.47 /js/ej.widget.ko.min.js](http://cdn.syncfusion.com/13.1.0.21/js/ej.widget.ko.min.js)"></script>
    </head>
        <!--Adds custom scripts here -->
    </head>
    <body>
        <div class="content-container-fluid">      
                <div class="row">                
                    <div class="cols-sample-area">                                  
                        <div class="frame">
                            <div class="control" style="width: 136px;">
                                 <label style="width: 130px;">Select Show Time </label>
                                 <input id="time" type="text" data-bind="ejTimePicker:{value:timeValue }"/>
                            </div>
                         </div>                    
                    </div>
                    <div id="sampleProperties">
                       <div class="prop-grid">
                          <div class="row">
                             <div class="col-md-3">Time Value</div>
                             <div class="col-md-3">
                                 <input type="text" id="timeValue" class="input ejinputtext" value="" data-bind="value: timeValue" />
                             </div>
                             <div class="col-md-3">Selected time</div>
                             <div class="col-md-3">
                                <input type="button" class="e-btn inputBtn" id="getTime" value="Get Time" />
       				         </div>
                          </div>		
                      </div>
               </div>
           </div>
        </div>
        <script type="text/javascript">
           window.viewModel = {
                //TimePicker
                timeValue: ko.observable("11:30 AM")       
            }
            $(function () {
                // Declaration
                ko.applyBindings(viewModel);
                var timeObj = $('#time').data("ejTimePicker");
                $("#getTime").click(function () {
                    alert("Selected time is : " + timeObj.getValue());
                });
                $("#sampleProperties").ejPropertiesPanel();
            });
        </script>
     </body>
    </html>

    Run the above code to render the following output.