TypeScript 动态日期填充:Date 对象使用与格式化实战


发布日期 : 2022-07-23 10:14:11 UTC

访问量: 10 次浏览

TypeScript 动态日期填充

TypeScript 是一种强类型的、面向对象的编程语言,它使开发人员能够写出更干净、更容易理解的代码。TypeScript中的动态日期人口理论是,JavaScript应用程序可以自动填充日历、列表或其他类型的显示,包括当前日期、时间或其他动态信息。这使得开发者可以创建用户界面,自动显示当前的日期、时间或其他动态信息,而不需要手动输入数据。这对需要频繁更新或用户互动的应用程序特别有用。

为了在TypeScript中动态填充一个日期,开发者可以使用 Date 对象和它的方法来设置 Date 到任何给定的值。Date 对象有一个构造函数,可以用来设置 Date 到一个给定的值。开发者还可以使用getTime()setTime()方法来获取和设置自Unix纪元以来的毫秒数,这可以用来将 Date 设置为一个自定义值。此外,setHours()setMinutes()setSeconds()setMilliseconds()方法可以用来将 Date 设置为一个更精确的值。最后,开发者可以使用toLocaleDateString()方法将 Date 格式化为所需的地区性语言。

使用 Date() 构造函数

你可以使用Date构造函数在TypeScript中使用动态日期填充。Date 构造函数接受一个参数,一个时间戳(自1970年1月1日起的毫秒数),并返回一个 Date 对象。这个 Date 对象可以被用来操作和显示你需要的格式的数据。

例如,要创建一个代表当前日期和时间的 Date 对象,可以使用没有任何参数的 Date 构造函数–

let current_date: Date = new Date()

然后你可以使用各种 Date 方法以你想要的方式来格式化日期。例如,toLocaleDateString() 方法返回一个本地日期格式的字符串表示—-。

let local_formatted_date: string = current_date.toLocaleDateString();

如果你想从一个格式化的字符串创建一个 Date 对象,Date 构造函数也可以接受一个字符串参数。例如,如果你要创建一个代表日期 “2023年1月1日 “的Date对象,你可以使用下面的代码——。

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

语法

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)

上面的语法显示了在 typescript 中使用 Date 构造函数和getMonth()getDate()getFullYear()方法进行动态日期填充。

示例

在下面的例子中,我们创建了一个名为 DynamicDate 的类,在构造函数中,我们声明了一个日期对象。这个类有一个getDynamicDate()方法,可以返回一个特定格式的日期字符串;在这个例子中,它是YYY: DD/MM。这个方法使用 Date 对象的 getMonth(), getDate() , 和 getFullYear() 方法来获取月份、日期和年份,并按需要进行格式化,然后返回格式化后的字符串。如果我们的应用程序现在需要提到的字符串日期格式,那么我们可以直接使用这个 DynamicDate 类,以及它的 getDynamicDate() 方法。

// 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)
// 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);

输出

上述代码将产生以下输出 —

2023: 1/1

示例

在下面的例子中,我们创建了一个名为 DynamicDateLocal 的类,在构造函数中,我们声明了一个日期对象。这个类有一个getLocalDateFormat()方法,可以返回一个特定格式的日期字符串。这个方法使用 Date 对象的toLocaleString()方法返回一个格式化的字符串。这个方法返回一个基于用户本地日期时间格式化的日期字符串。

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)
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);

输出

上述代码将产生以下输出 —

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

TypeScript 中的动态日期填充是一个非常有用的功能,我们的应用程序需要根据某些条件或区域反复改变日期的格式。如果应用程序在不同的区域需要不同格式的字符串,我们可以声明不同的方法来获得不同格式的日期字符串。