angular return 格式为 DD-MM-YYYY 的 FormControl MatDatePicker 日期

Question

如何将日期正确地添加到 formControl？

当尝试通过 setValue 设置日期时，它不再以相同的格式出现。

我希望日期以 DD-MM-YYYY 格式出现，就像我引入它一样，但是当通过代码执行 return 时，组件只接受 MM-DD-YYYY。

我已经尝试通过代码和 return 将 DD 与 MM 反转，但仍然没有完成。

HTML

<input matInput [matDatepicker]="picker4" placeholder="Data prevista pagamento" formControlName="dataPrevistaPagto">
<mat-datepicker-toggle matSuffix [for]="picker4"></mat-datepicker-toggle>
<mat-datepicker #picker4></mat-datepicker>

我这样输入日期：

TS

ModelEdit.dataPrevistaPagto = this.setDate(this.form.get('dataPrevistaPagto').value);

setDate(dataString: string){
  var today = new Date(dataString);
  var dd = String(today.getDate()).padStart(2, '0');
  var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
  var yyyy = today.getFullYear();

  var dataa = dd + '/' + mm + '/' + yyyy;
  return dataa;
}

我这样设置日期：

this.form.get('dataPrevistaPagto').setValue( moment(new Date(this.setDateInverse(this.ModelEdit.dataPrevistaPagto))));

Answer 1

您可以尝试使用 Angular Date Pipe 实现它已经有现成的Stackblitz Demo供大家参考

只需将当前格式从 Stackblitz yyyy-MM-dd 更改为您想要的格式 dd-MM-yyyy 或根据 Angular Date Pipe Documentation

的其他类似格式

@Component({
  ..., 
  providers: [ DatePipe ]    // Import DatePipe from "@angular/core"
})
export class AppComponent implements OnInit  {

  currentDate: any = new Date();

  constructor(private datePipe: DatePipe) {}

  ngOnInit(): void {
    // You can use whatever format you like
    // see https://angular.io/api/common/DatePipe#pre-defined-format-options
    this.currentDate = this.datePipe.transform(this.currentDate, 'dd-MM-yyyy');

  }

}

angular return 格式为 DD-MM-YYYY 的 FormControl MatDatePicker 日期

angular return date to formControl MatDatePicker in DD-MM-YYYY format

datepicker

angular-material

angular

formgroups