How to change lightning:input type="date" in MM/DD/YYYY

Hello Trailblazers!

In this blog post, we are going to learn about how to use <lightning:input> tag to show DATE in MM/DD/YYYY format. As we know that components in the ui namespace are deprecated as of API version 47.0. It is  recommended that we should use components in the lightning namespace instead.

Example:

Using dateStyle Attribute

<div class="row slds-box"> 
     <lightning:input type="date" name="input1" label="Short Date"  dateStyle="short"  />  
     <lightning:input type="date" name="input2" label="Medium Date" dateStyle="medium" />  
     <lightning:input type="date" name="input3" label="Long Date"   dateStyle="long"   />  
</div>

Output:

dateStyle Attributes

• The display style of the date when type='date' or type='datetime'. Valid values are short, medium, and long. The default value is medium. The format of each style is specific to the locale. This attribute has no effect on mobile devices.

• Dates are displayed by default in a medium-length style, such as Dec 25, 2019 in the en-US locale. To specify a short style such as 12/25/2019, set dateStyle="short". To specify a long style such as December 25, 2019, set dateStyle="long".

• If a user enters a date using a different style, the component accepts the input and reformats it to the specified dateStyle during the blur event. The date entered must be valid for the user's Salesforce locale, and match one of the short, medium, or long styles.

References

• Lightning Aura Components Developer Guide