CODEWITHSUNDEEP
angulardatedjango-rest-frameworkangular-materialangular7
jAC
jAC

Reputation: 3445

Angular 7 Material DatePicker cannot format using DRF

I am using

I am using reactive forms and the Material Datepicker (mat-datpicker) for a simple form control.

I have searched high and low on how to change the format in the date picker from mm/dd/yyyy to yyyy-mm-dd only to find out no matter what the format i set the form field to be, it still sends the date as date_of_birth: "yyyy-mm-ddT04:00:00.000Z".

I have tried setting the field up in the follow 3 methods:

date_of_birth: String = '';
date_of_birth: Date = null;
date_of_birth: moment = null;

but all 3 still output the same format as above with the timezone.

I am using PostgrSQL and the field type is a Date field as time is not required.

I am not sure why it is ignoring the format that is being displayed in the date picker. So my end goal here is just to send it the date in YYYY-MM-DD format.

Any help on this would be appreciated.

Upvotes: 0

Views: 442

Answers (1)

jAC
jAC

Reputation: 3445

I figured this out. As simple as a solution this is, I sadly did not find something like this. I am new to angular but I would have thought this would be well documented for something as simple as this.

You have to update the field on saving the form. For example, in my onFormSubmit() method, i used moment to update the field before i sent it to my API service like so 

onFormSubmit() {
  const result = this.patientForm.value;
  result.date_of_birth = moment(result.date_of_birth).format('YYYY-MM-DD');
  this.serviceName.addUser(result).subscribe();
}

I hope this helps someone else struggling the same way i was.

Upvotes: 0

Related Questions