Introduction
This article is about various ways to format dates and times in Windows 8. We will discuss here how to format the current date and time using a long and short format. We also define how to format using a string template and a parametrized template. This method for formatting dates or times can be used to satisfy the requirements for date and/or time presentation.
So, we use the steps given below.
Step 1 : First of all you create a new Metro Style Application; let us see the description with images of how to create it.
- Open Visual Studio 2011
- File>New>Project
- Choose Template>JavaScript> Blank Application
- Rename the application
![openpage.gif]()
![homepage.jpg]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with, default.js and default.html.
![solutionexplorer.gif]()
Step 3 : Open the default.html page and add the following code. The code will look as shown below.
Code :
<!DOCTYPE html>
<html>
<head>
<title>DateTimeFormatting</title>
<!-- WinJS references -->
<link href="winjs/css/ui-light.css" rel="stylesheet" type="text/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/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>
<!-- 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:#ff6a00">
<div id="rootGrid">
<div id="header" role="contentinfo"></div>
<div id="content">
<h1 id="featureLabel" style="background-color:#ffd800">DateTimeFormatting</h1>
<h2 id="inputLabel" style="font-size:medium">Input</h2>
<div id="input" role="main" aria-labelledby="inputLabel">
<div class="options">
<h3 id="listLabel" style="font-size:large">Select Options</h3>
<select size="4" id="Items" aria-labelledby="listLabel" style="background-color:#f5d20b">
<option selected="selected" value="1" style="color:#cc2d2d">1. Format date and time using long and short</option>
<option value="2" style="color:#911067">2. Format using a string template</option>
<option value="3" style="color:#071766">3. Format using a parametrized template</option>
</select>
</div>
<div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
<h3 id="descLabel">Description</h3>
<!-- Item 1 Input -->
<div class="item" id="Item1Input">
<p>In this example will show how to format the current date and time using the Long and Short formats. These formats represent conventional presentation forms for date and time and are useful when presenting standard date and times. The available formats are easily viewed in the Region control panel.</p>
<button class="action" id="Item1Open">Display</button>
</div>
<!-- Item 2 Input -->
<div class="item" id="Item2Input">
<p>In this example will show how to format the current date and time using custom formats that are specified using a template string. This method for formatting dates or times can be used when the requirements for the date presentation do not match the "short" or "long" form. For example, if the user experience requires a only a month and a day or a month and a year, this method will allow the application to present only those date elements, but still in a format that respects the user's preferences.</p>
<button class="action" id="Item2Open">Display</button><br /><br />
</div>
<!-- Item 3 Input -->
<div class="item" id="Item3Input">
<p>in this example will show how to format the current date and time using custom formats that are specified using a parametrized template. This method for formatting dates or times can be used when the requirements for the date presentation do not match the "short" or "long" form. For example, if the user experience requires a only a month and a day or a month and a year, this method will allow the application to present only those date elements, but still in a format that respects the user's preferences.</p>
<button id="Item3Open" class="action">Display</button>
</div>
</div>
</div>
<h2 id="outputLabel"> Output</h2>
<div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
<div id="statusMessage"></div>
<!-- Item 1 Output -->
<div class="item" id="Item1Output">
<p></p>
</div>
<!-- Item 2 Output -->
<div class="item" id="Item2Output">
<p></p>
</div>
<!-- Item 3 Output -->
<div class="item" id="Item3Output">
<p></p>
</div>
</div>
</div>
<div id="footer" role="contentinfo"></div>
</div>
</body>
</html>
Step 4 : After applying this code, run this application and then we get the following output:
![output.jpg]()
The first point will show how to format the current date and time using the Long and Short formats.
![output1.1.gif]()
The next point will show how to format the current date and time using custom formats that are specified using a template string.
![output1.2.gif]()
This point will show how to format the current date and time using custom formats that are specified using a parametrized template.
![output1.3.gif]()