WinJS-компонент для выбора времени TimePicker


default.html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>BasicControls</title>
 <!-- WinJS references -->
 <link href="WinJS/css/ui-light.css" rel="stylesheet" />
 <script src="WinJS/js/base.js"></script>
 <script src="WinJS/js/ui.js"></script>
 <!-- Recipe3.7 references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
 <script src="/js/controldemo.js"></script>
</head>
<body class="win-type-body">
 <div id="timeSelector" data-win-control="WinJS.UI.TimePicker">
 </div>
 <div id="info"></div>
</body>
</html>

js/controldemo.js
(function() {
    "use strict";

    function GetControl() {
        WinJS.UI.processAll().done(function() {
            var datepick = document.getElementById("timeSelector").winControl;
            var InfoEelement = document.getElementById("info");
            datepick.addEventListener('change', function(args) {
                InfoEelement.innerHTML = "The selected time is " + datepick.current.toTimeString();
            })
        });
    }
    document.addEventListener("DOMContentLoaded", GetControl);
})();

Можно установить 24-часовой формат:
<div id="timeSelector" data-win-control="WinJS.UI.TimePicker"
data-win-options="{
clock : '24HourClock',
minuteIncrement : 15
}">
 </div>


Через свойства hourPattern, minutePattern, и periodPattern можно задавать формат. По умолчанию установлены значения: hour.integer(2), minute.integer (2), period.abbreviated (2).


Теги: