🗓 Air Date/Time Picker Pro Plugin by Zeroqode

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.

Key features:

  • Dynamic Picker Types
  • Optimized Performance
  • Calendar Visibility Options
  • Animations Support
  • Time Zone Compatibility
  • Dynamic Titles and Additional States
  • Mobile Mode
  • Days/Month/Year Navigation
  • Time and Hour Format Customization
  • Calendar Positioning
  • Color Style Customization


Live demo: https://zeroqode-demo-27.bubbleapps.io/air_date_time_picker_pro


Air Date/Time Picker Pro


No-Code App Plugins for Bubble | Zeroqode

Levon Terteryan
Founder @ Zeroqode

#1 Bubble Publisher and Gold Tier Agency


:gear: 440+ Bubble Plugins
:iphone: Native app builder for iOS & Android
:man_technologist:t4: No-code Development Services

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!

1 Like

@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…

I have another issue whereby clearing the dates doesn’t result in the placeholder text showing again. It just shows a blank value.

Hello @2706mason, :wave:

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:

  1. 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.
  2. 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.
  3. Enhanced Settings: The Pro version includes settings such as maximum range length, allowing for more control over how users interact with the date picker.
  4. 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.
  5. 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.

Best regards,
Zeroqode Support Team.

Hi again @2706mason,

We replied to you about this in this thread which you created on ZQ forum: Air Date / Time Picker Issue - Zeroqode Forum

Best regards,
Zeroqode Support Team.

Hello @Jici, :wave:

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!

Best regards,
Zeroqode Support Team.


1 Like

Hello @Jici, :wave:

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. :pray:

Best regards,
Zeroqode Support Team.

Hello @Jici, :wave:

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. :pray:

Looking forward to your reply!

Best Regards,
Zeroqode Support Team.

Hi @Jici, :wave:

We hope you’re doing fantastic. Have you had the opportunity to check the new version of the plugin out yet?

We’re eager to hear your thoughts and any feedback you might have.

Looking forward to hearing from you soon!

Best regards,
Zeroqode Support Team

My test was just using your demo page. The problem is not solved according to this page.

Hello @Jici, :wave:

Please accept our apologies for the delay over the weekend. :pray:

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:

Please let us know what are you trying to achieve in the end, so we could assist you better.

Best regards,
Zeroqode Support Team.

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.

Hello @Jici, :wave:

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!

Best regards,
Zeroqode Support Team.