How to remove expected date format in lightning-input element?

Question

EDIT: This is a duplicate question. Answer here if you have a good answer: lightning-input type date, hide date format below the field

With the Winter '25 release there is an update that adds the expected format for a date or datetime below it. This is supposed to help the user enter a date when not using the date picker.

e.g.

Is there a way to get rid of this?

I've had a look at the HTML for this div and it uses the class slds-form-element__help which doesn't have a styling hook, and I can't find any configuration on the lighting-input component.

Winter '25 Release Information: https://help.salesforce.com/s/articleView?id=release-notes.rn_lc_base_component_accessibility.htm&release=252&type=5

Improve Accessibility with Base Lightning Components

The lightning-input component now displays the expected date format below the text input field for input types date and datetime. This informative text helps users who enter the date in the text field instead of selecting from the date picker. Previously, users were informed of the expected format in an error message if they entered the date incorrectly.

Answer 1

You can get rid of the expected date format under the DateTime/Date fields by overriding the CSS using the LoadStyle method as explained below:

Step 1: Upload Static Resource

1. Create a RemoveDateFormatStyle.css file using Notepad++
2. RemoveDateFormatStyle.css should contain the below CSS:

        .date-format-hide .slds-form-element__help{
            display: none;
        }
        .date-format-hide .slds-show{
            display:block;
        }

3. Upload it as a Static Resource in SF and make it public.

---

Step 2: Add a class to your LWC Input Date Element

1. Add a class to your input element of type date which should hide this expected date format.

<lightning:input class="date-format-hide" type="date" name="input1" label="Enter a date" />

---

Step 3: LWC LoadStyle

1. In your JS file of your LWC component, import the below two lines:

    import { loadStyle } from 'lightning/platformResourceLoader';
    import styles from '@salesforce/resourceUrl/RemoveDateFormatStyle';

2. Use RenderedCallBack to load your customized style into the DOM.

   renderedCallback(){
        Promise.all([
            loadStyle(this, styles) //specified filename
        ]).then(() => {
            window.console.log('Files loaded.');
        }).catch(error => {
            window.console.log("Error " + error.body.message);
        });
    }

Hope this helps!!

Final Result:

Answer 2

Use the below in rendered callback to remove that label,

html-

<lightning-input required type="date" label="Date of Birth" data-field="Date_of_Birth__c" value={value}></lightning-input>

js-

loaded = false
renderedCallback() {
 if(!this.loaded) {
  let style = document.createElement('style')
  style.innerText = 'div[class=slds-form-element__help]{display:none;}'
  this.template.querySelector("lightning-input[data-field='Date_of_Birth__c']").appendChild(style)
  this.loaded = true
 }
}

Answer 3

You can get rid of the expected date format under the DateTime/Date hook --lwc-fontSize2: 0rem;