ejtimepicker knockout
<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>