Luxon CustomDateTimeAdapter incompatabilities

[Venators]

Hi All,

I work on a project that utilises date-time-picker and, initially, MomentJs. Because Moment is considered a legacy project in maintenance mode, and because of the library's downsides, like its large size and object mutability, we switched to using the Luxon library for dealing with dates & times.

I've recently been undertaking some work to integrate date-time-picker & Luxon so that the handling of dates is more seamless throughout the app. Thanks to date-time-picker's support of CustomDateTimeAdapters, I've been able to follow the DayJs and MomentJs examples and create a Luxon CustomDateTimeAdapter. As far as I can tell, I've mostly achieved feature parity between the out-of-the-box behaviour and my custom adapter, with a few small exceptions.

I'm hoping that if anyone else has made Luxon adapters, we can trade notes if you managed to work around these issues, or if it is an unresolved incompatibility between date-time-picker and Luxon, that some feature support can be added into date-time-picker to support Luxon implementations.

Incorrect Day of the Week

The first issue is that the day of the week is misaligned by 1. For example, in the screenshot below, you can see that the calendar displays July 1st (2023) as a Sunday, when July 1st is actually a Saturday.

I believe this is caused by an index incompatibility between date-time-picker & Luxon, as native JS indexes the days of the week starting with 0 as Sunday, going through to 6 for Saturday, whereas Luxon indexes them starting with 1 as Monday through to 7 as Sunday.

Has anyone made a Luxon adapter and worked around this issue, or would it be possible to add a configuration into date-time-picker to change days of the week indexing?

Greyed Out Month

The second issue is that when picking the month, January is greyed out. Clicking on it takes you to December of the previous year, and from there, you can use the forward arrow to navigate to January.


I believe this is also caused by an index incompatibility between date-time-picker & Luxon, as native JS indexes months starting with 0 as January through to 11 as December, whereas Luxon indexes them starting with 1 as January through to 12 as December.

Has anyone made a Luxon adapter and worked around this issue, or would it be possible to add a configuration into date-time-picker to change month indexing?

Persisting Highlighted Date

Last but not least, when moving between months, the highlighted date persists between months, which is not the correct behaviour as far as I know. For example, in the screenshots below, I start in July with the 23rd selected, and when I move to August, I'd expect nothing to be highlighted, but the 23rd is.


I don't know the cause of this behaviour - has anyone encountered this before?

I'd love to find some resolutions to these issues and look forward to any hearing any experience or ideas on them!
Cheers!

[Vulcannis]

I did something similar, and while I'm not seeing those issues I did have an issue with the weekdays until I noticed the different ordering. You shouldn't need any extra configuration to fix it, just in your adapter's getDay method return the Luxon's weekday % 7.

[Venators]

Hi @Vulcannis,

Thank you for your reply. As per your suggestion, I modified both the getDay and getMonth adapter methods with modulus operators, but sadly, no dice - the erroneous behaviour persists.

From earlier experimentation, when I was developing the custom adapter, the date picker behaviour would still be incorrect even when I hardcoded those methods to return the JS-indexed values. I don't know where the behaviour stems from - whether it's the adapter, the date picker library, or a bit of both 😅

I'd love to compare notes with you, if that was something you were willing to do? It sounds like you have a working implementation, and my colleagues and I have been frustrated with offset days and months for far too long, so it would be fantastic to resolve these bugs!