[SalesForce] aura:outputDate with value from aura:iteration does not work!

I'm receiving the following error message when my component is loaded:

This page has an error. You might just need to refresh it.
Error during init [afterRender threw an error in 'markup://c:SierraApp' [afterRender threw an error in 'markup://c:PlanningStudio' [afterRender threw an error in 'markup://c:YearPlanning' [afterRender threw an error in 'markup://aura:html' [afterRender threw an error in 'markup://aura:html' [afterRender threw an error in 'markup://aura:iteration' [afterRender threw an error in 'markup://aura:html' [afterRender threw an error in 'markup://ui:outputDate' [a.split is not a function]]]]]]]]]

Bellow are the my code source:
Component.cmp:

<aura:component >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="year" type="Integer" Default="2015"/>
    <aura:attribute name="monthList" type="Date[]"/>

    <aura:iteration items="{!v.monthList}" var="mo">
        <ui:outputDate value="{!mo}" format="MMMM"/>
    </aura:iteration>
</aura:component>

controller.js:

({
    doInit : function(component, event, helper) {
       helper.reloadYear(component, helper);
    },
})

helper.js:

({
    reloadYear: function(component, helper) {
        var year = component.get("v.year");
        var mList = [];
        for(var m = 0; m < 12; m++) {
        mList.push(new Date(year, m, 1, 0, 0, 0, 0));
        }
        component.set("v.monthList", mList);
    },
})

IMPORTANT: If I remove the aura:outputDate and print the date as text, it works!!!

Thanks you all in advance!

Saulo

Best Answer

A ui:outputDate component represents a date output in the YYYY-MM-DD format.use a desire format you can get it

In helper

({
    reloadYear: function(component, helper) {
        var year = component.get("v.year");
        var mList = [];
        var nList =[];
        for(var m = 0; m < 12; m++) {
        mList.push(new Date(year, m, 1, 0, 0, 0, 0));
        }
        for(var i=0;i<mList.length;i++){
           nList.push((mList[i].getFullYear() + "-" + (mList[i].getMonth() + 1) + "-" + mList[i].getDate()));
        }
        component.set("v.monthList", nList);
    },
})

In component

 <aura:iteration items="{!v.monthList}" var="mo">
        <ui:outputDate value="{!mo}"/>
    </aura:iteration>
Related Topic