1

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
     <br/>
    <lightning:input type="date" label="Test"
                                 aura:id="requiredInput"
                                 ariaLabel="Lightning Test"
                                 value="{!v.birthDate}"
                                 />
</aura:component>

In Desktop:

enter image description here

In Mobile it behaves different:

enter image description here

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
1
  • 1
    place holder is just text, but the mobile version mm/dd/yyyy works with tab and changes based on country locale.
    – shaan
    Commented 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 .