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

Question

I want to get some inputs values from the user by using a form and save it in the database. Then I want to display the saved data using this same form. But even though I get the values from these input fields I can not display the retrieved values here;

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

And

<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

/ ----- code segment ----- /

<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

You can try like this. This is a minimal form with 2 date field. You can add the rest of the fields.

in component template

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

in component

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

working sample in stackblitz: https://stackblitz.com/edit/angular-xkgxxt

Answer 2

The issue is that the default datepicker of the browser can display date strings (not date objects) with the date section only (without the time).

You need to convert your dates to strings first, like in this example: 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

I changed; <input type="date"> to <input type="datetime">

Then I could successfully display the date and time.

Issue: When I do the insertion, arrival date & departure date stored in the database like this. '2020-05-01T00:00:00' When I retrieved data I used to display it using <input = "date"> field, so I changed it to <input type= "datetime">

Answer 4

          <input class="form-control" type="date" (change)="SendDatetoFunction($event)" name="date" id="date">

#function in angular ts file

SendDatetoFunction(event: any) {
    console.log(event.target.value);
  }