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

这个问题太常见了！原生的<input type="date">确实会按照ISO标准（yyyy-MM-dd）返回日期，不过我们可以通过几种简单的方式把它转换成你需要的dd/mm/yyyy格式，再发送给服务器。

方法一：提交前手动转换日期格式 #

最直接的方式就是在准备发送数据到服务器之前，写一个工具函数把Date对象转换成目标格式。

首先在你的Students.components.ts里添加一个日期格式化函数：

// 把Date对象转换成dd/mm/yyyy格式的字符串
private formatDateToDDMMYYYY(date: Date): string {
  // 注意月份是从0开始的，所以要加1
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const year = date.getFullYear();
  
  return `${day}/${month}/${year}`;
}

然后在你的checkDate方法或者提交方法里调用这个函数：

checkDate() {
  // 转换日期格式
  const formattedDob = this.formatDateToDDMMYYYY(this.Students.dob);
  console.log(formattedDob); // 现在输出就是dd/mm/yyyy格式了
  
  // 接下来就可以用formattedDob作为参数发送给服务器了
}

方法二：使用Angular的DatePipe（适合显示和提交统一处理） #

Angular自带的DatePipe也可以帮我们格式化日期，不过需要注意在组件里注入它。

首先在组件的providers里添加DatePipe：

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

@Component({
  // ...其他配置
  providers: [DatePipe]
})
export class StudentsComponent {
  constructor(private datePipe: DatePipe) {}
  
  checkDate() {
    const formattedDob = this.datePipe.transform(this.Students.dob, 'dd/MM/yyyy');
    console.log(formattedDob);
    // 发送到服务器
  }
}

注意事项 #

• 确保Students.dob是一个Date对象，而不是字符串。因为<input type="date">通过[(ngModel)]绑定的是Date类型，所以如果你的初始值是字符串，可能需要先转换成Date对象。
• 如果是使用响应式表单，可以在表单提交前通过form.value拿到日期，再用上面的方法转换后发送。

内容的提问来源于stack exchange，提问作者Vignesh Mohanraj