Date and Time Picker Control in Windows Store App

Introduction

In this article we will learn how to create date and time controls in Metro Style Applications. Here we will present an example, in this example the first point demonstrates a date picker control with a specific initial value. The second point demonstrates defining a range of years display by the year selected. In the next point is a date time picker defined with month only. The fourth point demonstrates subscribing to the change event for the date picker and time picker controls. In the last point we will show use of CSS to customize the styling of the date picker and time picker controls.

Step 2 : In the Solution Explorer there are two files that we will primarily work with; default.html and default.js files. In the images folder add any image to the application but in this application we don't have to add an image.

Step 3 : The default.html file is as in the following code.

Code : Let us see the code which is given below.

<!DOCTYPE html>

<html>

<head>

<title>Date / Time Picker</title>

<!-- WinJS references -->

<link rel="stylesheet" type="text/css" href="winjs/css/ui-light.css" />

<script type="text/javascript" src="winjs/js/base.js"></script>

<script type="text/javascript" src="winjs/js/ui.js"></script>

<script type="text/javascript" src="winjs/js/controls.js"></script>

<script type="text/javascript" src="winjs/js/wwaapp.js"></script>

<!-- Base references -->

<link rel="stylesheet" type="text/css" href="css/base-sdk.css" />

<script type="text/javascript" src="base-sdk.js"></script>

<script type="text/javascript" src="jstoolkit-sdk.js"></script>

<!-- Sample references -->

<link rel="stylesheet" type="text/css" href="css/program.css" />

<script type="text/javascript" src="program.js"></script>

</head>

<body role="application" style ="background-color:#ffd800">

<div id="rootGrid">

<div id="header" role="contentinfo"></div>

<div id="content">

<h1 id="featureLabel">Date and Time Picker Controls</h1>

<h2 id="inputLabel">Input</h2>

<div id="input" role="main" aria-labelledby="inputLabel">

<div class="options">

<h3 id="listLabel">Select Options</h3>

<select size="5" id="scenarios" aria-labelledby="listLabel">

<option selected="selected" value="1">1. Add Item 1 here</option>