[SalesForce] Capture the value ui:inputDate on change

How can i capture value changed for ui:inputDate and pass to server side controller. i have tried multiple ways but anything is not working

first controller function 

componentValueChange : function(component,event){

var componentId =event.getSource().getLocalId(); // getting aura id value
var componentValue =component.find(componentId).get("v.value");// undefined...working for other input components
}

I have tried other way 

https://developer.salesforce.com/forums/?id=906F0000000BJYcIAO

after capturing value from attribute and called server side function it went in infinite loop what i observed from above solution is at component initialize time it calling and once value change going into recursive.

please let me know if you have any solution to capturing the date value and store database record.

Best Answer

I tried the change event on the ui:inputdate, and the controller action does not seem to fire on change. Instead try creating a change handler that calls the defined action from controller

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_data_change.htm

component:

<aura:component >
        <aura:attribute name="date" type="Date" access="GLOBAL"/>
        <aura:handler name="change" value="{!v.date}" action="{!c.changedate}"/> 
        <ui:inputDate  aura:id="dateValue" value="{!v.date}" label="date" displayDatePicker="true"/>
</aura:component>

controller:

({
    changedate : function(component, event, helper) {
         var date_val = component.get("v.date");
        alert("changed date:"+ date_val);
    }
})

Update:

There is something off about the date, I assume it is the format in which the date is being passed. From official docs the basic data types should be supported. I tried integer and it passed fine to the apex controller.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_attr_types_basic.htm

I tried adjusting the format to YYYY-MM-DD still no luck I get null values when I pass this as date to the apex controller(*default format for dates in apex)

From this post :How to pass a <ui:inputdate> value from a clientside controller of a lightning component to a serverside controller's @Auraenabled method?

I see that you can pass the date as string and convert it back into a date in your apex controller. I was able to pass the date as string with no issues.

component:

<aura:component controller="datevalcontroller">
        <aura:attribute name="date_vals" type="Date" access="GLOBAL"/>
    <aura:attribute name="total" type="Integer" default="360"/>

    <aura:handler name="change" value="{!v.date_vals}" action="{!c.changedate}"/> 
    <ui:inputDate aura:id="dateValue" value="{!v.date_vals}" label="date" displayDatePicker="true" format="YYYY-MM-DD"/>
</aura:component>

controller:

({
    changedate : function(cmp, event, helper) {
        var date_val = cmp.get("v.date_vals");
alert(date_val);

        var action = cmp.get("c.passdateval");
        action.setParams({date_value : date_val});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                alert("From server: " + response.getReturnValue());
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        }); 
        $A.enqueueAction(action);
    }
})

apex controller: 

public class datevalcontroller {
    @AuraEnabled
    public static String passdateval(String date_value){
        system.debug('### Date val: '+ date_value);
        return date_value;
    }
}
Related Topic