Air Date Picker by Zeroqode

[giovanni.cassanelli]

Hello @ZeroqodeSupport , @ZeroqodeTeam or anybody else
Do you know if there is a way to set the background of the Air Date Picker by Zeroqode through CSS or other ways ?

I mean the display calendar this way :

I managed to change the color through the inspector but cannot figure out how to change it from bubble…

The plugin is amazing btw

Thanks

Giovanni

[agilejelly]

hey there! How did you target the background color of the picker? I am trying to find the class through the inspector but cannot find it. Thank you in advance!

[2706mason]

I was able to do this with the following via an HTML plugin:

<style>

.air-datepicker {
   background: #2a2a2a !important;
   border: rgba(0,0,0,0) !important;
   border-radius: 0px !important;
   box-shadow: 0px !important;
   --adp-border-offset: 3px !important;
   margin-top: -10px !important;
}

.air-datepicker-nav {
   background: #2a2a2a !important;
}

.air-datepicker nav {
   color: #BDBDBD !important;
}

.air-datepicker-nav--title i {
   color: #BDBDBD !important;
}

.air-datepicker--pointer:after {
   background: #2A2A2A !important;
}

</style>

[quinteros.leonardo]

Hi there!
How did you find out which elements to change?
I’m trying to customize more things and it would be rally helpful to take a look at what can I modify.
Thanks a lot!

[LA81638]

@ZeroqodeSupport I’ve always had the air date picker set to place holder value of the aircalendar but after updating both plugins the ‘month’ is no longer showing and the date previously changed when the my arrow icons were clicked, but this also isn’t working anymore.

Any advice please?

[ZeroqodeSupport]

Hello @quinteros.leonardo,

Thank you for your message. We apologize for the delayed response as we initially missed this thread.

Regarding your question about customizing different style attributes for your elements, here are some steps you can follow to achieve this:

1. Start by adding a Bubble HTML element to your page. It can be small, like 1x1 pixels, so it doesn’t disrupt your app’s design.
2. Assign an ID Attribute to your element, though most of the time if won’t be required.
3. For further customization, open the browser console, select the element you want to modify, and use its class name to change style attributes (as illustrated in this image).
4. Use the class name along with the CSS attribute you wish to alter, in the HTML element, similar to the example shown by @2706mason previously.
5. For more information on CSS styling, you can read here. Don’t forget to add “!important” to ensure it overrides any existing styles.

We hope this information is helpful to you. Please let us know if you have any more questions or need further clarification.

Thank you once again, and we look forward to your feedback.

---

---

---

Hello @LA81638,

Hope you’re doing well.

We’ve already addressed your question in another thread, but I’m posting here too to ensure you receive the response promptly.

After version 3.83.0, the “placeholder” value is set to only take the initial value, meaning it won’t update dynamically, as the value of “current view title” is empty when the Air date/time picker is innitialized. However, based on your feedback, we’ve decided to revert this change, and in the upcoming plugin version, it will function as it did previously in your application.

If you have any further questions or suggestions in the meantime, please don’t hesitate to reach out.

Thank you once again, and I wish you a great day ahead!

Best regards,
Zeroqode Support Team

[LA81638]

Thanks @ZeroqodeSupport I’ve added a text field over the top so solution found

[ZeroqodeSupport]

Hello @LA81638,

Thank you for keeping us in loop.

It’s indeed a clever solution! I’m glad to hear you’ve successfully implemented it. In any case, with the upcoming plugin update, you’ll have the option to dynamically change the placeholder text, which will offer even more flexibility.

Thanks again, and take care!

Best regards,
Zeroqode Support team

[ZeroqodeSupport]

Hello @LA81638,

Hope this message finds you well.

We wanted to inform you about the latest update for the Air date/time picker plugin - version 3.91.0. We’ve reintroduced the functionality to dynamically change the placeholder’s value, restoring its behavior to that of previous versions.

Could you please take a moment to update the plugin and let us know if everything is functioning correctly? Also, please let us know if you have any other questions or need further assistance.

Thank you once again, and I wish you a fantastic week ahead!

Best regards,
Zeroqode Support Team