CODEWITHSUNDEEP
htmlangularasp.net-web-apiangular7
Dhanusha_Perera07
Dhanusha_Perera07

Reputation: 4584

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

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>

Upvotes: 3

Views: 14530

Answers (4)

Bhautik Sudani
Bhautik Sudani

Reputation: 11

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

Upvotes: 0

Dhanusha_Perera07
Dhanusha_Perera07

Reputation: 4584

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

Upvotes: 0

RoiTr
RoiTr

Reputation: 146

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

Upvotes: 1

Sayooj V R
Sayooj V R

Reputation: 2363

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

Upvotes: 2

Related Questions