Unable to Save Record with on load initialized Date Field in Lightning Component in Summer ’16 org

Record cannot be saved if we have an ui:inputDate control in the Lightning Component and is preset to a date value (like today) on component initialization in a Summer ’16 organization.

The code is pretty much how the Lightning Component online Documentation says:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_inputDate.htm

But if I manually select the Date from the Datepicker, the Save record works fine. It doesn’t work only if I set the date in performInit() function and save the form as it is and always return following error:

Unable to read SObject’s field value[s]

The behavior is noticed only in Summer 16 org. Otherwise it works fine in Spring 16 org.

And here is the Test Code to reproduce the issue.

MyTestAppController.cls:

public with sharing class MyTestAppController {
    @AuraEnabled
    public static myResponseItem addContact(Contact sobjrecord) {
        myResponseItem resp = new myResponseItem();
        try {

            insert sobjrecord;

            resp.isSuccess  = true;
            resp.message    = sobjrecord.Id;
        }
        catch (Exception ex) {
            resp.isSuccess  = false;
            resp.message    = ex.getMessage();
        }
        return resp;
    }
}

MyTestApp.app:

<aura:application controller="MyTestAppController" >
    <aura:attribute name="newContact" type="Contact"
                    default="{ 'sobjectType': 'Contact',
                               'LastName': '',
                               'FirstName': ''
                             }"
                    access="global" />

    <ltng:require styles="/resource/slds_v0110/assets/styles/salesforce-lightning-design-system-ltng.min.css"
                  afterScriptsLoaded="{!c.performInit}" />


    <!-- Input Form using components -->
    <div class="container slds" style="padding:5px">
        <form class="slds-form--stacked">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="fname">First Name</label>
                <div class="slds-form-element__control">
                    <ui:inputText aura:id="fname"
                                  class="slds-input"
                                  value="{!v.newContact.FirstName}" />
                </div>
            </div>
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="lname">Last Name</label>
                <div class="slds-form-element__control">
                    <ui:inputText aura:id="lname"
                                  class="slds-input"
                                  value="{!v.newContact.LastName}" />
                </div>
            </div>
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="bdate">Birthdate</label>
                <div class="slds-form-element__control">
                    <ui:inputDate aura:id="bdate"
                                  class="slds-input"
                                  value="{!v.newContact.Birthdate}"
                                  displayDatePicker="true" />
                </div>
            </div>
            <div class="slds-form-element">
                <div class="" style="text-align:center;">
                    <ui:button aura:id="btnSave" label="Save" 
                               class="slds-button slds-button--brand"
                               press="{!c.createContact}"/>

                </div>
            </div>
        </form>
    </div>
</aura:application>

MyTestAppController.js:

({
    performInit : function(component, event, helper) {
        var today = new Date();
        component.set("v.newContact.Birthdate", today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
    },
    createContact : function(component, event, helper) {
        var newContact = component.get("v.newContact");
        helper.createContact(component, newContact);
    }
})

MyTestAppHelper.js:

({
    createContact: function(component, sobjrecord) {
        this.insertContact(component, sobjrecord, function(a) {
            var state = a.getState();
            var response = a.getReturnValue();
            if (state === "SUCCESS" && response.isSuccess) {
                var recid = response.message;

                var navEvt = $A.get("e.force:navigateToSObject");
                if (navEvt) {
                    navEvt.setParams({
                        "recordId": recid
                    });
                    navEvt.fire();
                }
            }
            else if (state === "ERROR" || !response.isSuccess) {
                var errors = a.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        alert(errors[0].message);
                    } else if (!response.isSuccess) {
                        alert(response.message);
                    }
                }
            }
        });
    },
    insertContact : function(component, sobjrecord, callback) {
        var action = component.get("c.addContact");
        action.setParams({ 
            "sobjrecord": sobjrecord
        });
        if (callback) {
            action.setCallback(this, callback);
        }
        $A.enqueueAction(action);
    }
})

MyTestApp.css:

.THIS .uiInputDate .datePicker-openIcon {
    float: right;
    margin-right: -0.5rem;
}

.THIS .uiInputDate .clearIcon {
    float: right;
    margin-right: -0.5rem;
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

After much hit and try, and debugging, why Standard Date Picking is workign from popup but not prepopulating it on load. I was able to figure out that, the Date field now must be pre loaded in a yyyy-mm-dd format with month and date both needs to be 2-digits padded with “0”.

So the following code change works fine:

component.set("v.newContact.Birthdate", today.getFullYear() + "-" + ("0" + (today.getMonth() + 1)).slice(-2) + "-" + ("0" + today.getDate()).slice(-2));

UPDATE:
As suggested by Praveen in comments, there is another approach that may work (I’ve not tested it):

var contact = component.get("v.newContact"); 
contact.Birthdate = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(); component.set("v.newContact",contact);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0