Question

在我的组件中，我将以下值传递给控件。我传递的值都是日期类型。

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

控件的类型为文本 因为如果我使用日期类型，则根本不会写入该值。

<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 我应该怎么做才能获得这种价值？为什么使用类型为“ date”的输入将不接受我的价值？

Answer 1

第一个问题：如何格式化日期？

这是一个非常普遍的问题，之前已经得到回答。例如，签出Formatting Date in Angular without the time。

第二个问题：为什么不接受日期作为输入类型？

并非所有浏览器都完全支持日期类型输入控件。值得注意的是，caniuse.com compatibility list中缺少IE11和Safari。

Answer 2

这是你的 solution

WordSchema

HTML：

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

  }
});

  }
}

在Angular中格式化日期而没有时间

2 个答案:

第一个问题：如何格式化日期？

第二个问题：为什么不接受日期作为输入类型？