如何在角度 4 中更改输入类型= "date"的输出日期格式？

Question

实际上我正在使用角度4应用程序。我遇到这样的情况，我必须将日期作为dd/mm/yyyy发送到服务器。

我使用属性作为输入类型 ="日期"。但此属性返回的值类似于yyyy/mm/dd。那么如何更改日期的输出格式。

学生.html

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

选择日期后，当我与 console.log(( 进行检查时。

学生.组件.ts

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

最后输出为yyyy/mm/dd。

有什么方法可以克服这个问题吗？请告诉我。

Answer 1

您可以使用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 2

你可以试试这个 -

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

Answer 3

您可以使用DatePipe方法。

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

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

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);
}

Answer 5

我在 html 模板中遇到了同样的问题，并像这样解决了它：

1. 转到 app.module.ts 搜索提供程序并插入DatePipe
2. 进入要更改日期格式的HTML模板，然后像那样更改它{{Students.dob | date:'dd/MM/yyyy'}}
3. 保存两个编辑的文件并检查您的日期如何显示:)