Action failed: c:DateValidation$controller$doAction [inputCmp.showHelpMessageIfInvalid is not a function]

Question

I trying to validate ui:inputDate along with lightning:input of type Date. But I'm getting the error as

Action failed: c:DateValidation$controller$doAction [inputCmp.showHelpMessageIfInvalid is not a function]

when I try to validate ui:inputDate.

Here is my code

Component

<aura:component>

<aura:attribute name="today" type="String" default=""/>
<aura:attribute name="today1" type="String" default=""/>
<aura:attribute name="date1" type="Date" default=""/>
<aura:attribute name="date2" type="Date" default=""/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<ui:inputDate aura:id="expdate" required = "true" label="Today's Date" format ="MM/DD/YY" class="field" value="{!v.date1}" displayDatePicker="true" />      
<ui:inputDate aura:id="expdate" required = "true" label="Today's Date" format ="MM/DD/YY" class="field" value="{!v.date2}" displayDatePicker="true" />

<lightning:input type="date" required = "true" label="Date1" aura:id="expdate" name="today" value="{!c.today}"/>
<lightning:input type="date" required = "true" label="Date2" aura:id="expdate" name="today1" value="{!c.today1}"/>
<ui:button class="btn" label="Submit" press="{!c.doAction}"/>   

Controller

({
    doAction : function(component, event, helper) {
        var allValid = component.find('expdate').reduce(function (validFields, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validFields && inputCmp.get('v.validity').valid;
        }, true);
        if (allValid) {
            alert('All form entries look valid. Ready to submit!');
        } else {
            alert('Please update the invalid form entries and try again.');
        }
    },
    doInit : function(component,event,helper){
         var today = new Date();
        component.set('v.date1', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
        component.set('v.date2', today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
    }
})

Answer 1

As per Documentation ui:inputDate doesn't exposed a showHelpMessageIfInvalid method thats why you are getting a error.

If you want to add error on ui components you need to write custom validation to Add or remove error based on your need.