function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4 

How to get a value from lightning input date type?

Hello, 

I'm trying read a value from my lightning input that has a date type, but when i use component.find.get my return value is undefined. Can anyone could help me ?
<aura:component >
    <aura:attribute name="dataInValue" type="date" />
    <aura:attribute name="dataEndValue" type="date"/>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-modal_small slds-slide-up-open slds-align_absolute-center">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                    <span class="slds-assistive-text">Close</span>
                </button>
                
                
                <div class="slds-text-title slds-p-top_xxx-small slds-p-left-none" style="font-weight: bold">FILTRAR EXTRATOS:</div>
                
                <div style="border-bottom: 1px solid #dddbda; margin-top: 5px"></div>  
                
                <div class="slds-grid slds-gutters">
                    <div class="slds-col slds-size_3-of-12">
                        <div class="slds-p-left_xx-small" >
                            <lightning:input aura:id="startDate" type="date" fieldName="startDate" label="Data-Início" value="{!v.dataInValue}" onkeypress="{!c.validDateSize}" onchange="{!c.validDate}"/>
                        </div>
                    </div>
<aura:component>

Controller.js
validDate : function(component,event,helper){
    // alert('Entrou na ValidDate');
     var data_inicio = component.find("startDate").get("v.value");
     var data_fim = component.find("endDate").get("v.value");
     var sub; 
        if(data_inicio){
            sub = data_inicio.replace(/[^0-9]/g,'');
            component.set("v.dataInValue", sub);
            var tam = sub.lenght;
            if(tam > 10){
                var res = sub.replace(/(\d{3})(\d{3})(\d{4})/, "$1/$2/$3/");
                component.set("v.dataInValue",res);
            }
        }
        
    },
    
    validDateSize : function(component,event,helper){
    var data_inicio = component.find("startDate").get("v.value");
        console.log("Stardt Date:"+component.find("startDate").get("v.value"));
    var data_fim = component.find("endDate").get("v.value");   
    var sel = window.getSelection().toString();
    console.log('entra no validate size');
    console.log('Data Ini'+data_inicio);

    if(data_inicio != null)
        {
            console.log('Entra no if');
            var tam = data_inicio.length;
            console.log('Tam:'+tam);
           if(tam > 10 && sel ==''){
                event.preventDefault();
            }
        }
        
        if(data_fim){
            var tam = data_fim.lenght;
            if(tam>10 && sel == ''){
                event.preventDefault();
            }
        }
      }
})

​​​​​​​

 
Best Answer chosen by Leticia Monteiro Freitas 4
Raj VakatiRaj Vakati
I am getting correct date from this code
 
<aura:component >
    <aura:attribute name="dataInValue" type="Date" />
    <aura:attribute name="dataEndValue" type="Date"/>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-modal_small slds-slide-up-open slds-align_absolute-center">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                    <span class="slds-assistive-text">Close</span>
                </button>
                
                
                <div class="slds-text-title slds-p-top_xxx-small slds-p-left-none" style="font-weight: bold">FILTRAR EXTRATOS:</div>
                
                <div style="border-bottom: 1px solid #dddbda; margin-top: 5px"></div>  
                
                <div class="slds-grid slds-gutters">
                    <div class="slds-col slds-size_3-of-12">
                        <div class="slds-p-left_xx-small" >
                            <lightning:input aura:id="startDate" type="date" fieldName="startDate" label="Data-Início" value="{!v.dataInValue}" onkeypress="{!c.validDateSize}" onchange="{!c.validDate}"/>
                        </div>
                    </div>
                </div>
            </header>
        </div>
    </section>
</aura:component>
 
({
    validDate : function(component,event,helper){
        // alert('Entrou na ValidDate');
        var data_inicio = component.get("v.dataInValue");
        console.log(data_inicio);
        
        var data_fim = component.find("endDate");
        console.log(data_fim);
        /*
        var sub; 
        if(data_inicio){
            sub = data_inicio.replace(/[^0-9]/g,'');
            component.set("v.dataInValue", sub);
            var tam = sub.lenght;
            if(tam > 10){
                var res = sub.replace(/(\d{3})(\d{3})(\d{4})/, "$1/$2/$3/");
                component.set("v.dataInValue",res);
            }
        }
        */
    },
    
    validDateSize : function(component,event,helper){
        var data_inicio = component.get("v.dataInValue");
        console.log("Stardt Date:"+component.get("v.dataInValue"));
        var data_fim = component.get("v.dataEndValue");   
        var sel = window.getSelection().toString();
        console.log('entra no validate size');
        console.log('Data Ini'+data_inicio);
        
        if(data_inicio != null)
        {
            console.log('Entra no if');
            var tam = data_inicio.length;
            console.log('Tam:'+tam);
            if(tam > 10 && sel ==''){
                event.preventDefault();
            }
        }
        
        if(data_fim){
            var tam = data_fim.lenght;
            if(tam>10 && sel == ''){
                event.preventDefault();
            }
        }
    }
})



User-added image

All Answers

Raj VakatiRaj Vakati
Change your code as below


Like this 

var data_inicio = component.get("v.dataInValue");

​​​​​​​complete code

 
({
    validDate : function(component,event,helper){
        // alert('Entrou na ValidDate');
        var data_inicio = component.get("v.dataInValue");
        console.log(data_inicio);
        
        var data_fim = component.find("endDate");
        console.log(data_fim);
        
        var sub; 
        if(data_inicio){
            sub = data_inicio.replace(/[^0-9]/g,'');
            component.set("v.dataInValue", sub);
            var tam = sub.lenght;
            if(tam > 10){
                var res = sub.replace(/(\d{3})(\d{3})(\d{4})/, "$1/$2/$3/");
                component.set("v.dataInValue",res);
            }
        }
        
    },
    
    validDateSize : function(component,event,helper){
        var data_inicio = component.find("startDate").get("v.value");
        console.log("Stardt Date:"+component.find("startDate").get("v.value"));
        var data_fim = component.find("endDate").get("v.value");   
        var sel = window.getSelection().toString();
        console.log('entra no validate size');
        console.log('Data Ini'+data_inicio);
        
        if(data_inicio != null)
        {
            console.log('Entra no if');
            var tam = data_inicio.length;
            console.log('Tam:'+tam);
            if(tam > 10 && sel ==''){
                event.preventDefault();
            }
        }
        
        if(data_fim){
            var tam = data_fim.lenght;
            if(tam>10 && sel == ''){
                event.preventDefault();
            }
        }
    }
})

 
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4
Hi Raj, still isnt work for Date Type, only for string. When i use Date Type the component.get doents return value. 
Raj VakatiRaj Vakati
I am getting correct date from this code
 
<aura:component >
    <aura:attribute name="dataInValue" type="Date" />
    <aura:attribute name="dataEndValue" type="Date"/>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-modal_small slds-slide-up-open slds-align_absolute-center">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                    <span class="slds-assistive-text">Close</span>
                </button>
                
                
                <div class="slds-text-title slds-p-top_xxx-small slds-p-left-none" style="font-weight: bold">FILTRAR EXTRATOS:</div>
                
                <div style="border-bottom: 1px solid #dddbda; margin-top: 5px"></div>  
                
                <div class="slds-grid slds-gutters">
                    <div class="slds-col slds-size_3-of-12">
                        <div class="slds-p-left_xx-small" >
                            <lightning:input aura:id="startDate" type="date" fieldName="startDate" label="Data-Início" value="{!v.dataInValue}" onkeypress="{!c.validDateSize}" onchange="{!c.validDate}"/>
                        </div>
                    </div>
                </div>
            </header>
        </div>
    </section>
</aura:component>
 
({
    validDate : function(component,event,helper){
        // alert('Entrou na ValidDate');
        var data_inicio = component.get("v.dataInValue");
        console.log(data_inicio);
        
        var data_fim = component.find("endDate");
        console.log(data_fim);
        /*
        var sub; 
        if(data_inicio){
            sub = data_inicio.replace(/[^0-9]/g,'');
            component.set("v.dataInValue", sub);
            var tam = sub.lenght;
            if(tam > 10){
                var res = sub.replace(/(\d{3})(\d{3})(\d{4})/, "$1/$2/$3/");
                component.set("v.dataInValue",res);
            }
        }
        */
    },
    
    validDateSize : function(component,event,helper){
        var data_inicio = component.get("v.dataInValue");
        console.log("Stardt Date:"+component.get("v.dataInValue"));
        var data_fim = component.get("v.dataEndValue");   
        var sel = window.getSelection().toString();
        console.log('entra no validate size');
        console.log('Data Ini'+data_inicio);
        
        if(data_inicio != null)
        {
            console.log('Entra no if');
            var tam = data_inicio.length;
            console.log('Tam:'+tam);
            if(tam > 10 && sel ==''){
                event.preventDefault();
            }
        }
        
        if(data_fim){
            var tam = data_fim.lenght;
            if(tam>10 && sel == ''){
                event.preventDefault();
            }
        }
    }
})



User-added image
This was selected as the best answer
Leticia Monteiro Freitas 4Leticia Monteiro Freitas 4
Raj, in fact it didint accept my keyboard entry, only the select value on calendar.