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.
So, we will use the following steps to make this application as below.
Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File -> New -> Project
- Choose Template -> JavaScript -> Windows Metro Style -> Application
- Rename this Application
![homepage.gif]()
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.
![solutionexplorer.jpg]()
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>
<option value="2">2. Add item 2 here</option>
<option value="3">3. Add item 3 here</option>
</select>
</div>
<div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
<h3 id="descLabel">About us</h3>
<!-- Scenario 1 Input -->
<div class="item" id="scenario1Input">
<button class="action" id="scenario1Open">Default Button</button>
<button class="action secondary" id="scenario1Revoke">Other Button</button>
<br /><br />
</div>
<!-- Scenario 2 Input -->
<div class="item" id="scenario2Input">
<button id="scenario2Open">Button 1</button><br /><br />
</div>
<!-- Scenario 3 Input -->
<div class="item" id="scenario3Input">
<button id="scenario3Save" class="action">Button 1</button>
</div>
</div>
</div>
<h2 id="outputLabel"> Output</h2>
<div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
<div id="statusMessage"></div>
<!-- Scenario 1 Output -->
<div class="item" id="scenario1Output">
<img class="imageHolder" id="scenario1ImageHolder1" alt="image holder" src="images/placeholder-sdk.png" />
</div>
<!-- Scenario 2 Output -->
<div class="item" id="scenario2Output">
</div>
<!-- Scenario 3 Output -->
<div class="item" id="scenario3Output">
<img class="imageHolder withText" id="scenario3ImageHolder" alt="image holder" src="images/placeholder-sdk.png"/>
</div>
</div>
</div>
<div id="footer" role="contentinfo"></div>
</div>
</body>
</html>
Step 4 : After running this code we get the following output. Here we have to explain the four different points with various functionality.
![output1.1.jpg]()
![output1.2.jpg]()
![output2.jpg]()
![output2.1.jpg]()
![output3.jpg]()
![output3.1.jpg]()
![output4.jpg]()
![output5.jpg]()