使用 Angular 时如何在 <input type = "date"> 字段中显示日期

Question

我想通过使用表单从用户那里获取一些输入值并将其保存在数据库中。然后我想使用相同的表单显示保存的数据。但即使我从这些输入字段中获取值，我也无法在此处显示检索到的值；

<input type="date" name="ArrivalDate" #ArrivalDate="ngModel" [(ngModel)]="service.formData.ArrivalDate" class="form-control">

和

<input type="date" name="DepartureDate" #DepartureDate="ngModel" [(ngModel)]="service.formData.DepartureDate" class="form-control">

Screenshot: Display retrieved data from the database but date fields are not filled with the necessary data

/----- 代码段-----/

<div class="form-row">
            <div class="form-group col-md-4">
              <div class="form-group">
                  <label>Arrival Date</label>
                  <!--I want to get the date input from the user-->
                  <!--I want to display the date input which given by the user-->
                  <input type="date" name="ArrivalDate" #ArrivalDate="ngModel" [(ngModel)]="service.formData.ArrivalDate" class="form-control">
                  <div class="validation-error" *ngIf="ArrivalDate.invalid && ArrivalDate.touched">This field is required.</div>
              </div>
            </div>
            <div class="form-group col-md-4">
              <div class="form-group">
                  <label>Departure Date</label>
                   <!--I want to get the date input from the user-->
                  <!--I want to display the date input which given by the user-->
                  <input type="date" name="DepartureDate" #DepartureDate="ngModel" [(ngModel)]="service.formData.DepartureDate" class="form-control">
                  <div class="validation-error" *ngIf="DepartureDate.invalid && DepartureDate.touched">This field is required.</div>
              </div>
            </div>
            <div class="form-group col-md-4">
                <div class="form-group">
                  <label>Star Category</label>
                  <input name="StarCategory" #StarCategory="ngModel" [(ngModel)]="service.formData.StarCategory" class="form-control">
                  <div class="validation-error" *ngIf="StarCategory.invalid && StarCategory.touched">This field is required.</div>
              </div>
            </div>
        </div>

Answer 1

你可以这样试试。这是具有 2 个日期字段的最小形式。您可以添加其余字段。

在组件模板中

<form [formGroup]="dateForm" (ngSubmit)="onSubmit()">

  <label>
    Arrival Date:
    <input type="date" formControlName="ArrivalDate">
  </label>

  <label>
    Departure Date:
    <input type="date" formControlName="DepartureDate">
  </label>
  <input type="submit" />
</form>

<label> Arrival Date: {{dateForm.get("ArrivalDate").value}}</label>

<label> Departure Date: {{dateForm.get("DepartureDate").value}}</label>

在组件中

  import { FormGroup, FormControl } from "@angular/forms";

  arrivalDate : Date = new Date();
  departureDate : Date = new Date();
  dateForm = new FormGroup({
    ArrivalDate: new FormControl(this.arrivalDate.toISOString().split("T")[0]),
    DepartureDate: new FormControl(this.departureDate.toISOString().split("T")[0])
  });

  onSubmit(){
    console.log(this.dateForm.value);
  }

stackblitz 中的工作示例：https://stackblitz.com/edit/angular-xkgxxt

Answer 2

问题是浏览器的默认日期选择器只能显示带有日期部分的日期字符串（不是日期对象）（没有时间）。

您需要先将日期转换为字符串，如下例所示： https://stackblitz.com/edit/angular-zpntay?file=src/app/hello.component.ts

@Component({
  selector: 'hello',
  template: `
  <form [formGroup]="myForm">
    <input type="date" formControlName="dateOfBirth">
  </form>`,
})
export class HelloComponent implements OnInit  {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      dateOfBirth: new Date('1988-05-15').toISOString().split('T')[0]
    });
  }
}

Answer 3

我变了； <input type="date"> 到 <input type="datetime">

然后我就可以成功显示日期和时间了。

问题：当我这样插入时，到达日期和离开日期存储在数据库中。 '2020-05-01T00:00:00' 当我检索数据时，我曾经使用<input = "date"> 字段显示它，所以我将其更改为<input type= "datetime">