Updating input[type="date] calendar when dark mode activated

[pamgaiguer]

hey guys, I was using the library and found an update that could be done :

I had to use this block of code to update the calendar icon :

  input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    margin-right: 2px;
    opacity: 0.6;
    filter: invert(0.8);
  }

  input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }

[vinorodrigues]

This is a good catch - but Bootstrap (core) does not provide input CSS styling to input[type="date"] types.

The code you provide would be "in addition" to core - something I've tried to stay away from. i.e. something that should be submitted to core (i.e. the twbs/bootstrap project) not this PoC.

(Then again I do have the dark/_patch.scss file - so that would be hypocritical of me not consider this.)

This is IMO a "bug" that will need to be addressed tho ...

From what I can see right now this is not only a date type issue either ... there are also:

<input type="date">
<input type="datetime-local">
<input type="month">
<input type="time">
<input type="week">

Also, from what I can see this is a Chrome/Edge specific issue too as Safari and FF don't display the icon - In your experience, have you tested this across all the browsers to see if it's an issue with non-webkit browsers? (I've only tested on a 2013 iMac)

[vinorodrigues]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
https://dev.to/codeclown/styling-a-native-date-input-into-a-custom-no-library-datepicker-2in