Salesforce Lightning is fast becoming a great tool for building modular, extensible and modern UIs on the Salesforce platform.
Lightning Datepicker
There are a lot of pre-built UI controls that you can use to create an interface, but there are a couple of vital missing pieces.
The first of these is the Lookup component, which I wrote about in a previous post, “Embed a Lightning Component in a Visualforce Page“. The second is a good, Salesforce Lightning styled Datepicker component. There is an existing component, but it is not lightning styled and it does not work very well.
Salesforce have defined what they think a picker should look like on their extensive Salesforce Lightning Design System style site, which contains extensive resources to help developers create beautiful UIs – you can see their definition here.
What I am going to show is how to create your own Lightning Datepicker component.
Background
To build this component, I used several sources – however, as the result is kind of a mashup, I haven’t included an licence information, as most of the code is my own.
I used some of the structure of the existing Aura lightning component here.
I also used some data structures and ideas from here.
Finally I was forced to use moment.js despite trying not to have any external dependencies, but due to a bug in the Lightning framework – (the $A.localizationService.parseDateTime() method seems to be blocked by the Locker Service), I was forced to use it for string to date conversions.
Get moment here.
Method
Upload moment.js to a static resource and call it ‘moment’.
Next, start by defining the Events that you will need. This component uses two events,
DateCellClick : This event is used to tell the main grid that a date has been selected
DateChange : This event is used to tell the parent application/component that a date has been selected on the grid
The date cell click event – no params needed here as we can get data from the component referenced in the event.
The date change event – the parameter is a string containing the value of the selected date.
Next, you need to define a “DateCell” component – this represents a single day in the date grid. As you can see, the DateCellClick event is registered as an event that can be dispatched by this component.
For this component, I use a simple controller, which refires a standard “onclick” event as a Lightning DateCellClick event.
Now we can define the main component. This component uses pre-rendered cells (like the original Aura DateGrid), which means it’s easy to identify individual cells and render the day values before and after the current month.
There are two main parts to the grid. First a simple ui:inputText:
This code holds the date, and formats it for output.
Next, there is the grid:
The code just above the actual grid cells is taken directly from the Lightning CSS guide – however, I was forced to use an anchor tag enclosing the SVG element, as using a regular button seemed to create an unhandled click event that caused a page refresh.
I wasn’t able to catch that event and stop it’s propagation, so the anchor tag was the next best thing. Anyone who knows how to do this, please contact me.
The controller contains some basic logic, but hands most of the work to the handler. To be honest, I’m finding it hard to work out weather to put code in the controller or the handler. So far, I’ve got a bit of both :).
The is some init code, which formats the date string supplied as a parameter and builds the grid. The other code handles mouse events to prevent the grid from closing when active.
Finally, there are some handers for the various UI events that occur – clicking back, forward, selecting a year and selecting a day.
As soon as the A.localeHandler bug is fixed, I’ll remove the moment dependency.
Here it is:
Finally, the helper does some more low level rendering and element manipulation.
Using the picker in your form
Assuming you are using an Opportunity (obviously any object with a date would work), define the Opportunity as an attribute on your component:
In your component, you need to handle the `dateChangeEvent` from the component:
In your form, put the below(once you have created it) as a top level member of the form:
Finally, in your controller or helper update your date:
It should all just work!
Final Results
All the files are located on
Github.
Enjoy!
The post Build a Salesforce Lightning (SLDS) Datepicker appeared first on Soliant Consulting.