Reader Level:
ARTICLE

Create DatePicker Control in Windows Store App

Posted by Arjun Panwar Articles | Windows Store Apps February 10, 2012
In this article, I will discuss how to work with a DatePicker in a Windows Store App.
  • 0
  • 0
  • 8665

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


COMMENT USING

Trending up