+ Start a Discussion
Narendra Reddy GopavaramNarendra Reddy Gopavaram 

Lightning Component ui:inputdate value format and validation issue in desktop and mobile browser?

Hi All,

I am facing issue with ui:inputDate format and validation in desktop and mobile browser.

When selecting date from date picker it is working fine without any change action, but when entered date manually it is not validating.

For change action i have written below Cmpctrl.js
<label><b>Birthdate</b></label><br/>
<ui:inputDate aura:id="bdate" change="{!c.datehandler}" class="slds-input select-auto-width" value="{!v.con.Birthdate}" displayDatePicker="true"/>

datehandler : function(component, event, helper) {
        var dob = new Date(component.find("bdate").get("v.value"));
        console.log(dob);
        var formattedDoB = dob.getMonth()+1+ '/' + dob.getDate() + '/' +  dob.getFullYear();
        console.log('formattedDoB'+formattedDoB)
        component.set('v.con.Birthdate',formattedDoB);
    },

With above ctrl.js when selecting date from datepicker or entering manually it display unknown value, see below image.
User-added image

Please help me to resolve my issue. Advanced Thanks...
David Zhu 🔥David Zhu 🔥
Hi Narendra, It seems your data binding has an issue. 
Can you check if v.cn.Birthdate is a valid attribute and it is case sensative?    value="{!v.con.Birthdate}"

You may try add change that binding to a temporary attribute:
add line:
<aura:attribute name="Birthdate" type="Date"/>

Update line in html
<ui:inputDate aura:id="bdate" change="{!c.datehandler}" class="slds-input select-auto-width" value="{!v.Birthdate}"

and js file

 component.set('v.Birthdate',formattedDoB);

This can confirm your change method is work.

It could be when you retrieve data in Apex, the Birthdate field is not in SOQL.