Post
Ask Question

Retrieve Calendar in String Format in Windows Store Apps

Introduction

In this article I describe how to retrieve the current date and time in string format in Windows Store Apps using JavaScript. This example will show how to format the current date and time using custom formats that are specified using a template string. I assume you can create a simple Windows Store Apps using JavaScript; for more help visit Simple Windows Store Apps Using JavaScript.

By default dates and times are formatted according to the conventions of the current application language. To start the creation of the Apps you should add two JavaScript forms and one HTML form by right-clicking on the name of your project in Solution Explorer.

pages-windows-store-apps.jpg

Write the following code in default.html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Apps</title>

    <link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-light.css" />

    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link rel="stylesheet" href="/css/default.css" />

    <script src="/js/script1.js"></script>

    <script src="/js/default.js"></script>

</head>

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

    <center><div id="rootGrid">       

        <div id="content">

            <h1 id="featureLabel"></h1>

            <div id="contentHost"></div>

        </div>      

    </div></center>

</body>

</html>

Write the following code in default.js:

(function () {

    "use strict";

    var sampleTitle = "";

    var pages = [{ url: "page.html" }];

    function activated(eventObject) {

        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

            eventObject.setPromise(WinJS.UI.processAll().then(function () {

                var url = WinJS.Application.sessionState.lastUrl || pages[0].url;

                return WinJS.Navigation.navigate(url);

            }));

        }

    }

    WinJS.Navigation.addEventListener("navigated", function (eventObject) {

        var url = eventObject.detail.location;

        var host = document.getElementById("contentHost");

        host.winControl && host.winControl.unload && host.winControl.unload();

        WinJS.Utilities.empty(host);

        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {

            WinJS.Application.sessionState.lastUrl = url;

        }));

    });

    WinJS.Namespace.define("App", {

        sampleTitle: sampleTitle,

        pages: pages

    });

    WinJS.Application.addEventListener("activated", activated, false);

    WinJS.Application.start();

})();

Write the following code in page.html:
 

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="/css/OverrideSettings.css" />

    <script src="/js/script.js"></script>

</head>

<body>

    <div data-win-control="App.pageInput">

        <p>Date and time in string formet</p>

        <button id="displayButton">Click Here</button>

    </div>

    <div data-win-control="App.pageOutput">

    </div>

</body>

</html>


Write the following code in script.js:
 

(function () {

    "use strict";

    var page = WinJS.UI.Pages.define("page.html", {

        ready: function (element, options) {

            document.getElementById("displayButton").addEventListener("click", doDisplay, false);

        }

    });

    function doDisplay() {

        var currentLanguage = Windows.Globalization.ApplicationLanguages.languages[0];

        var m_datefmt1 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month day");

        var m_datefmt2 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month year");

        var m_datefmt3 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month day year");

        var m_datefmt4 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month day dayofweek year");

        var m_datefmt5 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("dayofweek.abbreviated");

        var m_datefmt6 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month.abbreviated");

        var m_datefmt7 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("year.abbreviated");

        var mytimefmt1 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("hour minute");

        var mytimefmt2 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("hour minute second");

        var mytimefmt3 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("hour");

        var dateToFormat = new Date();

        var m_date1 = m_datefmt1.format(dateToFormat);

        var m_date2 = m_datefmt2.format(dateToFormat);

        var m_date3 = m_datefmt3.format(dateToFormat);

        var m_date4 = m_datefmt4.format(dateToFormat);

        var m_date5 = m_datefmt5.format(dateToFormat);

        var m_date6 = m_datefmt6.format(dateToFormat);

        var m_date7 = m_datefmt7.format(dateToFormat);

        var mytime1 = mytimefmt1.format(dateToFormat);

        var mytime2 = mytimefmt2.format(dateToFormat);

        var mytime3 = mytimefmt3.format(dateToFormat);

        var results = "Current application context language: " + currentLanguage + "\n\n" +

                      "Formatted Dates:\n\n" +

                      m_datefmt1.template + ": " + m_date1 + "\n" +

                      m_datefmt2.template + ": " + m_date2 + "\n" +

                      m_datefmt3.template + ": " + m_date3 + "\n" +

                      m_datefmt4.template + ": " + m_date4 + "\n" +

                      m_datefmt5.template + ": " + m_date5 + "\n" +

                      m_datefmt6.template + ": " + m_date6 + "\n" +

                      m_datefmt7.template + ": " + m_date7 + "\n\n" +

                      "Formatted Times:\n\n" +

                      mytimefmt1.template + ": " + mytime1 + "\n" +

                      mytimefmt2.template + ": " + mytime2 + "\n" +

                      mytimefmt3.template + ": " + mytime3 + "\n";

 

        WinJS.log && WinJS.log(results, "sample", "status");

    }

})();


Write the following code in script1.js:
 

(function () {

    var pageOutput = WinJS.Class.define(

     function (element, options) {

         element.winControl = this;

         this.element = element;

         new WinJS.Utilities.QueryCollection(element)

                     .setAttribute("role", "region")

                     .setAttribute("aria-labelledby", "outputLabel")

                     .setAttribute("aria-live", "assertive");

         element.id = "output";

         this._addOutputLabel(element);

         this._addStatusOutput(element);

     }, {

         _addOutputLabel: function (element) {

             var label = document.createElement("h2");

             label.id = "outputLabel";

             label.textContent = "Output";

             element.parentNode.insertBefore(label, element);

         },

         _addStatusOutput: function (element) {

             var statusDiv = document.createElement("div");

             statusDiv.id = "statusMessage";

             element.insertBefore(statusDiv, element.childNodes[0]);

         }

     }

 );

    WinJS.log = function (message, tag, type) {

        var statusDiv = document.getElementById("statusMessage");

        statusDiv.innerText = message;

    };

    function activated(e) {

        WinJS.Utilities.query("#featureLabel")[0].textContent = App.sampleTitle;

    }

    WinJS.Application.addEventListener("activated", activated, false);

    WinJS.Namespace.define("App", {

        pageOutput: pageOutput

    });

 

})();


Output:

outputt-windows-store-apps.jpg

Summary

In this app I described how to retrieve the system's current date and time in a Windows Store App using JavaScript. I hope this article has helped you to understand this topic. Please share it if you know more about this attribute. Your feedback and constructive contributions are welcome.


Similar Articles