ARTICLE

Display Current Date and Time in Windows Store App

Posted by Arjun Panwar Articles | Windows Store Apps February 22, 2012
In this article we will create a simple clock which will display current days with time and date.
Reader Level:

Introduction

In the Windows 8 Metro Style Application we have to make there are many applications, the simple clock is an application that displays the current time and date from the system. Now we want to display the time in hours, minutes and seconds format. We will be using a time converter and navigation by using the HTML 5 and JavaScript. Here, we have to initialize there are many functions. So we have to follow these steps.

These steps are given below.

Step 1 : First of all we have to 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 this Application

openPage.gif

Step 2 : In the Solution Explorer there are two files that we will primarily work with; .js and .html.

solutionexplorer.gif

Step 3 : In this application the saved clock HTML file code looks like as below.

Code : savedclock.html file.

<!DOCTYPE html>
<
html>
<
head>
    <meta charset="utf-8" />
    <title>Saved Clock</title> 
   
<!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script type="ms-deferred/javascript" src="/winjs/js/base.js"></script>
    <script type="ms-deferred/javascript" src="/winjs/js/ui.js"></script>
    <script type="ms-deferred/javascript" src="/winjs/js/binding.js"></script>
    <script type="ms-deferred/javascript" src="/winjs/js/controls.js"></script>
    <script type="ms-deferred/javascript" src="/winjs/js/animations.js"></script>
    <script type="ms-deferred/javascript" src="/winjs/js/uicollections.js"></script>
    <script type="ms-deferred/javascript" src="/winjs/js/wwaapp.js"></script>
        <link rel="stylesheet" href="/css/savedClocks.css" />
    <script type="ms-deferred/javascript" src="/js/savedClocks.js"></script>
</
head>
<
body>
    <div class="savedClocks fragment">
        <header role="banner" aria-label="Header content">
            <button disabled class="win-backbutton" aria-label="Back"></button>
            <div class="titleArea">
                <h1 class="pageTitle win-title">My Clock</h1>
            </div>
        </header>
        <section role="main" aria-label="Main content">
            <p>Content goes here.</p>
        </section>
    </div>
</
body>
</
html>

Step 4 : Putting it all together, the js file will have the code as shown below.

Code : Default.js

(function () {
    'use strict';
    WinJS.Application.addEventListener('fragmentappended', function handler(e) {
        if (e.location.indexOf('savedClocks.html') !== -1) { fragmentLoad(e.fragment, e.state); }
    });
    function fragmentLoad(elements, options) {
        WinJS.UI.processAll(elements)
            .then(function () {
                // TODO: Initialize the fragment here.
            });
    }

     WinJS.Namespace.define('savedClocks', {
        fragmentLoad: fragmentLoad,
    });
})();

Step 5 : Now let's run the application. This is what we'll see.

clock1.jpg

After clicking on this page the given output is seen below.

clockoutput1.gif

COMMENT USING

Trending up