🗓 [FREE Plugin] Air Date/Time Picker

Showcase
1055

Hi @ZeroqodeSupport ,

I’m getting a repeatable bug using the “Clear” button on the calendar. When I click clear, then exit out of the popup that’s holding the calendar, then open the calendar again - the dates are not displaying.

1: Open popup with calendar

image
image620×980 46.3 KB

2: Clicked clear, closed popup, opened the calendar again:

image
image620×980 32.2 KB

3: Clicked clear again, closed then opened popup again:

image
image620×980 35.3 KB

1056

Hello, @ramzizi ,

Thank you for reaching out. :slightly_smiling_face:

We have thoroughly tested this and attempted to replicate the use case on our end, but unfortunately, we were unable to do so.
ezgif-248c58b5bdfed9

You may need to check the plugin version and ensure that you are using the latest one.
If the error persists, please share more details about your setup and specific use case so we can assist you more effectively.
Specifically, we’d appreciate it if you could share:

  • The Full Plugin Name + Link.
  • A detailed description of your use case.
  • Screenshots and screencasts show how you’ve set up the workflow, the plugin elements configuration, the problem occurring, and what you were expecting instead. For recording screencasts, Loom is a great option.
  • Please provide the type of device and operating system version you’re testing on and the version of the plugin you have installed. If error messages appear during screencasts, please make sure your browser console is open and send us a link to your recording.
  • If the plugin has an update available, could you try installing it to see if it fixes the issue? If the problem persists, please send us the more details requested above.
    We also suggest thoroughly reviewing our demo editor page and the documentation for successful plugin integration.

Thanks again and looking forward to your reply. :pray:
Best wishes,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1057

Hello!

It seems that the current timezone configuration is not working at all. I have tried both using the dropdown and writing several timezones in the input and none of them change anything.

Please be aware I am placing several date/time picker elements on the same page, in case this could affect the functioning (I want all of them to have the same timezone anyway).

image
image730×350 22.4 KB

Thank you in advance,

1058

Hello @jesuan94 :waving_hand:

Thank you for reaching out!

We’ve tested timezone changes on our demo and a fresh test page, and the picker behaves correctly with timezone management: https://seanhootsdemopro.bubbleapps.io/version-test/datetimepickerdyntimezone.

A common cause when it appears “not working” is that the page isn’t reacting to the timezone change. The picker exposes a change event, and you need a workflow that updates the displayed date/time when the timezone changes. For a smoother setup, we recommend storing the selected timezone in a custom state and using that state to drive the picker/value updates.

Please review the timezone section in our docs (https://docs.zeroqode.com/plugins/air-datetime-picker#4fa3c235db744194b799cf16deb99b68) and compare with our editor example to see the exact configuration and workflows:
Seanhootsdemopro | Bubble Editor

If you still see the issue, could you share a short screen recording and screenshots of your picker’s properties + the workflow that runs on timezone change? We’re happy to help you align the setup so all pickers on the page use the same timezone consistently.

Best regards,
Zeroqode Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1060

Hello @jesuan94 :waving_hand:

Just checking in to see if you had a chance to review our previous suggestions and the demo page for timezone management. Are you still experiencing issues with the date/time pickers and timezones? If so, could you share a short screen recording or screenshots of your setup, especially how the workflows handle timezone changes? This will help us pinpoint what might be causing the issue and suggest a more targeted solution.

Let us know if you need any further assistance—we’re here to help!

Best regards,
Zeroqode Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1061

Hi! Sorry for my late response I had not seen your message. I have been testing and I cannot find what is the issue, but it seems to me that the functioning is not correct yet. Please see the video recording below for all details. I can share access to the app in dm.

Troubleshooting Time Zone and Date Configuration Issues
Watch Video

Thank you so much in advance!

1062

Hello @jesuan94,

Thank you for the thorough explanations in the video.
We will review the setup and get back to you as soon as possible.
If any other questions come up, don’t hesitate to reach out — we’ll be happy to help.

Best regards,
Zeroqode Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1063

Hi @jesuan94,

We’ve consulted our dev team regarding the plugin, and here’s our response.

When you set a specific timezone in the picker (such as “Current user timezone”), the plugin will return the correct time for that timezone. However, after you save the selected date to your database, Bubble itself stores this value as a universal timestamp (UTC). When you later display this value in a text element, Bubble automatically shows the date and time according to the viewer’s current browser or system timezone—unless you apply custom formatting to force a specific timezone.

To see exactly how this works, you can try a quick experiment. Save a date using the picker with “Current user timezone” selected, store it directly in your database (with no extra formatting or conversions), and then display this value on a page just as it is. If you then use a browser extension to change your local timezone, you’ll notice the displayed time updates according to your new timezone. This is standard Bubble behavior, and it’s not specific to the plugin.

If your goal is to always show the time in a fixed timezone, regardless of the viewer’s location, you’ll need to use Bubble’s :formatted as operator and explicitly set the timezone in your text element. On the other hand, if you want users to always see the time in their local timezone, you don’t need to apply any additional formatting.

It’s also worth noting that using multiple pickers with the same timezone on one page should not cause any conflicts.

For more details, you can refer to the Air Date/Time Picker documentation and this helpful forum thread.

Let us know if it helped clearing the things out.

Best regards,
Zeroqode Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1064

Hi @jesuan94,

Just checking in — were you able to try out the suggestions we shared regarding timezone formatting and the :formatted as operator?

If the issue is still relevant on your side, feel free to share a quick update or let us know if you need any help applying a specific formatting setup. We’re happy to assist further if anything’s unclear.

Looking forward to your reply! :blush:

Best regards,
Zeroqode Support Team
Browse all Zeroqode Plugins for Bubble

1065

Hello!

Thank you too for your detailed reply. I think I understand it but I am not able to find out how to configure this use case (or whether it is possible):

  1. I have user A in Brazil who wants to save a given hour and minute (using time picker) in a different timezone (let’s say Spain). Ex. I am in Brazil and select 10:00 in the picker, I want this to be saved in database so that it corresponds to 10:00 Spanish time
  2. Now if an user from Spain opens the page the picker will display 10:00 so that is correct, nice
  3. Now, what about the user from Brazil? The picker should display 10:00 to him too and not 06:00 (4 hour difference)

Is this possible? Basically I just want that the time shown in picker is always Spanish (or other dynamic selection), but it seems to me that at the moment the data is processed twice (once when saving, another when displaying) and I cannot find an option to avoid the second part.

Thank you in advance

1066

Hello @jesuan94 ,

Here’s how you should do it:

  1. Set the picker’s timezone property to "Europe/Madrid" (Spain).

  2. Prefill the picker’s value with the saved date from your database, but use :formatted as to explicitly set the timezone to Spain:

    Database thing's date:formatted as (Europe/Madrid)

Result:

  • A Spanish user will see the correct date/time in their local (Spanish) timezone—no adjustment needed.
  • A Brazilian (or any other) user will also see the date/time as it would be in Spain (not converted to their own timezone), because both the picker and the prefill value are explicitly set to show the Spanish timezone.

This setup forces all users to interact with the time as it exists in Spain, regardless of where they’re located.

Note:
If you use only the :formatted as (Europe/Madrid) on display but the picker is set to “Current user’s timezone,” Bubble will convert it again to their local time. That’s why it’s important to set both the picker’s timezone and the display formatting to Spain, so the value stays fixed.

Best regards,
Zeroqode Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1067

How can I set the picker’s value to database thing’s date:formatted as? The moment I use formatted as then it will trigger an error because the input is evaluating to a date, not a text…

1068

Hello @jesuan94

Thank you for your patience and we apologise for any confusion earlier. We’d like to clarify what was meant in the previous message regarding setting up the date/time picker and how the timezone handling works in Bubble.

What we originally suggested when we mentioned using “formatted as” was to configure your date/time picker element to a preferred timezone. However, you are right: our statement that you could simply apply that operator on the “Database Thing’s Date” was inaccurate, because the “:formatted as” operator only works when converting a Date/Time value into text — it isn’t applicable to the raw date object when you’re pre-filling the picker element with an initial date.

Thanks to that confusion we dug further into the documentation, forum posts and manual pages, and here’s what we found about how Bubble treats picker elements and timezones, and how this explains what you’re seeing.

:face_with_monocle: What the docs say

According to Bubble’s “Time, dates and time zones” manual:

  • Dates/times are stored internally as a timestamp (i.e., milliseconds since epoch (UTC)). (manual.bubble.io)
  • When a datetime is displayed, Bubble by default converts it to the user’s browser timezone — unless a timezone override is applied. (manual.bubble.io)
  • The “Date/time picker” (input) element section notes: “If you set up the element to only ask for a date … and you have selected a different time zone in the Property Editor, the date will be saved at 12 am (00:00) in that time zone.” (manual.bubble.io)
  • Also: “Date-time inputs and pickers default to the user’s local time unless a timezone override is applied.” (manual.bubble.io)

:magnifying_glass_tilted_left: What this means in your case

  • Your database value is stored at a UTC moment (e.g., “2023-07-07T17:00:00.000Z”).
  • Your picker elements all show the same time even though you configured different timezone overrides.
  • The reason is: while you did set the timezone override on the picker, Bubble still treats the picker primarily as an input element — meaning the timezone override affects how input is interpreted/saved, not necessarily how the initial date value is displayed back to the user in the way you expect.
  • The picker is likely ignoring the timezone override for display of that initial content, rather than converting per each timezone override you set.
  • As a result, you end up with the same “local time” across the different pickers even though you wanted to show them in different timezones (São Paulo vs Madrid, etc).

:white_check_mark: Two possible workaround methods

While, regrettably, you can’t rely solely on the picker’s timezone configuration to display the initial date differently for each timezone in the way you envisioned, you can achieve your desired setup using one of the following:

  1. Use a text element (or other output) to show the formatted date/time
  • Use a Text element (or dynamic expression) that takes that datetime and does “:formatted as” and picks the timezone you want (e.g., Europe/Madrid or America/Sao_Paulo) so you show each user the correct local time.
  • This is entirely display-only, no picker involved for that timezone difference.
  1. Use date manipulation operations to display a shifted value
  • Populate the picker with the date value from your database.
  • Then, if you know your desired offset (e.g., São Paulo is 4 hrs behind Madrid in your example), add or subtract hours accordingly using “+ hours” (or “− hours”) in the expression.
  • You can also create conditional expressions based on the user’s timezone (or a selected timezone) to dynamically determine the shift.
  • This way you control how the datetime is adjusted for display, independent of what the picker’s timezone override does.

Let us know if this explains it!

Best regards,
Zeroqode Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3