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.

Write the following code in default.html:

<!DOCTYPE html>

<html>

<head>

</head>

</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>

</head>

<body>

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

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

</div>

</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:

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.