DateTime extension stops working if DayJS is included on page

toxpal

Took me a few hours to find out why DateTime picker doesn't work on my website...

According to DataTables examples, DayJS should be compatible with DataTables and/or DateTime ( https://datatables.net/extensions/datetime/examples/initialisation/dayjs.html ), but these libraries conflict with each other when DateTime is used in SearchBuilder extension.

See example here - https://live.datatables.net/wilewexa/1/edit
1. Click "Add Condition"
2. Select "Star Date" field, then select any condition and try selecting any date in datepicker - it won't work (error is displayed in console)

Now just remove this single line from HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js"></script> and try again - it starts working.

allan

Hi,

Unfortunately SearchBuilder doesn't have support for DayJS at this time. The DateTime component does, but not SearchBuilder (it supports Luxon or Moment).

Allan

toxpal

It's fine for me, but isn't there any way to include DayJS on website if SearchBuilder extension is used? I don't need to use DayJS on SearchBuilder itself, I only need DayJS library to be included on my website for other functions to work.

P.S. Moment is not maintained for years, and event its developers suggest NOT using Moment and switching to DayJS or another library - https://momentjs.com/docs/#/-project-status/

allan

That Moment project update is one of my most favourite posts of all time! They recommend using their own Luxon library. It isn't quite correct to say that it isn't maintained though - more that it is feature complete. They do still commit fixes if needed.

It does sound like I've got an incompatibility along the chain somewhere - this is the block that checks what library to use, it assumes that if DayJS is present, then it can use it, but SearchBuilder can't cope with that. Perhaps I should prioritise Luxon over DayJS. The other option is to add DayJS support fully to SearchBuilder. That wasn't something I had been planning to do, but can certainly look at it if there is enough demand for it.

Allan

toxpal

Thanks for the explanation. So the only way to get Search Builder working at the moment is not load DayJS library on the same page where DataTables are included? Or use another library, like Luxon?

P.S. I'm not sure if you noticed, but the issue happens even if DayJS functions are not used on page. It's enough to only include DayJS library via script tag for issue to occur.

allan

DateTime's priority order is:

1. Moment
2. DayJS
3. Luxon

So if DayJS and Luxon are both loaded on the page, it will use DayJS and there is no way to tell it otherwise (I think I need to change that!). DayJS attaches itself globally which is why DateTime will see it. But SearchBuilder has no concept of DayJS, and it would use Luxon if present. The wheels really come off at that point!

I haven't looked in detail yet, but having DateTime work with the library and SearchBuilder (which does use DateTime) not, means we are into undefined behaviour territory.

Allan

allan

I was wrong - there is a way to tell DateTime what to use - apologies! I went to add it, and its already there!

DateTime.use(moment);

// or
DateTime.use(dayjs);

// or
DateTime.use(luxon);

// or (for no formatting library - i.e. ISO8601 only):
DateTime.use(null); 

Allan

toxpal

Thanks. Personally,I don't think many people use multiple date libraries on the same page, but maybe someone will find this option (to tell which library for DateTime to use) useful.

In this case, maybe there's some workaround? For example, maybe I can force SearchBuilder not to use DateTime picker for date input fields? As you can see in live example, the issue only occurs when selecting date via picker (calendar). It doesn't occur when entering date manually. So if it's possible to somehow unload or hide date picker in SearchBuilder, that would solve the issue.

allan

Sorry, I was thinking of you using:

DateTime.use(null);

to tell DateTime not to use DayJS: https://live.datatables.net/wilewexa/2/edit .

Allan

toxpal

Can confirm this single line solves all the issues and SearchBuilder with DateTime starts working properly. Hopefully other users will also find this post useful.