Workaround for problem with lightning:input and datetime-local

EDIT: See important new update below in the Workaround

As I was preparing the code for my upcoming Pluralsight course about Lightning Best Practices, I ran into an error with the new lightning:input base lightning component that up until today had me banging my head on the desk. Since I would hate to see any of you go through all the agony I have faced with this issue, I am writing this up and hope it saves someone unnecessary grief.

The Problem

bug

The lightning:input component creates an HTML input component and supports the datetime-local input type. This particular base lightning component is still in beta, so I am not terribly surprised that it has a few issues and I suspect that this problem will be resolved eventually.

In the meantime, if you attempt to use the input component and the datetime-local type, such as in the following code:

<lightning:input label="Date/Time"
                         type="datetime-local"
                         name="DateTime"
                         aura:id="DateTime" 
                         value="{!v.newRace.DateTime__c}" />

And you attempt to save the record to the database, you will get back an error message similar to the following:

Error

The following error has occurred: [{"fieldErrors":{"DateTime__c":[{"message":"Invalid data type.","fieldApiName":"DateTime__c","fieldLabel":"Date Time"}]},"pageErrors":[{"message":"The Record provided contains field(s) with invalid data."}]}]

Countless searches did not help find a solution and after playing around with it for a while, I determined that the problem was coming from the fact that the seconds (which should be optional) were not included in the string that was being sent to the server.

For example, if I were to print to the console log the value of the input date time after it had been entered, but before it was saved, it would look like this:

2017-09-01T09:00

Notice the missing seconds?

The Workaround

Of course, you can always go back to using the ui:inputDateTime component, which does not seem to have this same problem.

EDIT: Turns out using the ui:inputDateTime is the only suitable workaround for this problem at this time. I was contacted by a member of the Salesforce team, who told me that using the workaround I describe below has one major drawback. It converts all dates to using GMT time and not the users local time and therefore is NOT a good workaround. They suggest just using the ui:inputDateTime until the fix is released as part of the Spring 18 release.

As looking for another option, I discovered that if I use the AuraLocalizationService to format the date time string and include the missing seconds, then the save to the database would work.

So, the code I needed to do that, resides in my client-side controller and looks like the following:

var rawDate = component.get("v.newRace.DateTime__c");
var formattedDate = $A.localizationService.formatDate(rawDate, "yyyy-MM-ddTHH:mm:ss");
component.set("v.newRace.DateTime__c", formattedDate);

Now if I print to the console log the value of the formattedDate variable, I see this and the record save successfully.

2017-09-01T09:00:00

I suspect this is a bug (EDIT: YES, it is and it will be fixed in the Spring 18 release) and imagine it will soon be fixed, but hope this helps someone struggling with using the component in the meantime.

 

 

Gotcha to watch out for when using new Base Lightning Components

bugThis weekend I discovered a very annoying issue (which I kind of consider to be a bug) when working with the new Base Lightning Components. Don’t get me wrong, I love these new components and think they are awesome. But, this particular issue had me banging my head for a few hours and I really wish I had those hours back. So, to save you from the same pain I experienced, I am writing about the issue here.

I would not be surprised if other developers encounter this same issue when they go to convert Lightning Components from using the older ui components to the new lightning ones. This was what I was doing and when I went to preview the component and all I got was a loading image and a message in the console that told me I had encountered an Internal Server Error. This error is essentially meaningless and just indicates that some error has occurred that was not properly handled by the system. Ughhhh, no help at all.

Everything in my code appeared right and it took me a while to finally notice that one of the components I had converted (the ui:inputText component to the new lightning:input) was missing the name attribute. Turns out that the name attribute is required for the new component. It was not required or even used for the ui:inputText component, which is why I failed to notice it in the first place.

Rather than give me a message when I try to save the markup or even trap the error and give me a legitimate message in the console log, I got the rather useless and general Internal Server Error. I imagine this will be resolved at some point, but in the meantime, I am writing this up to hopefully save someone else the misery I felt trying to figure out what was going on.

And if you are new to Lightning development and not sure what the new Base Lightning Components are all about and why you would want to use them, check out this post. Or, you can check out my latest course, which has a module that covers using them.