Multi tool use

Formatting Date in Angular without the time

In my component I pass the following values to the controls. The value I pass are both of type date.

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


The controls are of type Text
because if I use type date the value are not written at all.

<input class="form-control" formControlName="DepartureDate" type="text" id="departureDate" />
<input class="form-control" formControlName="ReturnDate" type="text" id="returnDate" />


Now the result of passing the values is:
a date such this:
2018-06-30T00:00:00+02:00
when I would like a date such:
30-06-2018
What can I do to have this kind of value and also why using input of type "date" will not accept my values?

2 Answers
2

This is a very general question that has been answered before. For example, check out Formatting Date in Angular without the time.

The date type input control is not yet fully supported in all browsers. Notably, IE11 and Safari are missing form the caniuse.com compatibility list.

Here is your
solution

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

}
});

}
}


HTML:

<form [formGroup]="dateForm">
<p>Departure Date</p>
<input (change)="chageDepartureDate($event)" type="date" formControlName="DepartureDate" placeholder="choose departure date">
<p>Return Date</p>
<input (change)="changeReturnDate($event)" type="date" formControlName="ReturnDate" placeholder="choose departure date">
</form>

<p>Departure Date = {{depDate}}</p>
<p>Return Date = {{retDate}}</p>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.