<?php
require_once '../lib/Kendo/Autoload.php';
?>
<div class="demo-section k-content">
    <h4>Start time</h4>
<?php
$start = new \Kendo\UI\TimePicker('start');

$start->value('8:00 AM')
      ->change('startChange')
      ->attr('style', 'width: 100%');

echo $start->render();
?>
    <h4 style="margin-top: 2em;">End time</h4>
<?php
$end = new \Kendo\UI\TimePicker('end');

$end->value('8:30 AM');
$end->attr('style', 'width: 100%');

echo $end->render();
?>
</div>
<script>
    var start, end;

    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);
        }
    }
    $(document).ready(function() {
        start = $("#start").data("kendoTimePicker");

        end = $("#end").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>