function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
IntroAmmyIntroAmmy 

date format in lightning component

Is there any way to accept dd/mm/yyyy format date in lightning component

date field 
               <lightning:input aura:id="birthdate" label="DOB="{!v.leadObj.HealthCloudGA__BirthDate__c}"
                                type="date"  displayDatePicker="true" 
                                 required="true" onchange="{!c.changeDate}" format="mm/dd/yyyy" dateStyle="short" />

I also checked with format="dd/mm/yyyy" its not working it only accepting mm/dd/yyyy
tried also datestyle attribute in component as short but accepting same mm/dd/yyyy

.js
where i am calulating age based on DOB

var birthday = component.find("birthdate").get("v.value");
if(birthday !=null ||  birthday!=undefined)
        {
            var optimizedBirthday = birthday;
        }
        else{
            alert("Enter correct date format");
        }
        
        // it will accept two types of format yyyy-mm-dd and yyyy/mm/dd
        //var optimizedBirthday = birthday.replace(/-/g, "/");
        //set date based on birthday at 01:00:00 hours GMT+0100 (CET)
        var myBirthday = new Date(optimizedBirthday);
        // set current day on 01:00:00 hours GMT+0100 (CET)
        var currentDate = new Date().toJSON().slice(0,10)+' 01:00:00';
        // calculate age comparing current date and borthday
        var myAge = ~~((Date.now(currentDate) - myBirthday) / (31557600000));
        // alert(myAge);

Thanks,
ShivankurShivankur (Salesforce Developers) 
Hi IntroAmmy,

This is known behavior with lightning:input tag and it results in 3 different formats.

In order to resolve the issue, you can go with ui:inputDate like below: 
<ui:inputDate aura:id="birthdate" label="DOB="{!v.leadObj.HealthCloudGA__BirthDate__c}" type="date"  displayDatePicker="true" required="true" onchange="{!c.changeDate}" format="dd/mm/yyyy" />
Refer this code as well if you want to try other options: 
<aura:component >
<lightning:input type="date" name="input8"  aura:id="inpDate" label="Dates" value="2017-09-07" format ="DD/MM/YYYY" onchange="{!c.myAction}" pattern="([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))"/>    
</aura:component>
JS controller: 
({
    myAction : function(component, event, helper) {
        var dates = component.find("inpDate").set("v.pattern","([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))") ;
        console.log(dates );    
    }
})

Hope above information helps, Please mark as Best Answer so that it can help others in the future.

Thanks.
ravi soniravi soni
hi Intro,
try following code. 
<aura:component >
<lightning:input type="date" name="input8"  aura:id="inpDate1" label="Dates 1"   
                 onchange="{!c.myAction}" />    
    </aura:component>


<!----------------------------------------------------------------------------------------------->

({
    myAction : function(component, event, helper) {
        var sDate = component.find("inpDate1").get("v.value");
        console.log('sDate : ' + typeof sDate );    
        var dates = new Date(sDate);
        var year = dates.getFullYear();
        var month = dates.getMonth();
        var day = dates.getDate();
        var formateDate = day + '/' + (month+1) + '/' + year;
        console.log('formateDate : ' + formateDate );    
    }
})

let me know if it helps you and don't forget to marking it as best answer so that it can helps to others in future.
Thank you