3

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;
}
  • @doug-chasman - hi, can you please take a look at this issue in Lightning Component? I'm not able to find any workaround for this ui:inputDate field defaulting. This error is coming in Summer 16 only. – VarunC May 24 '16 at 9:14
  • Instead of setting the Birthdate directly using the Component API,try this var contact = component.get("v.newContact"); contact.Birthdate = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(); component.set("v.newContact",contact); – Praveen May 30 '16 at 19:24
  • Thanks Praveen. But I was able to get it working using a different methodology. What I found out was, we're able to set date just as documented but the date/month must now be "2-digit" prefixed with "0". So instead of setting date like documented, I pre-loaded date this way: component.set("v.newContact.Birthdate", today.getFullYear() + "-" + ("0" + (today.getMonth() + 1)).slice(-2) + "-" + ("0" + today.getDate()).slice(-2)); – VarunC May 31 '16 at 9:38
  • I have the same error, but I have less code to reproduce it – Patlatus Oct 27 '16 at 10:29
2

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.