Форматирование даты в угловых без времени

Question

В моем компоненте я передаю следующие значения элементам управления. Значение, которое я передаю, относится к типу date.

this.form.controls["DepartureDate"].setValue(this.flightChoice.departureDate);
this.form.controls["ReturnDate"].setValue(this.flightChoice.returnDate);

Элементы управления имеют тип Text потому что если я использую тип date, то значение вообще не записывается.

<input class="form-control" formControlName="DepartureDate" type="text" id="departureDate" />
<input class="form-control" formControlName="ReturnDate" type="text" id="returnDate" />

Теперь результат передачи значений: дата такая это: 2018-06-30T00: 00: 00 + 02: 00 когда я хотел бы свидание такое: 30-06-2018 Что я могу сделать, чтобы получить этот тип значения, а также почему использование ввода типа «дата» не будет принимать мои значения?

Answer 1

Вот твой решение

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, } from '@angular/forms';
import moment from 'moment';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  dateForm: FormGroup;
  depDate: any;
  retDate: any

  constructor(private fb: FormBuilder) {
    this.createDateForm();
  }

  createDateForm() {
    this.dateForm = this.fb.group({
      DepartureDate: null,
      ReturnDate: null
    });
  }

  chageDepartureDate() {
    this.depDate = moment(this.dateForm.get('DepartureDate').value).format("DD-MM-YYYY");
  }

  changeReturnDate(event) {
    this.retDate = moment(this.dateForm.get('ReturnDate').value).format("DD-MM-YYYY");

  }
});

  }
}

HTML:

<form [formGroup]="dateForm">
    <p>Departure Date</p>
    <input (change)="chageDepartureDate($event)" type="date" formControlName="DepartureDate" placeholder="choose departure date">
    <p>Return Date</p>
    <input (change)="changeReturnDate($event)" type="date" formControlName="ReturnDate" placeholder="choose departure date">
</form>

<p>Departure Date = {{depDate}}</p>
<p>Return Date = {{retDate}}</p>

Answer 2

Первый вопрос: как можно форматировать даты?

Это очень общий вопрос, на который уже был дан ответ. Например, проверьте Форматирование даты в угловых без времени .

Второй вопрос: почему дата не принимается в качестве типа ввода?

Элемент управления вводом типа даты еще не полностью поддерживается во всех браузерах. Примечательно, что IE11 и Safari отсутствуют в списке совместимости caniuse.com .