A Comprehensive Guide on Date Object in TypeScript

July 11, 2023 | by Arround The Web | No comments

A Comprehensive Guide on Date Object in TypeScript

TypeScript is the superset of JavaScript that comes with all the functionalities of JavaScript as well as the new ones. It has almost all the built-in methods and properties of JavaScript to perform various functionalities. The working of all these methods, properties, and objects are the same in TypeScript. So, the user can use any of the JavaScript objects as a TypeScript object as per requirements.

This post illustrates the Date object’s purpose, use, and practical implementation in TypeScript.

What is a Date Object in TypeScript?

The “Date” object denotes the date and time. This object prints the local system’s date and time by default. It also allows the users to set a specific date and time (including time zone) of your system with the help of its predefined methods.

Syntax

let date = new Date(yyyy, mm, dd)

In the above syntax, the “new” keyword creates a “Date” object following the specified date format(yyyy(year), mm(month), dd(date)).

Let’s start with the creation of the “Date” Object.

How to Create a Date Object in TypeScript?

The “Date” is a dynamic object that can be implemented in different ways to get the date and time as per requirement. This section carries all the possible methods to create a “Date” object for getting the specified date and time.

Let’s go ahead with the first method.

Method 1: new Date()

By default, if no value is passed in the “Date()” constructor, it returns the user’s system date and time:

let date=new Date();

console.log("Date = " + date);

In the above code:

The “date” variable creates a “Date” object using the “new” keyword and the “Date()” constructor.
The “console.log()” method displays the “date” variable’s value i.e., current Date and time with the specified statement.

Output

Compile the “.ts” file using the “tsc” compiler and run the generated compiled file having the “.js” extension with the help of the “node” command:

tsc main.ts

node main.js

Here, the terminal shows the user system’s date and time as well as the time zone.

Method 2: new Date(milliseconds)

The “new Date(milliseconds)” creates a Date object that computes the date and time from “0” to the number of specified milliseconds:

let date=new Date(6112346789);

console.log("Date = " + date);

Here, the constructor specifies the number of milliseconds as a parameter.

Output

node main.js

The above-displayed date and time are from “0” to “6112346789” milliseconds.

Method 3: new Date(“datestring”)

This method takes the specified date in “yy-mm-dd” format as a string and displays it as the new date:

let date=new Date("2016-02-18");

console.log("Date = " + date);

Here, the “Date” object takes the specified date as a string enclosed in double quotes.

Output

node main.js

The terminal shows the newly created Date object.

Method 4: new Date( year, month, date, hour, minute, second, millisecond ):

The last method allows the users to create a new Date object according to the specified date and time based on the format “(yy, mm, dd, hh, min, sec, milliseconds)”:

let date=new Date(2015, 3, 2, 14, 20, 30, 9);

console.log("Date = " + date);

In the above code, the date and time are specified in accordance with the stated format.

Output

node main.js

The output creates a new object displaying the specified date and time based on the given format.

What are the Methods and Properties of Date Object in TypeScript?

The “Date” object comes with a wide range of methods and properties that are listed below:

Properties of Date Object

prototype	It helps in the addition of properties and methods to the Date object.
constructor	It is used as a function that creates the object prototype.

Get and Set Methods of Date Object

getMonth()	It returns the month specified in the date based on the local date.
getFullYear()	It displays the given year according to the local time.
getMinutes()	It specifies the minutes from the particular date.
getMilliseconds()	It provides the milliseconds from the given date.
getSeconds()	It gives the number of seconds according to the specified date.
setDate()	It sets the day/date of the month for the particular date based on local time.
setHours()	It specifies the desired hours for the date.
setMinutes()	It sets the minutes for the specified date.
setSeconds()	It sets the number of seconds based on the local time.
setYear()	It sets the required year based on local time.

For more methods, follow the given tutorial “Date Methods Reference”.

How to Use Date Object in TypeScript?

As the above section defines a list of “Date” object methods. Let’s use the Date object with these methods to explain its practical implementation.

Example 1: Set Specific Date, Month, and Year

This example uses the “Date” object “setdate()”, “setMonth()”, and “setFullYear()” methods to set the specified Date.

Code

Copy these code lines in the “.ts” file:

let date: Date = new Date();

date.setDate(5);

date.setMonth(11);

date.setFullYear(2014);

console.log("Year = " + date.getFullYear());

console.log("Date = " + date.getDate());

console.log("Month = " + date.getMonth())

console.log(" New Date = " + date);

In the above lines of code:

First, create a “Date” object with the help of the “new” keyword and the “Date()” constructor stored in the “date” variable.
Next, associate the “date” variable with the specified methods one by one. The “setDate()” method sets the Date of the month, the “setMonth()” sets the month, and the “setFullYear()” method sets the year.
After that, display the new Date with the help of the “console.log()” method using the “getFullYear()”, “getDate()”, and “getMonth()” methods.

Output

node main.js

It is seen in the output that the Date object returns the newly set date, month, and year.

Example 2: Set Specific Hours, Minutes, and Seconds

This example utilizes the “setHours()”, “setMinutes()”, and “setSeconds()” methods of the Date object to set the desired time:

let date: Date = new Date();

date.setHours(8);

date.setMinutes(12);

date.setSeconds(20);

console.log("Hours = " + date.getHours());

console.log("Minutes = " + date.getMinutes());

console.log("Seconds = " + date.getSeconds());

console.log("Date and Time = " + date);

According to the above code snippet:

The “setHours()” method sets the number of hours, “setMinutes()” sets minutes and the “setSeconds()” method sets the number of seconds, respectively.
The “getHours()”, “getMinutes()”, and “getSeconds()” methods return the newly set hours, minutes, and seconds as time.

Output

node main.js

The output shows the new time set using the Date object methods.

Example 3: Get the Current Date and Time Using Locale Conventions

This example uses the “toLocaleString()” method to display the current date and time as a local convention:

let date= new Date();

console.log("Date and Time = " + date.toLocaleString());

In the above lines of code, link the “toLocaleString()” method with the variable to return a string with a language-sensitive representation of the current Date.

Output

node main.js

As seen, the output shows the current date and time using local convention.

Example 4: Return Date Object Primitive Value

This example applies the “valueOf()” method to return the Date object as a primitive value:

let date= new Date();

console.log("Date and Time = " + date.valueOf());

In the above code snippet, the “valueOf()” method returns the Date object output in milliseconds since midnight “January 1, 1970, UTC”.

Output

node main.js

Here, the outcomes return the Date object as a primitive value.

Conclusion

In TypeScript, the “Date” object corresponds to the date and time of the local system. This object can be created to display the desired output with the help of the discussed four built-in methods. Apart from it, it also provides a list of methods that can be applied to set and get the Date and time as per requirements. This post deeply illustrated the Date object’s purpose, use, and practical implementation in TypeScript.

Source: linuxhint.com