Log in to AnswerLog in to Follow
Tim Timperman
10Views
3Comments
Solved
AnimatedLabel + input date = no date picker icon
Question
Reactive
Application Type
Reactive

When you have a standard input field of type date, the browser automatically adds a calender icon and a date picker. (html5).

However, when you put that same input inside an AnimatedLabel, the calender icon disappears both in Chrome and Edge. It's very easy to reproduce, it takes 30 seconds.

Screenshots for chrome and edge.

This feels like a bug. I tried long and hard to make it appear (assuming it is there, but not visible) by using "input[type="date"]::-webkit-calendar-picker-indicator" but I have a feeling it's just not there.

Any ideas how to solve this?

0
0
on 23th Mar

Hello.

I made some testing and it seems that you were close on the CSS that you tried.
I sugest you to try the same thing with the following CSS selector:

.animated-label-input .form-control[data-input]::-webkit-calendar-picker-indicator

By using this and "display: block;" I managed to make it always visible. I did not went much deeper than this but feel free to ask if you need anything else.

Best regards.


Edit:
I tried to make it appear only when active and it works on my tests with this CSS. Try it and tell me if it works out for you:

.animated-label.active .animated-label-input .form-control[data-input]::-webkit-calendar-picker-indicator {
    display: block;
}
2
0
on 23th Mar

Thanks Tiago. That works perfectly. I did try a lot of css things, but clearly not that combination. Both your suggestions are correct and working as expected.

1
0
on 23th Mar

That is great to hear. You were pretty close to the correct solution.

Just a note, you can probably simplify the css selector and do some fine tuning on it. Anything else, feel free to ask.

0
0
on 23th Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.