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;
}
4
  • @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
    Commented May 24, 2016 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
    Commented May 30, 2016 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
    Commented May 31, 2016 at 9:38
  • I have the same error, but I have less code to reproduce it
    – Patlatus
    Commented Oct 27, 2016 at 10:29

1 Answer 1

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .