Angular(v5) DateTime管理求助：时间计算、格式化及Moment.js集成问题

Hey there! Let's work through your Angular 5 DateTime problems together. I'll cover fixing the Moment.js errors first, then implement your required functionality, and finally share lighter alternatives for date management in Angular.

一、先解决 Moment.js 控制台报错问题 #

Most errors with Moment.js in Angular 5 come from incorrect installation or import. Follow these steps to get it right:

1. Install Moment.js
   Run this command in your project root:

   npm install moment --save
   

2. Correct Import in Your Component
   In your .ts component file, import Moment like this (don't skip the * as moment part—this is a common mistake):

   import * as moment from 'moment';
   

Once that's set up, you shouldn't see those console errors anymore. Now let's implement your date requirements.

二、用 Moment.js 实现你的需求 #

Here's the code to get current time, subtract hours, and format to YYYY-MM-DD HH:mm:ss:

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-date-example',
  templateUrl: './date-example.component.html'
})
export class DateExampleComponent {
  constructor() {
    // 1. 获取当前时间并格式化
    const currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
    console.log('当前时间:', currentTime);

    // 2. 减去8小时并格式化
    const timeMinus8Hours = moment().subtract(8, 'hours').format('YYYY-MM-DD HH:mm:ss');
    console.log('减去8小时后:', timeMinus8Hours);

    // 3. 减去1小时并格式化
    const timeMinus1Hour = moment().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss');
    console.log('减去1小时后:', timeMinus1Hour);
  }
}

三、Angular 中更简便的 DateTime 管理方式 #

Moment.js is now in maintenance mode (no new features), so here are lighter, modern alternatives:

Option 1: 使用原生 Date API + 自定义格式化函数 #

If you don't want to add any third-party libraries, you can use JavaScript's native Date with a simple formatting function:

import { Component } from '@angular/core';

@Component({
  selector: 'app-date-example',
  templateUrl: './date-example.component.html'
})
export class DateExampleComponent {
  constructor() {
    // 自定义日期格式化函数
    const formatDate = (date: Date): string => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    // 当前时间
    const currentTime = formatDate(new Date());
    console.log('当前时间:', currentTime);

    // 减去8小时（转换为毫秒计算）
    const timeMinus8Hours = formatDate(new Date(Date.now() - 8 * 60 * 60 * 1000));
    console.log('减去8小时后:', timeMinus8Hours);

    // 减去1小时
    const timeMinus1Hour = formatDate(new Date(Date.now() - 1 * 60 * 60 * 1000));
    console.log('减去1小时后:', timeMinus1Hour);
  }
}

Option 2: 使用 date-fns（轻量替代 Moment.js） #

date-fns is a modular, tree-shakable library that's much lighter than Moment. Here's how to use it:

1. Install date-fns

   npm install date-fns --save
   

2. Implement the functionality

   import { Component } from '@angular/core';
   import { format, subHours } from 'date-fns';
   
   @Component({
     selector: 'app-date-example',
     templateUrl: './date-example.component.html'
   })
   export class DateExampleComponent {
     constructor() {
       const now = new Date();
   
       // 当前时间格式化
       const currentTime = format(now, 'yyyy-MM-dd HH:mm:ss');
       console.log('当前时间:', currentTime);
   
       // 减去8小时
       const timeMinus8Hours = format(subHours(now, 8), 'yyyy-MM-dd HH:mm:ss');
       console.log('减去8小时后:', timeMinus8Hours);
   
       // 减去1小时
       const timeMinus1Hour = format(subHours(now, 1), 'yyyy-MM-dd HH:mm:ss');
       console.log('减去1小时后:', timeMinus1Hour);
     }
   }
   

总结 #

• If you still want to use Moment.js, double-check your installation and import syntax to fix errors.
• For long-term projects, date-fns is a better choice than Moment.js due to its smaller size and active maintenance.
• For simple use cases, the native Date API with a custom formatter works great without adding any dependencies.

内容的提问来源于stack exchange，提问作者Nicolò Scapin