How to display a date in <input type = "date"> field when using 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>

Sayooj V R · Accepted Answer · 2020-04-10 10:32:18Z

2

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

answered Apr 10, 2020 at 10:32

Sayooj V R

2,3652 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhanusha_Perera07 Over a year ago

Thank you for helping me out. 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">

Jarnal Over a year ago

@dhanusha-perera07 thanks for your comment, changing type to "datetime"' solved the problem (without needing to convert date to string), you should post your comment as an answer.

RoiTr · Accepted Answer · 2020-04-10 10:39:23Z

1

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

edited Apr 10, 2020 at 10:39

answered Apr 10, 2020 at 10:33

RoiTr

15614 bronze badges

3 Comments

Dhanusha_Perera07 Over a year ago

Thank you for helping me out. 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">

RoiTr Over a year ago

Do you mean type="datetime-local"? Cause datetime is not supported as far as i know.. Do you see the built in datepicker when using it?

Dhanusha_Perera07 Over a year ago

Apologies, actually I meant type="datetime-local", I could manage to solve the problem. <input type="datetime-local">

Dhanusha_Perera07 · Accepted Answer · 2021-11-16 19:34:52Z

0

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

answered Nov 16, 2021 at 19:34

Dhanusha_Perera07

4,7568 gold badges18 silver badges28 bronze badges

Comments

Bhautik Sudani · Accepted Answer · 2022-04-03 07:42:17Z

0

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

answered Apr 3, 2022 at 7:42

Bhautik Sudani

113 bronze badges

Comments

Armando Torres · Accepted Answer · 2025-04-07 18:54:44Z

-1

HTML

<input type="date" name="ff" [value]="setFechaP(ff)" [(ngModel)]="ff" class="form-control form-control-sm text-center">

TS

import { formatDate } from '@angular/common';

//Function
setFechaP(ff:any){
if(ff){
ff=formatDate(new Date(ff).getTime(),'yyyy-MM-dd','en','+00');
}

}

edited Apr 7 at 18:54

answered Mar 8 at 22:39

Armando Torres

11 bronze badge

1 Comment

Community Mar 9 at 14:35

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to display a date in <input type = "date"> field when using Angular

5 Answers 5

2 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related