Trying to set an active state on the Air Date / Time Picker (i.e. changing the border colour), but I cannot for the life of me find a trigger for the CSS change (:active, :focus, :focus-within, a new active class, etc.)
Any tips would be great!
Hello, @SJL
Thanks for reaching out.
Allow me to note that Air Date/Time Picker element is equipped with certain style editing capabilities. You can find them in the Bubble Editor:
Unfortunately, you can’t trigger the CSS layer for changing the style of the element.
In case if I missed your idea, please let me know.
Best regards,
I’m trying to trigger a change in style when active – similar to what happens with normal elements
Example with normal input elements (see the active client name input has a blue border)
However, with Air Date / Time Picker there is no change, only the popup is visible, but no border colour change:
Is there any way to do the same thing via any means?
Sometimes this is possible with javascript elements which add an ‘active’ class or something similar.
Hello, @SJL
Thanks for your question.
The reason you can’t trigger the Air Date / Time Picker is that it is not a standard input, as shown in your screenshot above.
However, please allow me to provide you a solution for your case. Please find my screenshots below:
-
Create a Group on your page and place the Air Date / Time Picker there:
-
Create a workflow for the Air Date / Time Picker with custom states:
Also, please find the screencast, where we reproduced your case for your convenience. Please use it and let us know if all is working on your side:
Hope it will help you.
Regards,
Thank you!
You can also do it without creating a group around the picker - it can all be done within the picker.
However, the Date Picker is Shown event does not get triggered when the picker is shown in version 3.5. Only the hidden event is triggered.
EDIT:
I just tested and rolled back to version 3.0 and it works, so somewhere between 3.0 and the 3.5 versions the Date Picker is Shown event has broken
Hello, @SJL
Glad to hear that our advice helps you.
Please note that we used the latest version (3.7/5.0) on provided screenshots. So, I can propose you upgrade your plugin to the latest version and give it a try.
We assure you that all is working properly on the mentioned one.
Hope it will help you.
Regards,
Sorry, you are right.
For some reason 3.5 is broken setting the state on picker shown in my popup, but will set on picker hidden. Version 3.1 will work.
I have created a new popup and it works on 3.5
Looks like I just need to remove and re-add my elements - I’ve noticed sometimes things break in the backend if you copy large elements (like popups) from one place to another.
Just done some more digging, and the Automatically PositionDate/Time Picker option breaks setting of state on Picker is Shown.
Unchecking that fixes the issue.
Auto Close is also not working if it is unticked - when you navagate away from the input, the previous/initial settings replace whatever you picked.
Hello, @SJL
Yes, you are right. Sometimes, deleting the elements and adding them, or reinstalling the plugin in the application can help to make it workable. Unfortunately, these things can happen and we can’t influence them.
Yes, this is correct. These options can be enabled or disabled with a checkbox based on the user’s needs.
Please allow me to recommend you one more time to upgrade your plugin to the latest version (3.7/5.0).
Best regards,
Ecaterina.
No, you’re not quite following.
Enabling automatically positioning the picker breaks setting states on picker is show - the picker is showevent does not work when automatically positioning the picker is active.
I’m not sure what version 3.7/5.0 is there is only version 3.5
Hello, @SJL
I apologize for the misunderstanding.
Allow me to note that we have tested the feature of enabling the Automatically position date/time picker when the plugin’s element is placed in the Group ( as it was proposed to you) and the issue was not reproduced.
However, we will check the issue with our development team and will let you know when it will be done.
Thank you for the understanding.
Best regards,
Hello, @SJL
By this message, I would like to notify you that we have fixed the issue, which appeared when the Automatically positioning of the plugin’s element is enabled:
Please upgrade your plugin to the latest version and give it a try. It will help you to work with an upgraded version.
Best regards,
Hello, @SJL
We are happy to hear that all is working properly. Please be free to contact us in case of necessity.
If you like our plugin, could you please rate it by going to the Plugins tab in Bubble editor? You can find the plugin by name and give it as many stars as it deserves 
The more feedback we get, the more motivated to build great plugins
Thanks! 