угловая дата возврата в formControl MatDatePicker в формате DD-MM-YYYY

Как я могу правильно привести дату к formControl?

При попытке установить дату через setValue она больше не отображается в том же формате.

Я хочу, чтобы дата отображалась в формате DD-MM-YYYY, так же, как я ее ввожу, но при возврате через код компонент принимает только MM-DD-YYYY.

Я уже пробовал инвертировать ДД с ММ через код и возврат, но пока ничего не вышло.

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>

Я ввожу дату так:

ТС

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

angular datepicker angular-material formgroups
person Pedro Filipe    schedule 12.07.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете попробовать реализовать его, используя Angular Date Pipe У вас есть существующая Stackblitz Demo для справки. .

Просто измените текущий формат со Stackblitz yyyy-MM-dd на желаемый формат dd-MM-yyyy или другой аналогичный согласно документации Angular Date Pipe< /а>

@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');

  }

}
person KShewengger    schedule 12.07.2019
comment
но я могу передать свой matdatepicker? Если бы это был входной текст, я бы смог вернуть нормальный, проблема в том, что matDatePicker не может найти способ - person Pedro Filipe; 12.07.2019
comment
Я понял. Я сохранял значение даты как строку. Я изменил его и сохранил так, как он был получен из datePicker. И я использовал трубку, которую вы рекомендовали поставить на мой стол. Благодарю вас! - person Pedro Filipe; 12.07.2019
comment
Привет Педро, извините за поздний ответ. Я рад, что это сработало! Большое спасибо :) - person KShewengger; 13.07.2019