How to validate two dates are in range of 10 years in Lightning Component

Question

I want to validate that when user enter Start date, then end Date should be in range of 10years.

<ui:inputDate aura:id="startDates" label="Start Date: " displayDatePicker="true"
value="{!v.startDate}"/>    
<ui:inputDate aura:id="endDates" label="End Date: " displayDatePicker="true" 
value="{!v.endDate}"/>

Answer 1

Lightning returns the date as a normal string, so you need to convert it to a date via new Date(attributeValue). Here's how that might look like:

({
    validate: function(component, event, helper) {
        var start = component.get("v.startDate"),
            end = component.get("v.endDate"),
            yearDiff, monthDiff, dayDiff, withinTenYears;
        if(start && end) {
            start = new Date(start);
            end = new Date(end);
            yearDiff = end.getFullYear() - start.getFullYear();
            monthDiff = end.getMonth() - start.getMonth();
            dayDiff = end.getDate() - start.getDate();
            withinTenYears =
                // difference of less than 10 numerical years (e.g. 2018-2027)
                yearDiff < 10 || 
                // ten numerical years, but end month less than start month
                (yearDiff == 10 && monthDiff < 0) ||
                // ten numerical years, same month, less or equal to the day
                (yearDiff == 10 && monthDiff == 0 && dayDiff <= 0);
            if(!withinTenYears) {
                // do whatever you like here
            }
        }
    }
})

Feel free to adjust as necessary.

Answer 2

There are plenty of ways to approach this, but they all come down to comparing the two values as dates in javascript. For example, you could get the two values, convert them to dates, add 10 years to the start date, and make sure the end date is less than the result. A quick Google search will turn up plenty of examples.

However, since you're new to Lightning, I think you'd get a lot of value from taking a look over some of these resources first to help get you started. I'm sure you'll be an expert in no time!

Very detailed intro to Lightning component development: https://trailhead.salesforce.com/en/modules/lex_dev_lc_basics

...and for after the Trailhead exercise, the Lightning Component Reference guide: https://developer.salesforce.com/docs/component-library/overview/components