Zerocode Air Date/Time Picker - enable picking single days and day ranges

Hello!

For my appliccation I am using the Air Date/Time Picker from zerocode. There I am blocking dates that were already booked. now I want enable users to be able to choose only one single date. However currently it only allows me to choose ranges and as I block the days that are already booked a single day that is just right in front of a blocked date cannot be correctly chose. Anyone knows how I can solve this? thank you!





Hello @48587,
Thanks for reaching out!

Unfortunately, you cannot select a single date as your picker type is “range”. You need to use 2 elements, in order to choose “single date” or “range”. So, one of them will allow your user to select a specific date, and the second will allow them to select a date range. Because it’s not possible to change the mode in a single plugin element.

In case you have any other questions, please let us know.

Best regards,
Zeroqode Support Team

Hello Guys.
I have a problem as well… It’s more subtle.
I arrived at the conclusion you must use the plugin 2 times to give possibility of selecting EITHER a single day OR a range.

The problem, though, comes in case the user has erratic behavior and:
1-chooses a single day,
2-Chooses a range
3- navigates further.

In this limit case, I pass thedates in the URL for future needs, and , unfortunately, both the range AND the single date are passed, messing things down the line.

Do you have any suggestion on how to make it so that each time the user toggles between SINGLE date picker and RANGE date picker, the non used picker’s value disappears and is NOT passed in the URL??

Thanks

Hello @danpagano82,
Thanks for reaching out!

You can create a flow that will pass an empty value when the date of one of the pickers changes.

e.g. When AirDate/TimePickerv2 A Value change → Set date for picker B as empty

Summary

If that doesn’t help please share a screen recording showing all your setup, (here or via DM) and the expected result. :pray:

Best regards,
Zeroqode Support Team

1 Like

It worked! now I had many other experiments going on, and it seems to be broken. It works only for the case in which a RANGE is selected after a single dates is selected (and the single date is correctly erased). But if the user selects a range and then a single day, then the RANGE is still in the selection, messing up the following flows.
Is the setting in the pics not what you suggested? Where does it goes amiss?


Hello @danpagano82,
Apologies for the late reply. :pray:

We’ve tested the plugin but it’s not reproducing on our side. Could you please send a video recording showing the entire setup, the issue you see, and the expected result? You can send us the details via DM or mail to support@zeroqode.com.

Hope to hear from you soon.

Best regards,
Zeroqode Support Team

Hi! I just went through the process of updating from V1 to V2, almost 1000 queries and conditionals, to find that I can’t choose a single month (on month view) as I was able to do in V1.

In the end what we need is that when 1 month is selected, the start and end dates of the range be the same but now it returns an empty value. Hopefully this is an easy fix and can be implemented as it was in V1.

@ZeroqodeSupport facing an issue with the plugin, the calendar and time picker elements are not relative to the plugin element.


this is the error i see in my debugger:

Bug in custom code TypeError: Popper.createPopper is not a function
at k (PLUGIN_1495642567089x595986733356023800/-Air-Date-/-Time-Picker-update–Air-Date/Time-Picker-v2-.js:3:6998)
at j.setPosition (https://cdn.jsdelivr.net/npm/air-datepicker@3.3.0/air-datepicker.min.js:7:28338)
at j.show (https://cdn.jsdelivr.net/npm/air-datepicker@3.3.0/air-datepicker.min.js:7:42971)
at HTMLInputElement. (https://cdn.jsdelivr.net/npm/air-datepicker@3.3.0/air-datepicker.min.js:7:34262)
at HTMLDivElement. (https://cdn.jsdelivr.net/npm/air-datepicker@3.3.0/air-datepicker.min.js:7:34454)
at root (PLUGIN_1495642567089x595986733356023800/-Air-Date-/-Time-Picker-update–Air-Date/Time-Picker-v2-.js:3:6998)

Hello.
Have you found a solution to the problem?
I have the same problem now

Hello @anastasiacon1002
Thank you for reaching out to us and providing more details about your use case.

You are indeed correct that another plugin or script within your app that utilizes Popper.js is causing a conflict with the Air Date/Time Picker plugin. This type of conflict is not uncommon when multiple plugins or scripts try to use the same resources or libraries, leading to unpredictable behavior. Removing the conflicting plugin will be the fastest way to solve the issue and ensure that the Air date/time picker is functioning well.

If the conflicting plugin is essential, I suggest looking for alternative plugins that offer similar functionality but do not rely on Popper.js, or are known to be compatible with the Air Date/Time Picker.

Hope that was helpful :pray:.
Best regards,
Zeroqode Support Team.