PHP Kendo\UI\DateTimePicker Examples

Example #1

File: right-to-left-support.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="demo-section">
    <div class="k-rtl">
        <label for="datetimepicker">Choose date:</label>
<?php 
$dateTimePicker = new \Kendo\UI\DateTimePicker('datetimepicker');
echo $dateTimePicker->render();
?>
    </div>
</div>
<style scoped>
    .demo-section {
        width: 400px;
        text-align: center;
        margin: 50px auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }
</style>
<?php 
require_once '../include/footer.php';

Example #2

File: template.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="configuration k-widget k-header">
    <span class="infoHead">Information</span>
    <p>
        Apply special style for the birthdays.
    </p>
</div>

<div class="demo-section" style="width: 185px;">
<?php 
$dateTimePicker = new \Kendo\UI\DateTimePicker('datetimepicker');
$dateTimePicker->value(new DateTime('today', new DateTimeZone('UTC')))->month(array('content' => <<<TEMPLATE
# if (isInArray(data.date, birthdays)) { #
    <div class="birthday"></div>
# } #
#= data.value #
TEMPLATE
))->footer("Today - #= kendo.toString(data, 'd') #")->open("onOpen");
echo $dateTimePicker->render();
?>
</div>
<script>
    function onOpen() {
        var dateViewCalendar = this.dateView.calendar;
        if (dateViewCalendar) {
            dateViewCalendar.element.width(300);
        }

Example #3

File: rangeselection.php Project: neevan1e/Done

<?php

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

<?php 
$start = new \Kendo\UI\DateTimePicker('start');
$start->value(new DateTime('now', new DateTimeZone('UTC')))->parseFormats(array('MM/dd/yyyy'))->change('startChange');
$end = new \Kendo\UI\DateTimePicker('end');
$end->value(new DateTime('now', new DateTimeZone('UTC')))->parseFormats(array('MM/dd/yyyy'))->change('endChange');
?>
<div class="demo-section" style="width:535px">
    <label for="start">Start date:</label>
    <?php 
echo $start->render();
?>

    <label for="end" style="margin-left:3em">End date:</label>
    <?php 
echo $end->render();
?>
</div>
<script>
    var start, end;

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

        if (startDate) {
            startDate = new Date(startDate);

Example #4

File: events.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="demo-section" style="width: 185px;">
<?php 
$dateTimePicker = new \Kendo\UI\DateTimePicker('datetimepicker');
$dateTimePicker->open('onOpen')->close('onClose')->change('onChange');
echo $dateTimePicker->render();
?>
</div>

<div class="console"></div>
<script>
    function onOpen() {
        kendoConsole.log("Open");
    }

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

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

Example #5

File: index.php Project: neevan1e/Done

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div id="to-do">
<?php 
$dateTimePicker = new \Kendo\UI\DateTimePicker('datetimepicker');
$dateTimePicker->value(new DateTime('now', new DateTimeZone('UTC')))->attr('style', 'width: 200px');
echo $dateTimePicker->render();
?>
</div>
<style scoped>
    #to-do {
        height: 52px;
        width: 221px;
        margin: 30px auto;
        padding: 91px 0 0 188px;
        background: url('../content/web/datepicker/todo.png') transparent no-repeat 0 0;
    }
</style>
<?php 
require_once '../include/footer.php';

Example #6

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

<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="demo-section">
   <h3>Select date &amp; time:</h3>
<?php 
$dateTimePicker = new \Kendo\UI\DateTimePicker('datetimepicker');
$dateTimePicker->attr('style', 'width: 200px')->attr('accesskey', 'w');
echo $dateTimePicker->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>
        <span class="button-preview">