Hide calendar picker indicator

[AndreasRavn]

I would like to remove the calendar picker indicator for a wa-input type time or date, but can't seem to scope it the right way. Normally I would just do:

input[type=time]::-webkit-calendar-picker-indicator { display: none; }

but converting it to wa-input doesn't seem to work, I've tried both:

wa-input[type=time]::-webkit-calendar-picker-indicator { display: none; }

and

wa-input[type=time]::part(base)::-webkit-calendar-picker-indicator { display: none; }

without luck. I think it's because it's a "shadow dom within a shadow dom"? Is it possible to hide these indicators for wa-inputs?

(For now I'm just using plain inputs styled by WA which works, but I would like to use wa-inputs).

[claviska]

The platform doesn't allow targeting pseudo selectors inside shadow roots, so I don't have a good answer for you without injecting custom styles into the shadow root with JS (not recommended).

What's your use case? We may be able to facilitate it with an API improvement in an upcoming release.

[AndreasRavn]

What's your use case? We may be able to facilitate it with an API improvement in an upcoming release.

I'm doing a shift planner for internal use at my company. The department using it is keyboard heavy and needs to input a lot of data, so I need to make best use of available screen estate. A input field with the little clock icon, easily takes up 50% more than the one without it, and for my use case it's not needed (ie keyboard heavy). Small example of my setup below, but in production theres easily 20 lines of inputs.

But more generally speaking, the icon and its size differs between browsers, which makes it hard to scale perfectly with other inputs (see example above) and doesn't fit with the unified look of WA. Examples of icons:
Chrome
Edge
(And even more confusing, Safari doesn't even show this icon anymore, despite laying name to it)

My ideal solution would be to hide it completely, and have a "withPicker" property on wa-input, which then shows a WA defined icon (like caret) instead of the browser default. Or always show the WA picker icon, and let me disable it with withPicker=false.

[claviska]

Got it, thanks!

For now, have you seen this page? You can get WA styles using native elements, too.

https://backers.webawesome.com/docs/native/input#time-and-date-pickers

[AndreasRavn]

I have, and am using it allready ☺️ (Would just prefer to go all in on the wa- components). Love what you are doing, and I'm looking forward to seeing the progress over the coming months! (The weekly updates are a great idea.)