Weird native date picker issue in mobile view

Design help General
1

Hello!
I’m trying to implement a standard date picker, using the custom element. In the settings pane I’m setting the tag to “date”, and I’m creating a custom attribute of type=date. I’m then getting a date picker in the designer, visible in both the desktop and the mobile preview views. BUT, whenever I publish this to my staging site, the date picker in mobile view is transformed into a gray box. It still renders in desktop view though. Does anybody have any ideas what could be wrong here?
Many thanks
Jacob

Here’s the staging site

Here’s the read-only link:
https://preview.webflow.com/preview/sebastians-fabulous-site-9cac12?utm_medium=preview_link&utm_source=designer&utm_content=sebastians-fabulous-site-9cac12&preview=796a395e8f5656d3c579c5ac3dfcfa39&pageId=673de7fa9bed3f1dad074256&locale=en&workflow=preview

2

Hey Jacob,

For the community to help you’ll need to share your readonly designer link and a published site link, both to the page you’re asking for help with.

3

Thanks, I’ve updated the post.

4

It’s working fine at the mobile breakpoint on a desktop browser ( Chrome / Win ) which means that it’s likely a problem on a specific mobile device browser.

What are you seeing the problem on?

The only thing I see wrong with the code is that you have;

<input type="date">

With no name attribute. It means in theory the browser would know what it’s capturing, but that it would be rather meaningless since it couldn’t really submit it anywhere. I’d fix that and see if it helps.

5

Thank you!

The issue appears when I visit the staging site on my iPhone 13. See attached screen shot. More specifically, what should I do with the name attribute? Should I add one? I’m not that familiar with coding, so I don’t understand what you mean.

IMG_37370EDFD0FC-1
IMG_37370EDFD0FC-11170×2532 85 KB

6

I’m guessing that’s Safari in your screenshot?
A quick search and you can find some of the problems and limitations with date type fields;

In short, the date type field has some longstanding issues, different UX’s for each device type, and poor support on older browser versions.

You’re likely dealing with one of those issues.

It’s possible Safari is just freaking out because there is no name attribute, and it doesn’t know what to do with your input field. You’ll want to give it a name, same as you would in the Webflow designer to any other field type.

The approach I generally use is to use a lib called Flatpickr which creates a more consistent UX for the date picker. IIRC you can use it with a standard type=text field which simplifies working with it in the designer also.

1 Like
7

Thanks a lot for your input. I still haven’t figured this out, but this might be a good clue.