Datepicker v11.2.9 - Luxon DateAdapter

[matheo]

Luxon

The MatLuxonDateModule is available at @matheo/datepicker/luxon.
You will need to have luxon installed in your application because it's not added as dependency.

Breaking Changes

The DateAdapter class, the DateUnit and MatDateFormats types, and also the NativeDateAdapter, NativeDateModule and MatNativeDateModule were moved to @matheo/datepicker/core. Update the imports and everything will run again. This subpackage is equivalent to @angular/material/core with the Time extensions.

---

This discussion was created from the release Luxon DateAdapter.

[matheo]

With the core subpackage we'll be able to have more DateAdapters.
No breaking-changes will be needed after this 🙏

[human33]

Hi @matheo!

Could you provide usage examples for MatLuxonDateModule?
I imported it and tried to use the component with a variable that has DateTime type, but in runtime I can see that ngModelChange emmits a regular Date value.

My code looks like this:

<mat-form-field>
            <mat-label i18n>Поиск по времени</mat-label>
            <input matInput  [matDatepicker]="picker" [(ngModel)]="showOrdersFor"
                   (ngModelChange)="onDateChanged($event)" />
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker 
                    ngDefaultControl 
                    type="datetime" #picker></mat-datepicker>
        </mat-form-field>

Where showOrdersFor is declared this way: showOrdersFor: DateTime = DateTime.now();
And the function expects DateTime as an argument: async onDateChanged(newDate: DateTime).

Do I need to make some extra steps to use this adapter?

[matheo]

Hi @human33
it's supposed to work like the other Angular Material adapters:
https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings

Importing MatLuxonDateModule to your application next to MatDatepickerModule should be enough

[human33]

Thanks for help, but unfortunately I wasn't able to make it work. I see this error in console:

core.js:6479 ERROR Error: Invalid unit locale
    at normalizeUnit (luxon.js:6054)
    at normalizeObject (luxon.js:645)
    at Function.fromObject (luxon.js:6478)
    at LuxonDateAdapter.clone (matheo-datepicker-luxon.js:133)
    at MatClockView.setTime (matheo-datepicker.js:694)
    at MatClockView._handleMousemove (matheo-datepicker.js:595)
    at HTMLDocument.MatClockView.mouseMoveListener (matheo-datepicker.js:507)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28659)
    at ZoneDelegate.invokeTask (zone.js:405)

It happens when I try to select time.
I'm not sure if it's a bug, so I didn't create an issue.

[xiGUAwanOU]

I've also got the same problem. I've checked the implementation. It seems that we can't clone a DateTime object in the way written in the LuxonDateAdapter.clone() method. Basically, the following code will fail in luxon 2.x:

DateTime.fromObject(DateTime.now().toObject({ includeConfig: true }));

fromObject method doesn't accept an object with field locale, which is generated by toObject method with includeConfig: true.

The problem could be related to the version of luxon, because it won't occur in luxon 1.x.

See the upgrade guide: https://moment.github.io/luxon/#/upgrading?id=upgrading-luxon

[xiGUAwanOU]

Just have tried this implementation:

  public clone(date: DateTime): DateTime {
    const originalDateObj: ToObjectOutput & DateTimeJSOptions = date.toObject({ includeConfig: true });

    return DateTime.fromObject(
      {
        year: originalDateObj.year,
        month: originalDateObj.month,
        day: originalDateObj.day,
        hour: originalDateObj.hour,
        minute: originalDateObj.minute,
        second: originalDateObj.second,
        millisecond: originalDateObj.millisecond,
      },
      {
        zone: originalDateObj.zone,
        locale: originalDateObj.locale,
        outputCalendar: originalDateObj.outputCalendar,
        numberingSystem: originalDateObj.numberingSystem,
      },
    );
  }

Which is working. However maybe we should find another way to clone the object.