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


default.html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Recipe3.6</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.6 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="Birthday" data-win-control="WinJS.UI.DatePicker">
 </div>
 <div id="info"></div>
</body>
</html>

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

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

Можно задать формат отображения даты:
<div id="Birthday" data-win-control="WinJS.UI.DatePicker"
data-win-options="{
monthPattern : '{month.abbreviated}',
datePattern: '{day.integer(2)}',
yearPattern: '{year.abbreviated}'
}">
 </div>




Теги: