Uncaught TypeError Issue with the Lightning datepicker Introduced in Summer '18

Question

Following the Summer '18 release, a component that referenced a lightning:input base component of type "date" is now generating an error message:

Uncaught TypeError: Cannot read property 'removeAttribute' of null throws at https://xxx.lightning.force.com/components/lightning-datepicker.js:2:4706

The offending reference looks like this:

<lightning:input name="delivery-date" label="Expected Delivery Date" type="date" onblur="{!c.handleBlur}" value="{!v.order.Delivery_Date_Expected__c}" required="true"/>

Has anyone experienced this yet? Any guidance on where to even begin troubleshooting or finding a workaround?

Answer 1

Unfortunately it looks like lightning:input is experiencing issues with handling ISO-8601 formatted date values, so I applied a workaround that I used when I experienced similar issues with the lightning:formattedDateTime component.

Rather than passing the ISO-8601 formatted date to the value attribute of the lightning:input, I run it through the localization service in the JavaScript API to format the date as a simplified 'YYYY-MM-DD' string value.

Using the string value fixed two issues that appeared in Summer '18 - one was this uncaught TypeError, the other being the value being passed to the lightning:input was not displaying until the onBlur event for the input component was fired.

So if you're experiencing similar issues, here is the JavaScript to perform this conversion from ISO-8601 formatted date value to a YYYY-MM-DD string format:

let newDate = new Date();
newDate.setDate(newDate.getDate() + 2);

// Hack to get date to display in lightning:input

const newDateString = $A.localizationService.formatDate(newDate, "YYYY-MM-DD");