Introducing the revamped Air Date Time Picker Pro plugin: sleek, dynamic, and more user-friendly. Eliminate the need for multiple picker types with our all-in-one solution that effortlessly switches between single-day, range, or multi-day selections. Enjoy enhanced interface animations that add a touch of flair, and take full control over the calendarâs appearance with customizable visual styles. Navigation is a breeze with intuitive month-by-month scrolling, allowing for seamless and versatile plugin use. Tailor the color scheme to fit your taste and elevate your user experience with our concise, powerful plugin.
I canât tell what the difference is between this and the free version. Can you please summarize it?
Does this support modification of the calendar background (for dark mode, for example)? If not, is there a way to do this with custom CSS? Iâve tried targeting the âair-datepickerâ class with no luck. Would love some help here!
@levon From your demo, if we âescapeâ the date selector, this doesnât trigger update of states. Only if we click OK. However, the selected date(s) will remain in the input fieldâŚ
Thank you for your question. The Air Date/Time Picker Pro by Zeroqode is an advanced version of the free Air Date/Time Picker plugin, offering enhanced features and customization options to better cater to a wide range of application scenarios. Here are the key differences and added functionalities in the Pro version:
Dynamic Picker Types: This feature allows you to flexibly switch between single day, range, and multiple days picker types, enabling a more versatile application of the date picker depending on the user scenarios you are addressing.
Dynamic Titles and Additional States: With the Pro version, you can offer personalized experiences through dynamic titles, making the interface more user-friendly and tailored to individual user needs. Additionally, the inclusion of more states improves usability by providing more interactive and responsive feedback to users based on their actions.
Enhanced Settings: The Pro version includes settings such as maximum range length, allowing for more control over how users interact with the date picker.
Code and Elements Fields Optimizations: The Pro version brings optimizations to the code and elements fields, ensuring smoother performance. These improvements contribute to a more efficient and streamlined experience.
Aside from these major enhancements, the Pro version also includes several minor improvements that enhance the overall functionality and user experience of the plugin.
Regarding dark mode, the feature to modify the calendar background for dark mode is not directly supported in the plugin settings, custom CSS can indeed be used. Additionally, exploring forums for insights on CSS customizations specific to dark mode can provide more targeted guidance.
To better assist you, could you please record a short video using Loom that demonstrates the issue? This will help us understand exactly whatâs happening and provide you with a more accurate solution. Please share the Loom link here once youâre done. Thanks for helping us improve!
Thank you for sharing the video. When the âOKâ button is enabled, you must click âOKâ after selecting a date for the selection to be finalized. Conversely, if you donât use the âOKâ button, the selection will be automatically finalized.
However, weâve observed an issue on our end where all buttons should be disabled if we want an auto selection. Weâve forwarded this to our development team and will inform you once itâs fixed.
Please feel free to reach out if you have any additional questions or concerns.
We are pleased to inform you that our plugin was updated, and the latest update which is version 1.6.0. - Fixed interaction between âAuto Closeâ option and buttons. We hope this fix will meet your needs and look forward to hearing your feedback. Please update to the latest version to benefit from this improvement.
Please let us know if everything works well inside your app.
Please accept our apologies for the delay over the weekend.
Thanks for your message and for running a test using our demo page. To make sure we fully understand the issue youâre encountering, are you referring to a situation where you select a date in the picker but donât click âOK,â and yet the picker still shows the selected date as if itâs been confirmed?
If thatâs the case, what youâre experiencing is indeed consistent with how the underlying library of the Air Date/Time Picker Pro plugin is functioning.
On this test page Zeroqode-demo-27 | Bubble Editor you can see an example when the button OK is deactivated, and the picker is synchronized:
If user can select and blur/close selector, without clicking the OK button, the state should update with the selected value OR the input should be back to placeholder, not to selected value.
Regarding the behavior of the Air Date/Time Picker Pro plugin, it operates as follows:
If a user selects a date or time and then blurs or closes the selector without clicking the âOKâ button, the inputâs displayed value will change to reflect the selection, but the actual state associated with the picker wonât update until the âOKâ button is pressed. This is an intentional design choice to allow users to either commit to a selection by pressing âOKâ or dismiss it if they navigate away without confirming.
The state is only updated with the selected value when the user clicks the âOKâ button. This ensures that the state accurately represents a value that the user has explicitly chosen to submit.
So in summary, the displayed value in the picker may change as soon as a date is selected, but the state that your appâs logic should rely on doesnât update unless the user clicks âOKâ. If the button OK button is disabled, then the state will be updated immediately.
This behavior is because of how the underlying library works (It means if you select a date â picker value changes) and provides a clear distinction between an interim selection and a confirmed choice.
We hope this clears up how the date/time selection and state update process works with our plugin!
Is there anyway this element doesnât toggle close the GroupFocus when clicked? Currently anytime this element is nested inside a GroupFocus, it toggles the GroupFocus when a date is selected (if the calendar is displayed outside the groupfocus). The only way to solve is to make the groupfocus big enough to cover the calendar which isnât ideal.
Bubbleâs native datepicker works well when nested inside a groupfocus, it is possible to implement for this plugin as well?
Regarding your inquiry about using the Air Date/Time Picker element within a Group Focus, itâs important to consider two scenariosâwhether the âDisplay Calendar Alwaysâ field is checked or unchecked.
When the Display Calendar Alwaysfield is disabled, the calendar is rendered at the bottom of the page, which places it outside the Group Focus. Clicks on the calendar are recognized as clicks elsewhere on the page, causing the Group Focus to close immediately.
When the Display Calendar Alwaysfield is enabled, the calendar is rendered within the plugin element, meaning it stays within the Group Focus. Clicks on the calendar are treated as clicks on the Group Focus, so it remains active.
Possible solutions:
To enable Display Calendar Alwaysfield for Air Date/Time Picker element placed in Group Focus. MOST PROBABLE
Show the Group Focus every time when the calendar is hidden event is triggered. CREATES BLINCKS FOR GROUP FOCUS
Show the Group Focus every time when the value is changed event is triggered. CREATES BLINCKS FOR GROUP FOCUS
440+ Bubble Plugins
Native app builder for iOS & Android
No-code Development Services
