I have a simple lightning:input type="date" in aura component and it is behaving different in desktop vs mobile. Can someone suggest how o make it consistent across both. Preferred is I see mm/dd/yyyy in desktop too. or hide mm/dd/yyyy in mobile using CSS?

Here is the sample code. DateCheck.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="birthDate" type="Date" access="private"/>
    <lightning:input type="date" label="Test"
                                 ariaLabel="Lightning Test"

In Desktop:

enter image description here

In Mobile it behaves different:

enter image description here

1 Answer 1


From the docs:

On desktop, lightning:input provides its own date picker that's styled with the Lightning Design System. On mobile devices it uses the native date picker which has different styling.

I think you can use the placeholder attribute to get the same "mm/dd/yyyy" text on both.

  • 1
    place holder is just text, but the mobile version mm/dd/yyyy works with tab and changes based on country locale.
    – shaan
    Dec 28, 2020 at 23:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .