Search code examples
salesforcesalesforce-lightning

lightning-input type = "date" picker's hover and active states to be darker color for WCAG

lightning-input type = "date" picker's hover and active states to be darker color for WCAG <lightning-input name="dob" class="validate dob" type="date" label="Date of Birth (mm/dd/yyyy) value="person.dob" date-style="short" onChange="checkDatesDOB" required

for the above date picker we need to apply dark background on the dates and month arrows (around the month) when hovered over or clicked on for accessibility. Can someone help how to style the above requirement. Some articles say we need build custom date picker from scratch .. how to go about it ?

Or I read on here we can use loadStyle as static resource and then apply styles for inside levels .. I am not sure how the inside tags of date picker look like after clicking to bring up the date picker. Can you help with simple example using the loadStyles method or the other where a child style element is inserted below link

https://hellosnl.blogspot.com/2019/07/lwc-override-css-of-standard-lightning-components.html I appreciate your time and help

Solution

  • Might help someone .. I found 2 ways to solve it based on this blog post - https://hellosnl.blogspot.com/2019/07/lwc-override-css-of-standard-lightning-components.html

    1. create a style element, assign style class body, the appendChild in the DOM renderedCallback() { const style = document.createElement('style'); style.innerText = c-hello-expressions .slds-card__header { background-color: #54C2B2; }; this.template.querySelector('lightning-card').appendChild(style); }

    2. loadStyles using the code in the blogpost above.

    I also had asked for help on changing the date format of lightning input control and the solutions are -

    1. The lightning-input type='date' control's date format can be changed by changing the public guest user's locale for the community site (Setup > Site (Not All Sites) > edit on corresponding site row > manage public settings > manage users > Public guest user ), based on the locales I checked for most of North America I found only m/d/yyyy and yyyy-mm-dd are supported. Note, you can also use the dateStyle attribute on the control's html to use the medium (Oct 7th, 2022) and long (October 7th, 2022) formats.

    But I wanted 'mm/dd/yyyy' and another way is to use - 2. use standard html input control of type = "date" Example:

    <label class="slds-form-element__label" for="date-input-id-default">Date</label>
<input type="date" id="start" name="trip-start"
value="2018-07-22" class="slds-input"
min="2018-01-01" max="2018-12-31">