Introduction
In this article, I will discuss how to work with a DatePicker control in a Windows 8 Metro Style Application. DatePicker is a type of UI surface in Windows 8 metro application. It is used to simply show date, year and months. With the use of the DatePicker we have to select under it these items. It is usually used when we have to use the calendar in an application. A DatePicker should be as simple as possible. The DatePicker control is a part of the WinJS.
So, we have to follow these steps.
Step 1: First of all follow these steps.
- Open Visual Studio 2011
- File>New>Project
- Choose Template>JavaScript> Blank Application
- Rename this Application
![Newwinapp3.gif]()
Step 2: Right-click and open the project in Expression Blend.
![solutionexplorer.gif]()
Step 3: Open a new window then select the assets and choose the DatePicker control.
![datepicker5.GIF]()
Step 4: Here we will see the DOM tab that the DatePicker control will show the elements. In the DOM three select tags are used to create a DatePicker tag.
![dom1.gif]()
Step 5:
Code: The default.html code looks like as shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WinWebApp4</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- WinWebApp4 references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
<script src="/winjs/js/ui.js" type="text/javascript"></script>
<script src="/winjs/js/controls.js"
type="text/javascript"></script>
<script type="text/javascript">WinJS.UI.processAll();</script>
</head >
<body>
<div data-win-control="WinJS.UI.DatePicker" data-win-options={maxYear:2020,minYear:2000}"></div>
</body>
</html>
Step 6:
Code: The default.js code is as shown as below.
(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 () {
var dateFiltercontrol = document.getElementByI
("DatePickerDiv").wincontrol;
dateFiltercontrol.addeventListner("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();
})();
Step 7: Run this application and get the output as shown below.
![output1.gif]()
After running this application we have to select the elements as below.
![output2.gif]()