Dynamic Date Populate in TypeScript

TypeScript is a strongly typed, object-oriented programming language that enables developers to write code that is cleaner and easier to understand. The dynamic date population theory in TypeScript is that a JavaScript application can automatically populate a calendar, list, or other types of display with the current Date, time, or other dynamic information. This allows developers to create user interfaces that automatically display the current Date, time, or other dynamic information without manually entering the data. This can be especially useful for applications requiring frequent updates or user interaction.

To dynamically populate a date in TypeScript, developers can use the Date object and its methods to set the Date to any given value. The Date object has a constructor that can be used to set the Date to a given value. Developers can also use the getTime() and setTime() methods to get and set the milliseconds since the Unix epoch, which can be used to set the Date to a custom value. Additionally, the setHours(), setMinutes(), setSeconds(), and setMilliseconds() methods can be used to set the Date to a more precise value. Finally, developers can use the toLocaleDateString() method to format the Date in the desired locale.

Using the Date() Constructor

You can use the Date constructor to use dynamic date populate in TypeScript. The Date constructor takes one argument, a timestamp (number of milliseconds since January 1, 1970), and returns a Date object. This Date object can then be used to manipulate and display data in the format you need.

For example, to create a Date object representing the current date and time, you can use the Date constructor without any arguments −

let current_date: Date = new Date()

You can then use the various Date methods to format the date the way you want. For example, the toLocaleDateString() method returns a string representation of the date in the local date format −

let local_formatted_date: string = current_date.toLocaleDateString();

The Date constructor can also take a string argument if you want to create a Date object from a formatted string. For example, if you're going to make a Date object representing the date “January 1, 2023”, you can use the following code −

let specific_date: Date = new Date("January 1, 2023");

Syntax

let current_date: Date = new Date()

let current_month: number = current_date.getMonth() + 1
let current_day: number = current_date.getDate()
let current_year: number = current_date.getFullYear()

// Formatted date string
let formatted_date: string =
   current_month + '/' + current_day + '/' + current_year

console.log(formatted_date)

The above syntax shows dynamic date populate in typescript using the Date constructor and getMonth(), getDate(), and getFullYear() methods.

Example

In the example below, we have created a class named DynamicDate, and in the constructor, we declare a date object. This class has a method getDynamicDate() that returns a date string in a particular format; in this case, it is YYYY: DD/MM. This method uses getMonth(), getDate(), and getFullYear() methods of the Date object to get the month, Date, and year and format it as desired, and return the formatted string. If our application now requires the mentioned string date format, then we can directly use this DynamicDate class, and it’s the getDynamicDate() method.

// Class for Dynamic Date
class DynamicDate {

   // date variable
   date: Date
   constructor(dateString) {
   
      // creating date object
      this.date = new Date(dateString)
   }

   // formatted date string method
   getDynamicDate() {
      let current_month: number = this.date.getMonth() + 1
      let current_day: number = this.date.getDate()
      let current_year: number = this.date.getFullYear()

      return current_year + ': ' + current_day + '/' + current_month
   }
}
let dynamic_date: DynamicDate = new DynamicDate('January 1, 2023')
let formatted_date: string = dynamic_date.getDynamicDate()
console.log(formatted_date)

On compiling, it will generate the following JavaScript code −

// Class for Dynamic Date
var DynamicDate = /** @class */ (function () {
   function DynamicDate(dateString) {

      // creating date object
      this.date = new Date(dateString);
   }

   // formatted date string method
   DynamicDate.prototype.getDynamicDate = function () {
      var current_month = this.date.getMonth() + 1;
      var current_day = this.date.getDate();
      var current_year = this.date.getFullYear();
      return current_year + ': ' + current_day + '/' + current_month;
   };
   return DynamicDate;
}());
var dynamic_date = new DynamicDate('January 1, 2023');
var formatted_date = dynamic_date.getDynamicDate();
console.log(formatted_date);

Output

The above code will produce the following output −

2023: 1/1

Example

In the example below, we have created a class named DynamicDateLocal, and in the constructor, we declare a date object. This class has a method getLocalDateFormat() that returns a date string in a particular format. This method returns a formatted string using the Date object’s toLocaleString() method. This method returns a formatted date string based on the user’s local date time formatting.

class DynamicDateLocal {
   // date variable
   date: Date
   constructor(dateString) {
   
      // creating date object
      this.date = new Date(dateString)
   }

   // formatted date string method
   getLocalDateFormat() {
      let formatted_date: string = this.date.toLocaleString()
      return formatted_date
   }
}

let dynamic_date: DynamicDateLocal = new DynamicDateLocal('January 1, 2023')
let formatted_date: string = dynamic_date.getLocalDateFormat()
console.log(formatted_date)

On compiling, it will generate the following JavaScript code −

var DynamicDateLocal = /** @class */ (function () {
   function DynamicDateLocal(dateString) {
      // creating date object
      this.date = new Date(dateString);
   }
   
   // formatted date string method
   DynamicDateLocal.prototype.getLocalDateFormat = function () {
      var formatted_date = this.date.toLocaleString();
      return formatted_date;
   };
   return DynamicDateLocal;
}());
var dynamic_date = new DynamicDateLocal('January 1, 2023');
var formatted_date = dynamic_date.getLocalDateFormat();
console.log(formatted_date);

Output

The above code will produce the following output −

1/1/2023, 12:00:00 AM

Dynamic Date populates in TypeScript is a very helpful functionality where our application requires changing the date formatting repeatedly based on certain conditions or areas. If the application requires different formatted strings in different areas, we can declare different methods for getting different formatted date strings.