PHP Kendo\UI\TimePicker Examples

Example #1

File: index.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
 <div id="alarm-settings">
    <div style="margin-top: -7px; margin-left: 180px">
<?php 
$timePicker = new \Kendo\UI\TimePicker('timepicker');
$timePicker->value('10:00 AM');
echo $timePicker->render();
?>
    </div>
    <div style="margin-top: 59px; padding-left: 180px">
        <span style="" class="k-widget k-autocomplete k-header k-state-default">
            <input id="descr" class="k-input" type="text" value="Wake up" style="width: 100%" />
        </span>
    </div>
</div>
<style scoped>
    #alarm-settings {
        height: 135px;
        width: 395px;
        margin: 30px auto;
        padding: 110px 0 0 30px;
        background: url('../content/web/timepicker/alarmSettings.png') transparent no-repeat 0 0;
    }
</style>
<?php 
require_once '../include/footer.php';

Example #2

File: api.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
$timePicker = new \Kendo\UI\TimePicker('timepicker');
echo $timePicker->render();
?>
<script>
    $(document).ready(function() {
        var timepicker = $("#timepicker").data("kendoTimePicker");

        var setValue = function () {
            timepicker.value($("#value").val());
        };

        $("#enable").click(function() {
            timepicker.enable();
        });

        $("#disable").click(function() {
            timepicker.enable(false);
        });

        $("#readonly").click(function() {
            timepicker.readonly();
        });

        $("#open").click(function() {
            timepicker.open();
        });

Example #3

File: events.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="demo-section" style="width: 250px;">
    <label for="timepicker">Pick time:</label>
<?php 
$timePicker = new \Kendo\UI\TimePicker('timepicker');
$timePicker->change('onChange')->close('onClose')->open('onOpen');
echo $timePicker->render();
?>
</div>

<script>
    function onOpen() {
        kendoConsole.log("Open");
    }

    function onClose() {
        kendoConsole.log("Close");
    }

    function onChange() {
        kendoConsole.log("Change :: " + kendo.toString(this.value(), 't'));
    }
</script>
<div class="console"></div>
<?php 
require_once '../include/footer.php';

Example #4

File: keyboard-navigation.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="demo-section">
    <h3>Select time:</h3>
<?php 
$timePicker = new \Kendo\UI\TimePicker('timepicker');
$timePicker->attr('width', 'width: 200px')->attr('accesskey', 'w');
echo $timePicker->render();
?>
</div>

<ul class="keyboard-legend">
    <li>
        <span class="button-preview">
            <span class="key-button leftAlign wider"><a target="_blank" href="http://en.wikipedia.org/wiki/Access_key">Access key</a></span>
            +
            <span class="key-button">w</span>
        </span>
        <span class="button-descr">
            focuses the widget
        </span>
    </li>
</ul>
<h4>
    Closed popup:
</h4>
<ul class="keyboard-legend">
    <li>

Example #5

File: rangeselection.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="demo-section" style="width: 500px;">
    <label for="start">Start time:</label>
<?php 
$start = new \Kendo\UI\TimePicker('start');
$start->value('8:00 AM')->change('startChange');
echo $start->render();
?>
    <label for="end" style="margin-left:3em">End time:</label>
<?php 
$end = new \Kendo\UI\TimePicker('end');
$end->value('8:30 AM');
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);