Introduction
In this article I describe how to show your date and time and retrieval of date and time in Windows Store Apps using JavaScript. This app 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 dates and times. I hope you can create a simple app in the Windows Store Apps using JavaScript, for more help visit Simple Windows Store Apps using JavaScript.
By default the dates and times are formatted according to the conventions of the current application language (in the case of this app, only a single default language is supported). For a localized application, the current language is determined by the user's language preferences.
To start the creation, right-click on the project name in Solution Explorer and add two JavaScript pages and one HTML page. The image is shown below:
![sln-Windows-Store-Apps.jpg]()
Write the following code in default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App</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/utill.js"></script>
<script src="/js/default.js"></script>
</head>
<body role="application" style="background-color: brown">
<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/LongAndShortFormats.css" />
<script src="/js/script.js"></script>
</head>
<body>
<div data-win-control="App.PageInput">
<button id="displayButton">Display</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 sdatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("shortdate");
var ldatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("longdate");
var stimefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("shorttime");
var ltimefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("longtime");
var dateToFormat = new Date();
var sdate = sdatefmt.format(dateToFormat);
var stime = stimefmt.format(dateToFormat);
var ldate = ldatefmt.format(dateToFormat);
var ltime = ltimefmt.format(dateToFormat);
var results = "Current application context language: " + currentLanguage + "\n\n" +
"Short Date: " + sdate + "\n" +
"Short Time: " + stime + "\n" +
"Long Date: " + ldate + "\n" +
"Long Time: " + ltime;
WinJS.log && WinJS.log(results, "sample", "status");
}
})();
Write the following code in utill.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:
![out-windows-store-apps.jpg]()
Summary
In this article I described how to retrieve time And date in long and short format. I hope this article has helped you in understanding this topic. Please share it if you know more about this attribute. Your feedback and constructive contributions are welcome.