在Angular 4中以'yyyy-MM-dd'格式获取当前日期

Question

在Angular 4中以'yyyy-MM-dd'格式获取当前日期

62

我该如何使用特定格式'yyyy-MM-dd'获取当前日期，例如今天的日期是'2018-07-12'？仅使用一条命令即可实现。

myDate = new Date();

非常感谢

- Hazem HASAN

5

你可以使用Angular日期管道来检查日期，具体信息请参考https://angular.io/api/common/DatePipe - Chellappan வ

1

我需要在我的 TypeScript 文件中的值。 - Hazem HASAN

16个回答

32

你可以尝试这样做。

component.ts

currentDate = new Date();

组件.html

{{currentDate | date:'yyyy-MM-dd'}}

- Abdellah AITMOMIN

1

简单、易懂、干净 - besim

10

您可以使用 date:'yyyy-MM-dd' 管道。

curDate=new Date();

<p>{{curDate | date:'yyyy-MM-dd'}}</p>

- Krishna Rathore

2

我需要在我的 TypeScript 文件中的值。 - Hazem HASAN

8

如果您只想显示日期，则可以在HTML中使用日期管道，例如：

仅日期：

your date | date: 'dd MMM yyyy'

日期和时间:

your date | date: 'dd MMM yyyy hh:mm a'

如果您只想从 new Date() 提取日期输入，则可以像这样在 ts 文件中使用 angular formatDate()：

currentDate = new Date();

const cValue = formatDate(currentDate, 'yyyy-MM-dd', 'en-US');

- Manish Patidar

formatDate() 返回一个字符串。需要返回一个 Date 类型。现在有什么解决方案？ - undefined

3

以下是示例：

function MethodName($scope)
{
    $scope.date = new Date();
}

您可以在此处更改视图中的格式，这是我们的代码。

<div ng-app ng-controller="MethodName">
    My current date is {{date | date:'yyyy-MM-dd'}} . 
</div>

我希望这有所帮助。

- Peter

1

谢谢你的回答，但我在使用Angular 4，我想在我的TypeScript文件中获取该值，而不是在HTML文件中。 - Hazem HASAN

2

在HTML文件中

{{date_variable|date:'fullDate'}}

解释

使用管道更好，因为我们可以在不改变输入的情况下转换输出，而不是使用其他方法。在此示例中，我使用以下链接作为fullDate，您可以使用自己的组合。

- sai yaswanth reddy Leagala

2

app.component.html

<div>
     <h5 style="color:#ffffff;">{{myDate | date:'fullDate'}}</h5>
</div>

app.component.ts

export class AppComponent implements OnInit {
myDate = Date.now();    //date

- Soft Dev Ahmad yar khan

如果你在回答中附上了简短明了的解释，说明你的回答是如何解决问题的，并且在旧问题已经有8个以上的回答的情况下，解释一下你的回答为什么会提供之前回答所未涉及到的内容，那么这样的回答更有可能对未来的人们（并获得赞同）有用。 - David Buck

2

In Controller ,

 var DateObj = new Date();

 $scope.YourParam = DateObj.getFullYear() + '-' + ('0' + (DateObj.getMonth() + 1)).slice(-2) + '-' + ('0' + DateObj.getDate()).slice(-2);

- Thisara Subath

1

如果这是要与 <input type="datetime-local"> 一起使用，例如： <input matInput #dateTimeInput type="datetime-local" [value]="todayAsString" step="1" [min]="todayAsString"> 那么应该将 todayAsString 设置为：

this.todayAsString = formatDate(new Date(), 'yyyy-MM-dd', 'en');
this.todayAsString += 'T' + formatDate(new Date(), 'hh:mm', 'en');

文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/datetime-local

该页面介绍了HTML元素“datetime-local”，它是一种输入类型，允许用户选择日期和时间。此元素可以帮助开发人员收集有关日期和时间的信息，并将其用于各种应用程序中。请参阅链接以获取更多详细信息。

- vpap

怎么样不返回一个字符串，而是返回一个日期类型呢？ - undefined

1

为了在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;

  }
}

- shehan96

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- khush · Accepted Answer

你可以在Angular中使用DatePipe来格式化日期。

如果你想要在ts中格式化日期，那么你可以像这样在构造函数中注入DatePipe作为服务。

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

@Component({
    templateUrl: './name.component.html',
    styleUrls: ['./name.component.scss'],
    providers: [DatePipe]
})

myDate = new Date();
constructor(private datePipe: DatePipe){
    this.myDate = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');
}

如果您希望在 HTML 文件中进行格式化，"Shortdate" 将返回 MM/DD/YY 类型的日期。

{{myDate | date: 'shortDate' }}

从Angular 6开始，这也可以正常工作。

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

formatDate(new Date(), 'yyyy/MM/dd', 'en');