What kind of date picker plugin would you use to achieve this kind of design?

[jayyoms]

Hey peeps

What kind of date picker plugin would you use to achieve this kind of design?

[djtochner]

If you’re looking for a design like this or any custom design, you can achieve this with a little workaround and make it your own date picker:

1. Create a group and add a text element on the left and an icon of your choice to the right
2. Create a focus group with the exact same size as the icon, and place it on the icon (using the offset values). Make its background invisible.
3. Inside the focus group add a regular date/time picker. Change all the date/time picker colors to invisible (font, background, border) and remove all conditional formatting as well.
4. Create a workflow that shows the focus group when clicking the icon, and set focus on the date/time picker
5. Set the text element to show the date/time picker, formatted as dd.mm.yyyy

Hope this helps

[jayyoms]

Thanks for the speedy response.

I’m actually trying this solution, by your Gif it looks like you got it working which is great. I’m excited to do the same

However having a hurdle with the group focus element as it’s not finding the icon reference

I did a screen share to explain the issue I’m having

[djtochner]

OK If I understand correctly this date/picker is supposed to be in a repeating group?
If so, it’s a little trickier to add the group focus there as group focus’s can’t be added to repeating groups in a traditional way. What you need to do is to make the calendar icon a reusable element, and add the group focus in the reusable element editor.

[jayyoms]

Yes okay that makes sense.

Yes I did try the repeating group option

But Bubble doesn’t like it

[djtochner]

Your’re editing on the wrong page

Edit the reusable element date icon from the Reusable element editor page

[jayyoms]

Thanks that worked like a charm.

Just needed to ensure I was editing the reusable element date icon from the Reusable element editor page like you said