In this post I will show you, how to work with DatePicker control in HTML Metro
App. The DatePicker controls comes as part of WinJS.
To use the DatePicker control, for the very first let us create a blank application.
![DtPckrWin1.gif]()
Right click and open project in Expression Blend.
![DtPckrWin2.gif]()
Choose Date Picker from Assets and put it below Body tag.
![DtPckrWin3.gif]()
You can see in the liveDOM tab that Date Picker control is made up of various HTML
elements. There are three Select tags being used to create Date Picker tag.
![DtPckrWin4.gif]()
After dragging Date Picker control on the DOM, you can see HTML generated as
below:
![DtPckrWin5.gif]()
To set the basic properties you need to select div contains Date Picker control
and then click Attributes tab in Properties window.
![DtPckrWin6.gif]()
After setting value of maxYear and minYear, when you switch to HTML view, you
will notice added attribute in Date Picker control as below:
![DtPckrWin7.gif]()
You may notice in above HTML that in Head section of the HTML a WinJS function
is being called. This function is responsible for processing all the WinJS
controls. It is very much possible to move this WinJS function call from HTML
page to JS page as below:
![DtPckrWin8.gif]()
At this point of running of the application, you should be getting Date
Picker control on the app page. Let us move ahead and read the selected value
from the Date Picker control. For that give an ID to Date Picker control div and
read it on js file using standard JavaScript function.
![DtPckrWin9.gif]()
In this way you can display the selected date in result div. For your convenience the
full source code for default.js is given below.
Default.js
(function(){
'use strict';
// Uncomment the following line to enable first chance
exceptions.
// Debug.enableFirstChanceException(true);
WinJS.Application.onmainwindowactivated=function(e){
var
result
=document.getElementById("Result");
WinJS.UI.processAll().then(function(){
vardateFilterControl=document.getElementById("DatePickerDiv").winControl;
dateFilterControl.addEventListener("change",function(){
var
month
=dateFilterControl.current;
result.innerHTML=
month;
});
});
if(e.detail.kind===Windows.ApplicationModel.Activation.ActivationKind.launch){
// TODO: startup code here
}
}
WinJS.Application.start();
})();
Default.html is as below:
Default.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>AppBarSample</title>
<!--WinJS references -->
<linkrel="stylesheet"href="/winjs/css/ui-dark.css"/>
<scriptsrc="/winjs/js/base.js"></script>
<scriptsrc="/winjs/js/wwaapp.js"></script>
<!--AppBarSample references -->
<linkrel="stylesheet"href="/css/default.css"/>
<scriptsrc="/js/default.js"></script>
<scriptsrc="/winjs/js/ui.js"type="text/javascript"></script>
<scriptsrc="/winjs/js/controls.js"type="text/javascript"></script>
</head>
<body>
<h1>Date
Picker Demo</h1>
<divid="DatePickerDiv"data-win-control="WinJS.UI.DatePicker"
data-win-options="{disabled:false,maxYear:2020,minYear:2001}">
</div>
<divid="Result">
</div>
</body>
</html>
I hope this post is useful. Thanks for reading.