如何使用 DatePipe 在 Angular 4、5、6 及更高版本中获取日期和时间答案

【问题标题】：How to get date and time in Angular 4,5,6 and above using DatePipe如何使用 DatePipe 在 Angular 4、5、6 及更高版本中获取日期和时间
【发布时间】：2018-05-10 10:02:32
【问题描述】：

我正在使用 angular 4 应用程序，这里我需要获取当前的Date and Time Using angular DatePipe。

我想获取以下格式的日期和时间

dd-mm-yyyy hh:MM:ss AM/PM

我通过使用 Angular DatePipe 得到了预期，如下所示

<p>{{today | date:'dd-MM-yyyy hh:mm:ss a':'+0530'}}</p>

输出：

10-05-2018 03:28:57 PM

在这里，我想做的是从我的 app.component.ts 获得相同的输出，而无需触及 HTML

所以我尝试了下面的代码，但它生成了一个 13 位的时间戳

today = Date.now();
    fixedTimezone = this.today;

那么，我怎样才能在不使用 HTML 的情况下完全从 app.component.ts 文件中获取上述格式的日期和时间。

【问题讨论】：

标签： javascript angular typescript date date-pipe

【解决方案1】：

适用于 Angular 6 或更高版本

您不需要任何第三方库。您可以使用角度method/util 进行格式化。从公共包中导入formatDate 并传递其他数据。请参见下面给出的示例。

import { Component } from '@angular/core';
import {formatDate } from '@angular/common';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  today= new Date();
  jstoday = '';
  constructor() {
    this.jstoday = formatDate(this.today, 'dd-MM-yyyy hh:mm:ss a', 'en-US', '+0530');
  }
}

stackblitz：https://stackblitz.com/edit/angular-vjosat?file=src%2Fapp%2Fapp.component.ts

【讨论】：

在从 '@angular/common' 导入 {formatDate } 时出现类似“没有导出成员 'formatdate'”的错误；
是的，它不会暴露在 Angular 6 以下 :( 它将附带 Angular 6。检查你是否可以升级。或者使用时刻或日期格式github.com/angular/angular/issues/20536

【解决方案2】：

let dateFormat = require('dateformat');
let now = new Date();
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");

Thursday, May 10th, 2018, 7:11:21 AM

而且这种格式和你的问题一模一样

dateFormat(now, "dd, mm, yyyy, h:MM:ss TT");

返回10, 05, 2018 7:26:57 PM

你需要 npm 包npm i dateformat 这是 npm 包的链接https://www.npmjs.com/package/dateformat

这是另一个启发我的问题How to format a JavaScript date

h:MM:ss TT 结果7:26:57 PM

HH:MM:ss 结果13:26:57

这是https://jsfiddle.net/5z1tLspw/

希望对你有帮助。

【讨论】：

我编辑了我的答案。您需要安装 dateformat 包。这就是您收到此类错误的原因。
预计为 12 小时时间格式“10-05-2018 03:45:12 PM”
@Nikson 立即查看。您可以通过简单的技巧使用 12 或 24 小时选项。
如何使用控制台查看代码的输出？
get_Date_Time(){ let dateFormat = require('dateformat');现在让 = 新日期（）； dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT"); console.log("日期：" + dateFormat ); }

【解决方案3】：

使用函数 formatDate 根据语言环境规则格式化日期。

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

可能有用:)

【讨论】：

【解决方案4】：

要在 Angular 中获取格式化日期，我们可以使用 Angular Datepipe。

例如，我们可以使用以下代码在我们的代码中获取格式化的日期。

import { DatePipe } from '@angular/common';

@Component({
    selector: 'app-name-class',
    templateUrl: './name.component.html',
    styleUrls: ['./name.component.scss']
})

export class NameComponent implements OnInit {
  
  // define datepipe

  datePipe: DatePipe = new DatePipe('en-US');
  
  constructor(){}

  // method to get formatted date

  getFormattedDate(){
    
    var date = new Date();
    var transformDate = this.datePipe.transform(date, 'yyyy-MM-dd');
    return transformDate;

  }
}

之后，您可以在 html 代码中使用 getFormattedDate() 方法。

<p>{{getFormattedDate()}}</p>

【讨论】：