Home

Back to all examples

Select date:

Focus:

Access key + w focuses the widget

Closed popup:

enter triggers change event
esc closes the popup
alt down arrow opens the popup
alt up arrow closes the popup

Opened popup (date view):

left arrow highlights previous day
right arrow highlights next day
up arrow highlights same day from the previous week
down arrow highlights same day from the next week
ctrl left arrow navigates to previous month
ctrl right arrow navigates to next month
ctrl up arrow navigates to previous view
ctrl down arrow navigates to next view
home highlights first day of the month
end highlights last day of the month
enter if in "month" view selects the highlighted day. In other views navigates to a lower view

PHP

<?php

require_once '../lib/Kendo/Autoload.php';
?>
<div class="demo-section k-content"> 
    <h4>Select date:</h4>
<?php
$datePicker = new \Kendo\UI\DatePicker('datepicker');

$datePicker->attr('style', 'width: 100%')
           ->attr('accesskey', 'w');

echo $datePicker->render();
?>
</div>

<div class="box wide">
<div class="box-col">
    <h4>Focus:</h4>
    <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>
</div>
<div class="box-col">
    <h4>Closed popup:</h4>
    <ul class="keyboard-legend">
        <li>
            <span class="button-preview">
                <span class="key-button wider rightAlign">enter</span>
            </span>
            <span class="button-descr">
                triggers change event
            </span>
        </li>
       <li>
            <span class="button-preview">
                <span class="key-button">esc</span>
            </span>
            <span class="button-descr">
                closes the popup
            </span>
        </li>
        <li>
            <span class="button-preview">
                <span class="key-button">alt</span>
                <span class="key-button wider leftAlign">down arrow</span>
            </span>
            <span class="button-descr">
                opens the popup
            </span>
        </li>
        <li>
            <span class="button-preview">
                <span class="key-button">alt</span>
                <span class="key-button wider leftAlign">up arrow</span>
            </span>
            <span class="button-descr">
                closes the popup
            </span>
        </li>
    </ul>
</div>
<div class="box-col">
<h4>
    Opened popup (date view):
</h4>
<ul id="calendar-nav" class="keyboard-legend">
    <li>
        <span class="button-preview">
            <span class="key-button wider leftAlign">left arrow</span>
        </span>
        <span class="button-descr">
            highlights previous day
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button wider leftAlign">right arrow</span>
        </span>
        <span class="button-descr">
            highlights next day
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button wider leftAlign">up arrow</span>
        </span>
        <span class="button-descr">
            highlights same day from the previous week
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button wider leftAlign">down arrow</span>
        </span>
        <span class="button-descr">
            highlights same day from the next week
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button">ctrl</span>
            <span class="key-button wider leftAlign">left arrow</span>
        </span>
        <span class="button-descr">
            navigates to previous month
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button">ctrl</span>
            <span class="key-button wider leftAlign">right arrow</span>
        </span>
        <span class="button-descr">
            navigates to next month
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button">ctrl</span>
            <span class="key-button wider leftAlign">up arrow</span>
        </span>
        <span class="button-descr">
            navigates to previous view
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button">ctrl</span>
            <span class="key-button wider leftAlign">down arrow</span>
        </span>
        <span class="button-descr">
            navigates to next view
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button">home</span>
        </span>
        <span class="button-descr">
            highlights first day of the month
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button">end</span>
        </span>
        <span class="button-descr">
            highlights last day of the month
        </span>
    </li>
    <li>
        <span class="button-preview">
            <span class="key-button wider rightAlign">enter</span>
        </span>
        <span class="button-descr">
            if in "month" view selects the highlighted day. In other
            views navigates to a lower view
        </span>
    </li>
    </ul>
</div>
</div>