DatePicker Invalid Dates and Times

[psweb]

Wappler 6.8.0, NodeJS, Mac, No Console Errors

Before i spend too much time on this, just trying to figure out if it should work and I am doing something wrong, or if it not meant to work this way.

I have a bunch of appointments displayed below

I do not want to show this calendar to the end user at all, I just put it there to try troubleshoot this issue.
Basically I would like a datepicker with time included, or a daterange picker with time, I have tried both.
According to the data shown on the calendar, which has been set as the daterange pickers invalid dates, with its start and end, i should not be able to choose the date 23-06-2025 17:00 - 23-06-2025 18:30, howver should still be able to select another time on that same 23-06-2025

I have tried the following

Test 1
<input id="date_range_av_caity" name="date_range_av_caity" is="dmx-date-range-picker" showdropdowns="true" timepicker="" use24hours="true" minutes-increment="30" dmx-bind:mindate="var_current_date.datetime" dmx-bind:maxdate="var_current_date.datetime.addYears(1)" data-rule-time="" dmx-bind:invaliddates="sc_google_calendar_nails_caity.data.final_salon_booked_and_post_block" invaliddates-start="startDateTime" invaliddates-end="endDateTime">

Test 2
<input id="date_range_av_caity" name="date_range_av_caity" is="dmx-date-range-picker" showdropdowns="true" timepicker="" use24hours="true" minutes-increment="30" dmx-bind:mindate="var_current_date.datetime" dmx-bind:maxdate="var_current_date.datetime.addYears(1)" data-rule-time="" dmx-bind:invaliddates="sc_google_calendar_nails_caity.data.final_salon_booked_and_post_block" invaliddates-start="startDateTime.formatDate('yyyy-MM-dd HH:mm:ss')" invaliddates-end="endDateTime.formatDate('yyyy-MM-dd HH:mm:ss')">

Test 3
<input id="date_range_av_caity" name="date_range_av_caity" is="dmx-date-range-picker" showdropdowns="true" timepicker="" use24hours="true" minutes-increment="30" dmx-bind:mindate="var_current_date.datetime" dmx-bind:maxdate="var_current_date.datetime.addYears(1)" data-rule-time="" dmx-bind:invaliddates="sc_google_calendar_nails_caity.data.final_salon_booked_and_post_block" invaliddates-start="startDateTime.replace('Z','').formatDate('yyyy-MM-dd HH:mm:ss')" invaliddates-end="endDateTime.replace('Z','').formatDate('yyyy-MM-dd HH:mm:ss')">

Sadly none of them do what I am wanting.
Here is the data i am giving it

Any advice would be appreciated. I feel like this should work? I also tried the other way around by using Custom Dates and that did not do it either sadly.

[tehowden]

Just added invalid dates

on the datepicker and got this. See video

It is a simple way to do it but not the best way for the user maybe.

[psweb]

Thank you, that is very interesting, so you made the invalid date 06/24/2025 13:30:00 and although it allows you to pick it as an option the date then disables in the picker after you choose it?

[psweb]

Going to do the exact same test and see what happens on my side, thanks again, at least i know it is possible that it can work, appreciate it.

Thanks @tehowden for tempting me to follow your exact test, it actually taught me something very valuable.
Upon initial testing it did not work like your video at all, and i was adding formatters to the start and end dates trying to force it to work.

The Formatters actually seem to completely break the functionality as far as the invalid dates option goes, so the start and end dates had to have no formatters at all
The project options on my development target were set to Etc/UTC on the timezone, so i had to set that to my country Africa/Johannesburg
The DB Connection in the Global server action was set to default Driver, and i had to set that to local rather, and now it all works like a dream.

So appreciate it, I should have done the simpler test, was far quicker to diagnose the issues without hundreds of dates etc.

Update: One of the main things I think it does not like is this ternary operation

<input id="date_range_av_caity" name="date_range_av_caity" is="dmx-date-range-picker" showdropdowns="true" timepicker="" use24hours="true" minutes-increment="30" dmx-bind:mindate="var_current_date.datetime" dmx-bind:maxdate="var_current_date.datetime.addYears(1)" data-rule-time="" dmx-bind:invaliddates="sc_google_calendar_nails_caity.data.final_salon_booked_and_post_block"
invaliddates-start="startDate ? startDate : startDateTime" invaliddates-end="endDate ? endDate : endDateTime">