Reactive mat-datepicker formatting using luxon

Question

I'm trying to replace momentjs with luxonjs which is used in mat-datepicker of a reactive form, initially I'm loading the datepicker field with ISO format

'2022-05-10T10:34:31.311-04:00'

for which I used below luxon formatting to save the values

DateTime.fromISO( this.form?.get('date')?.value ).toISODate();

DateTime.fromISO(this.form?.get('date')?.value) .plus({ day: 1 }) .toISODate();

When I select different date, the date format is different from my original

Sun May 01 2022 00:00:00 GMT-0400 (Eastern Daylight Time)

How to change this format to ISO using luxon

score 0 · Answer 1 · answered Jun 14 '22 at 15:36

I solved this issue with a workaround by converting the reactive form date value to ISO format using angular DatePipe

let date = new DatePipe('en-US').transform(
  this.form?.get('date')?.value,
  'yyyy-MM-ddThh:mm:ss'
); 
date = DateTime.fromISO(date).plus({ day: 1 }).toISODate();

Reactive mat-datepicker formatting using luxon

1 Answers1