如何更改angular 4中input type="date"的输出日期格式？

Question

实际上我正在使用 angular 4 应用程序。我有这样的场景，我必须将 dd/mm/yyyy 的日期发送到服务器。

我使用属性作为输入类型 ="date"。但是这个属性returns的值就像yyyy/mm/dd。那么如何更改日期的输出格式。

Students.html

<input type="date" [(ngModel)]="Students.dob" name="Students.dob">

选择日期后，当我用console.log()检查时。

Students.components.ts

checkDate() { console.log(Students.dob); }

最终输出为yyyy/mm/dd..

有什么办法可以解决这个问题吗？请告诉我。

Answer 1

您可以使用 DatePipe 方法。

<input type="date" [(ngModel)]="Students.dob|date:'dd/MM/yyyy'" name="Students.dob">

您可以从这里阅读更多内容。 https://angular.io/api/common/DatePipe

Answer 2

你可以试试这个 -

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

checkDate() {
    let formatedDate = new DatePipe().transform(this.Students.dob, 'dd/mm/yyyy')
    console.log(formatedDate); 
  }

Answer 3

您可以在 checkDate() 中使用 DatePipe 将日期更改为 dd/mm/yyyy 格式功能。像下面。并将该日期发送到服务器端。

首先将 DatePipe 导入您的组件

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

然后像下面这样使用它

  checkDate() {
    const dateSendingToServer = new DatePipe('en-US').transform(this.Students.dob, 'dd/MM/yyyy')
    console.log(dateSendingToServer);
  }

您可以在 STACKBLITZ DEMO.

上找到工作示例

希望对您有所帮助！

Answer 4

您可以使用moment.js。另外，您需要安装并导入它。

npm install moment --save

import * as moment from 'moment'; //in your component

然后使用

checkdate(){
   const date = moment(Students.dob).format(DD-MM-YYYY);
   console.log(date);
}

如何更改angular 4中input type="date"的输出日期格式？

How to change the output date format of input type="date" in angular 4?

angular

angular4-forms