<?php

require_once '../lib/Kendo/Autoload.php';
?>

<?php
$start = new \Kendo\UI\DateTimePicker('start');
$start->value(new DateTime('now', new DateTimeZone('UTC')))
      ->parseFormats(array('MM/dd/yyyy'))
      ->change('startChange')
      ->attr('style', 'width: 100%;');

$end = new \Kendo\UI\DateTimePicker('end');
$end->value(new DateTime('now', new DateTimeZone('UTC')))
    ->parseFormats(array('MM/dd/yyyy'))
    ->change('endChange')
    ->attr('style', 'width: 100%;');
?>
<div class="demo-section k-content">
    <h4>Start date</h4>
    <?= $start->render() ?>

    <h4 style="margin-top: 2em;">End date</h4>
    <?= $end->render() ?>
</div>
<script>
    var start, end;

    function startChange() {
        var startDate = start.value();

        if (startDate) {
            startDate = new Date(startDate);
            startDate.setDate(startDate.getDate() + 1);
            end.min(startDate);
        }
    }

    function endChange() {
        var endDate = end.value();

        if (endDate) {
            endDate = new Date(endDate);
            endDate.setDate(endDate.getDate() - 1);
            start.max(endDate);
        }
    }

    $(document).ready(function() {
        start = $("#start").data("kendoDateTimePicker");
        end = $("#end").data("kendoDateTimePicker");

        start.max(end.value());
        end.min(start.value());
    });

</script>