Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <link rel="stylesheet" href="styles/kendo.common.min.css" />
- <link rel="stylesheet" href="styles/kendo.default.min.css" />
- <link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
- <link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
- <script src="js/jquery.min.js"></script>
- <script src="js/kendo.all.min.js"></script>
- </head>
- <body>
- <div id="example">
- <div class="demo-section k-header" style="width: 600px;">
- <label for="start">Start time:</label>
- <input id="start" value="8:00 AM" />
- <label for="end" style="margin-left:3em">End time:</label>
- <input id="end" value="8:30 AM"/>
- </div>
- <script>
- $(document).ready(function() {
- function startChange() {
- var startTime = start.value();
- if (startTime) {
- startTime = new Date(startTime);
- end.max(startTime);
- startTime.setMinutes(startTime.getMinutes() + this.options.interval);
- end.min(startTime);
- end.value(startTime);
- }
- }
- //init start timepicker
- var start = $("#start").kendoTimePicker({
- change: startChange
- }).data("kendoTimePicker");
- //init end timepicker
- var end = $("#end").kendoTimePicker().data("kendoTimePicker");
- //define min/max range
- start.min("8:00 AM");
- start.max("6:00 PM");
- //define min/max range
- end.min("8:00 AM");
- end.max("7:30 AM");
- });
- </script>
- <style scoped>
- #example .k-timepicker {
- vertical-align: middle;
- }
- #example h3 {
- clear: both;
- }
- #example .code-sample {
- width: 60%;
- float:left;
- margin-bottom: 20px;
- }
- #example .output {
- width: 24%;
- margin-left: 4%;
- float:left;
- }
- </style>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement