Dynamic Date Populate In TypeScript

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 webserver.

 

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 functions 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 data 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 >
 <
 html xmlns = "http://www.w3.org/1999/xhtml" >
 <
 head runat = "server" >
 <
 title > < /title>
 <
 script src = "app.js" > < /script>
 <
 style type = "text/css" >
 #Radio1 {
  width: 24 px;
 }
# Radio2 {
 width: 24 px;
}
#
Radio3 {
 width: 24 px;
}
#
Radio4 {
 width: 24 px;
}
#
Text1 {
 width: 245 px;
 height: 25 px;
}
#
Display {
 width: 372 px;
}
<
/style>
<
/head>
<
body >
 <
 form id = "form1"
runat = "server" >
 <
 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 >
 <
 input id = "rdolong"
name = "R1"
type = "radio"
value = "Long Date" / > Long Date < /p>
 <
 p >
 <
 input id = "rdoutc"
name = "R1"
type = "radio"
value = "UTCDateTime" / > UTC Date / Time < /p>
 <
 p >
 <
 input id = "Display"
type = "text"
readonly = "true" / > < /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();
 };
};

Output  

 

 

Referenced By

http://www.typescriptlang.org/