Check out example codes for "ejtimepicker knockout". It will help you in understanding the concepts better.

Code Example 1

<html>
<head>
    <title>Essential Studio for JavaScript : Timepicker Knockout</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/18.1.0.42/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/knockout.min.js"></script>
    <script src="http://cdn.syncfusion.com/18.1.0.42/js/web/ej.web.all.min.js"></script>
    <script src="http://cdn.syncfusion.com/18.1.0.42/js/common/ej.unobtrusive.min.js"></script>
    <script src="http://cdn.syncfusion.com/18.1.0.42/js/common/ej.widget.ko.min.js"></script>
    <!--Add 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:timePickerValue }" />
                    </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: timePickerValue" />
                        </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
            timePickerValue: 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>
    <style>
        .col-md-3 {
            padding-bottom: 5px;
        }

        .cols-sample-area {
            width: 200px;
            height: 80px;
            float: left;
        }
    </style>
</body>
</html>

Learn ReactJs, React Native from akashmittal.com