Dynamic Date Populate In TypeScript

Nitin Bhardwaj
Jan 29, 2013
12.4k
0
1
Article

DynamicTimeFormatPopulateinTypeScript.rar

Introduction

The Date object is used to work with dates and times. Date objects are created with "new Date()". This is the date and time on the user's computer, not on the web server.

In this article, we select a date format, then the TextBox will show the current date in that format.

The following example dynamically shows the formatted time using a web application in TypeScript. In this example we use four radio buttons and a TextBox in our Form. Give all the radio buttons the same name. We make four function in this example. The first function "NormalShow()" shows the normal date. In NormalShow(), we use the getDate(), getMonth() and getYear() functions to get the current Date, Month and Year. The second function is "ShortDateShow()". Here we use the tolocaleDateString() method to return the date portion as a string depending on the Locale. The third function is "LongDateShow()". Here the toLocaleString() method is used to convert the date to a string depending on the Locale. The fourth function is "UTCDateTimeShow()". Here ToUTCString() converts the date to a string, depending on the Coordinated Universal Time (UTC).

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give of your application the name "Window_History" and then click "Ok".

Step 2

After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and css files and the aspx page.

Coding

app.ts

class DynamicTimeFormat

{

NormalShow()

{

var a = new Date();

(<HTMLTextAreaElement>document.getElementById('Display')).value =a.getDate()+ "/" + a.getMonth()+ "/" + a.getFullYear();

}

ShortDateShow()

{

var a = new Date();

(<HTMLTextAreaElement>document.getElementById('Display')).value = a.toLocaleDateString();

}

LongDateShow()

{

var a = new Date();

(<HTMLTextAreaElement>document.getElementById('Display')).value = a.toLocaleString();

}

UTCDateTimeShow()

{

var a = new Date();

(<HTMLTextAreaElement>document.getElementById('Display')).value = a.toUTCString();

}

window.onload = () =>

{

var obj = new DynamicTimeFormat();

var objnormal = document.getElementById("rdonormal");

var objshort = document.getElementById("rdoshort");

var objlong = document.getElementById("rdolong");

var objutc = document.getElementById("rdoutc");

objnormal.onclick = function ()

{

obj.NormalShow();

}

objshort.onclick = function ()

{

obj.ShortDateShow();

}

objlong.onclick = function ()

{

obj.LongDateShow();

}

objutc.onclick = function ()

{

obj.UTCDateTimeShow();

}

};

Dynamic_time_format_demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dynamic_time-format_demo.aspx.cs" Inherits="Dynamic_Time_Format_Populate.Dynamic_time_format_demo" %>

<!DOCTYPE html>

#Radio1 {

width: 24px;

}

#Radio2 {

width: 24px;

}

#Radio3 {

width: 24px;

}

#Radio4 {

width: 24px;

}

#Text1 {

width: 245px;

height: 25px;

}

#Display {

width: 372px;

}

</style>

</head>

<body>

<div>

<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Italic="True" Font-Size="Large" ForeColor="#006600" Text="Dynamic Time Format Populate in TypeScript"></asp:Label>

</div>

</form>

<p>

<input id="rdonormal" name="R1" type="radio" value="Normal Date" /> Normal Date</p>

<p>

<input id="rdoshort" name="R1" type="radio" value="Short Date" /> Short Date</p>

<p>

<p>

<p>

</body>

</html>

app.js

var DynamicTimeFormat = (function () {

function DynamicTimeFormat() { }

DynamicTimeFormat.prototype.Show = function () {

var a = new Date();

(document.getElementById('Display')).value = a.getDate() + "/" + a.getMonth() + 1 + "/" + a.getFullYear();

};

DynamicTimeFormat.prototype.ShowShortDate = function () {

var a = new Date();

(document.getElementById('Display')).value = a.toLocaleDateString();

};

DynamicTimeFormat.prototype.ShowLongDate = function () {

var a = new Date();

(document.getElementById('Display')).value = a.toLocaleString();

};

DynamicTimeFormat.prototype.ShowUTCDateTime = function () {

var a = new Date();

(document.getElementById('Display')).value = a.toUTCString();

};

return DynamicTimeFormat;

})();

window.onload = function () {

var obj = new DynamicTimeFormat();

var objnormal = document.getElementById("rdonormal");

var objshort = document.getElementById("rdoshort");

var objlong = document.getElementById("rdolong");

var objutc = document.getElementById("rdoutc");

objnormal.onclick = function () {

obj.Show();

};

objshort.onclick = function () {

obj.ShowShortDate();

};

objlong.onclick = function () {

obj.ShowLongDate();

};

objutc.onclick = function () {

obj.ShowUTCDateTime();

};

//@ sourceMappingURL=app.js.map

Output

Reference By

http://www.typescriptlang.org/

Up Next

Ebook Download

View all

Test

Read by 16 people

Download Now!

Learn

View all

Get Started

Basic

Premium

Dynamic Date Populate In TypeScript

Test