如何在角4中更改输入类型=“日期”的输出日期格式?

时间:2018-05-21 09:06:14

标签: angular angular4-forms

实际上我正在使用角度4应用程序。我有一个场景,我必须将日期作为 dd / mm / yyyy 发送到服务器。

我使用property作为输入type =“date”。但是此属性返回的值如 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。

有没有办法克服这个问题?请让我知道。

4 个答案:

答案 0 :(得分:3)

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

首先将 DatePipe 导入您的组件

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

然后像下面那样使用它

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

工作示例您可以在 https://codepen.io/anon/pen/JvVOZg 找到。

希望这会对你有所帮助!

答案 1 :(得分:1)

你可以试试这个 -

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

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

答案 2 :(得分:0)

您可以使用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);
}

答案 3 :(得分:-1)

您可以使用DatePipe方法。

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

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