[SalesForce] ui:inputDate change event not firing

How do you add a change listener on an input date component that has been changed via the date picker?

Here's my current approach that does not work:

.app file

<aura:application >
    <ui:inputDate aura:id="dateField" label="Birthday" value="2014-01-30" displayDatePicker="true" change="{!c.handleDateChange}"/>
</aura:application>

Controller

({
    handleDateChange : function(component, event, helper) {
        console.log('date change');
    }
})

For contrast, a listener can be set on an input text field with the same approach (the below code works)

.app file

<aura:application >
    <ui:inputText label="Name" change="{!c.handleTextChange}"/>
</aura:application>

Controller

({
    handleTextChange : function(component, event, helper) {
        console.log('text change');
    }
})

Some things that I've noticed while testing:

Hitting 'enter' when the cursor is in date input field will cause the page to refresh
Hitting 'tab' when the cursor is in the date input field will cause the 'change' event to fire and the controller logs the 'date change' message to the console

Best Answer

You should be able to add the handlers after creation - The reason being is because you don't need to make your aura:id values unique.

If there are multiple components with the same local ID, find() returns an array of the components.

source

So with that in mind, in your iteration, give the input dates all the same id of say... aura:id="repeatedDate" and reference them in a loop on init:

var dateInputs = component.find("repeatedDate");

for (var i = 0; i < dateInputs.length; i++) {
  var dateInput = dateInputs[i];
  if (dateInput) {
    dateInput.addHandler("valueChange", component, "c.handleDateChange");
  }
}

Note - I'm not sure of the exact name for the valueChange event - you'll need to check the docs for this, or even consult the aura github project.

Note, there is another technique that SHOULD work, but doesn't - I'll put it in for reference, as it probably will at some point:

var cmpArr = component.find({ instancesOf : "ui:dateInput" });
for (var i = 0; i < cmpArr.length; i++) {
    var outputCmpArr = cmpArr[i];
    outputCmpArr.addHandler("valueChange", component, "c.handleDateChange");
}

(There are a couple of problems with this technique, one of which is supposed to be fixed by performing a find on the parent of the iterator list first and running a find off that - but I wasn't able to get that to work either)

Related Solutions

[SalesForce] onchange event listener for ui:inputSelect not working

Since you haven't given value attribute for the <ui:select/> component, you could do selectCmp.get("v.value") since it is internally available.Click here to find more attributes that are available in the component.

onChangeFunction: function(component,event) {
    console.log(event.getSource().get('v.value')); //only works for aura:component like <ui:inputSelect/>
}

If the value is attribute is binded to aura:attribute, you could do below:

<aura:attribute name="selectedRecType" type="String" access="private" />
<ui:inputSelect value="{!v.selectedRecType}" change="{!c.onChangeFunction}">
 ...
</ui:inputSelect>

Method in Controller.js should look like this:

onChangeFunction: function(component,event) {
    console.log(component.get('v.selectedRecType'));
}

--Update--

I tried to reproduce the issue,but change function works at my end.

Component:

<aura:component>
    <aura:attribute name="contactLevel" type="List" access="private"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onChangeFunction}">
        <aura:iteration items="{!v.contactLevel}" var="level">
             <ui:inputSelectOption text="{!level}" label="{!level}"/>
        </aura:iteration>
    </ui:inputSelect>
</aura:component>

Controller.js:

({
    doInit : function(cmp,event,helper){
        cmp.set("v.contactLevel",['Primary Contact', 'Secondary Contact', 'Other']);
    },
    onChangeFunction : function(cmp,event){
       console.log(event.getSource().get("v.value"));        
    }
})

[SalesForce] Capture the value ui:inputDate on change

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.