lightning-input type date, hide date format below the field

Question

NOTE: THE QUESTION DISCUSSES ONE FEATURE THAT IS IN WINTER '25

Today one of the Sandbox I am working on got updated to Winter '25. With these come some changes to LWC components. The one I just noticed is that for lightning-input for type='date', there's now a new formatter that displays below the field, which is really useful.

But, is there a way to remove this formatter?

<lightning-input type="date" variant="label-stacked" label="Quote due date"></lightning-input>

Edit: this is the loading screen;

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

Quote from documentation:

lightning-input component now displays the expected date format below the text input field for input types date and datetime

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

using a selector like this in your css will still allow regular errors to be displayed as the data-date-format attribute gets replaced when an error needs to be displayed.

[data-date-format].slds-form-element__help {
    display: none;
}

Answer 4

Following on Oliver's example, this is a bit more robust.

    export default class Foo {
      @api loaded = false;
      // In my case I added data-ui='Date Picker' to my date picker elements
      @api selector = "data-YOURSELECTORNAME='YOUR SELECTOR VALUE'":;
          
      async renderedCallback() {
        if (!this.loaded) {
          // This gets rid of date format below the field
          let style = document.createElement("style");
          style.innerText = "div[class=slds-form-element__help]{display:none;}";
          try {
            this.template.querySelector("lightning-input[" + selector + "]").appendChild(style);
            this.loaded = true;
          } catch (ex) {
             // renderedCallback() happens multiple times and before the inputs are rendered so we can eat this
          }
        }
      }