TypeScript 中的动态日期填充

typescriptserver side programmingprogramming

TypeScript 是一种强类型的面向对象编程语言，可让开发人员编写更清晰、更易于理解的代码。TypeScript 中的动态日期填充理论是，JavaScript 应用程序可以使用当前日期、时间或其他动态信息自动填充日历、列表或其他类型的显示。这允许开发人员创建用户界面，自动显示当前日期、时间或其他动态信息，而无需手动输入数据。这对于需要频繁更新或用户交互的应用程序尤其有用。

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

使用 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()

// 格式化日期字符串
let formatted_date: string =
current_month + '/' + current_day + '/' + current_year

console.log(formatted_date)

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

示例

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

// 动态日期类
class DynamicDate {

   // 日期变量
   date: Date
   constructor(dateString) {
   
      // 创建日期对象
      this.date = new Date(dateString)
   }

   // 格式化日期字符串方法
   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)

编译后，它将生成以下 JavaScript 代码 -

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

      // 创建日期对象
      this.date = new Date(dateString);
   }

   // 格式化日期字符串方法
   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: Date
   constructor(dateString) {
   
      // 创建日期对象
      this.date = new Date(dateString)
   }

   // 格式化日期字符串方法
   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)

编译后，它将生成以下 JavaScript 代码 -

var DynamicDateLocal = /** @class */ (function () {
   function DynamicDateLocal(dateString) {
      // 创建日期对象
      this.date = new Date(dateString);
   }
   
   // 格式化日期字符串方法
   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);