Build a Better Salesforce Lightning Datepicker

Salesforce Lightning is a great tool for building modular, extensible and modern UIs on the Salesforce platform.

Salesforce Lightning Datepicker

There are a lot of pre-built UI controls that you can use to create an interface in Salesforce, 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 Pagecur”. The second is a good, Salesforce Lightning Design System styled Datepicker component. There is an existing component, but it is not lightning styled and integrating it into a Lightning App often causes style problems.

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.

<aura:event type="COMPONENT" description="Dispatched when a date cell is clicked" />

The date change event – the parameter is a string containing the value of the selected date.

<aura:event type="COMPONENT" description="Despatched when the date is changed in the DatePicker component" >
  <aura:attribute name="value" type="String" description="string value of the selected date" access="global" />
</aura:event>

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.

<aura:component >
    <aura:attribute name="ariaSelected" type="String" default="false" description="Highlight this control."/>
    <aura:attribute name="ariaDisabled" type="String" default="false" description="Disable this control."/>
    <aura:attribute name="tabIndex" type="Integer" default="-1" description="The tab index of the anchor element."/>
    <aura:attribute name="value" type="Date" description="The date this component renders."/>
    <aura:attribute name="label" type="String"/>
    <aura:attribute name="tdClass" type="String"/>
    <td class="{!v.tdClass}" role="gridcell" aria-selected="{!v.ariaSelected}" aria-disabled="{!v.ariaDisabled}" onclick="{!c.handleClick}" >
       <span class="slds-day" >{!v.label}</span>
    </td>
    <aura:registerevent name="dateCellClick" type="c:DateCellClick" description="click event" />
</aura:component>

For this component, I use a simple controller, which refires a standard “onclick” event as a Lightning DateCellClick event.

({
    handleClick : function(component, event, helper) {
        var click = component.getEvent("dateCellClick");
        click.fire();
    }
})

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:

<div class="slds-form-element ">
  <label class="slds-form-element__label" for="closedate">{!v.label}</label>
  <div class="slds-form-element__control">
    <div class="slds-input-has-icon slds-input-has-icon--right">
      <c:SVG class="slds-input__icon slds-icon-text-default icon--large" xlinkHref="{!$Resource.SLDS105 + '/assets/icons/standard-sprite/svg/symbols.svg#event'}"></c:SVG>
      <ui:inputDate aura:id="dateInput" class="slds-input" value="{!v.value}" format="{!v.formatSpecifier}" displayDatePicker="false" updateOn="keyup" focus="{!c.handleInputFocus}" />
    </div>
  </div>
</div>

This code holds the date and formats it for output.

Next, there is the grid:

<div aura:id="grid" class="slds-datepicker slds-dropdown slds-dropdown--left slds-hide" onmouseleave="{!c.handleGridMouseLeave}" onmouseenter="{!c.handleGridMouseEnter}">
   <div class="slds-datepicker__filter slds-grid">
     <div class="slds-datepicker__filter--month slds-grid slds-grid--align-spread slds-grow">
       <div class="slds-align-middle">
         <a onclick="{!c.goToPreviousMonth}" href="javascript:void(0);" class="slds-button slds-button--icon-container">
           <c:SVG class="slds-button__icon slds-button__icon--small slds-m-top--small" xlinkHref="{!$Resource.SLDS105 + '/assets/icons/utility-sprite/svg/symbols.svg#left'}">
           </c:SVG>
         </a>
       </div>
       <h2 id="month" class="slds-align-middle" aria-live="assertive" aria-atomic="true">{!v.monthName}</h2>
       <div class="slds-align-middle">
         <a onclick="{!c.goToNextMonth}" href="javascript:void(0);" class="slds-button slds-button--icon-container">
           <c:SVG class="slds-button__icon slds-button__icon--small slds-m-top--small" xlinkHref="{!$Resource.SLDS105 + '/assets/icons/utility-sprite/svg/symbols.svg#right'}">
           </c:SVG>
         </a>
       </div>
     </div>
     <div class="slds-shrink-none">
       <ui:inputSelect aura:id="yearSelect" class="slds-select spear-select" label="pick a year" labelClass="slds-assistive-text" required="false" change="{!c.handleYearChange}" />
     </div>
   </div>
   <table aura:id="maintable" class="datepicker__month" role="grid" aria-labelledby="month">
     <thead>
       <tr id="weekdays">
         <aura:iteration items="{!v._namesOfWeekdays}" var="day">
           <th scope="col" class="dayOfWeek">
             <abbr title="{!day.shortName}">{!day.shortName}</abbr>
           </th>
         </aura:iteration>
       </tr>
     </thead>
     <tbody>
       <tr aura:id="week1">
         <c:DateCell aura:id="0" />
         <c:DateCell aura:id="1" />
         <c:DateCell aura:id="2" />
         <c:DateCell aura:id="3" />
         <c:DateCell aura:id="4" />
         <c:DateCell aura:id="5" />
         <c:DateCell aura:id="6" />
       </tr>
       <tr aura:id="week2">
         <c:DateCell aura:id="7" />
         <c:DateCell aura:id="8" />
         <c:DateCell aura:id="9" />
         <c:DateCell aura:id="10" />
         <c:DateCell aura:id="11" />
         <c:DateCell aura:id="12" />
         <c:DateCell aura:id="13" />
       </tr>
       <tr aura:id="week3">
         <c:DateCell aura:id="14" />
         <c:DateCell aura:id="15" />
         <c:DateCell aura:id="16" />
         <c:DateCell aura:id="17" />
         <c:DateCell aura:id="18" />
         <c:DateCell aura:id="19" />
         <c:DateCell aura:id="20" />
       </tr>
       <tr aura:id="week4">
         <c:DateCell aura:id="21" />
         <c:DateCell aura:id="22" />
         <c:DateCell aura:id="23" />
         <c:DateCell aura:id="24" />
         <c:DateCell aura:id="25" />
         <c:DateCell aura:id="26" />
         <c:DateCell aura:id="27" />
       </tr>
       <tr aura:id="week5">
         <c:DateCell aura:id="28" />
         <c:DateCell aura:id="29" />
         <c:DateCell aura:id="30" />
         <c:DateCell aura:id="31" />
         <c:DateCell aura:id="32" />
         <c:DateCell aura:id="33" />
         <c:DateCell aura:id="34" />
       </tr>
       <tr aura:id="week6">
         <c:DateCell aura:id="35" />
         <c:DateCell aura:id="36" />
         <c:DateCell aura:id="37" />
         <c:DateCell aura:id="38" />
         <c:DateCell aura:id="39" />
         <c:DateCell aura:id="40" />
         <c:DateCell aura:id="41" />
       </tr>
       <tr>
         <td colspan="7" role="gridcell"><a onclick="{!c.goToToday}" href="javascript:void(0);" class="slds-show--inline-block slds-p-bottom--x-small">Today</a></td>
       </tr>
     </tbody>
   </table>
 </div>

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 its 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 whether 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:

({
  doInit: function(component, event, helper) {
    for (var i = 0; i < 41; i++) {
      var cellCmp = component.find(i);
      if (cellCmp) {
        cellCmp.addHandler("dateCellClick", component, "c.handleClick");
      }
    }
    var format = component.get("v.formatSpecifier");
    var datestr = component.get("v.value");
    var langLocale = $A.get("$Locale.langLocale");
    var momentDate = moment(datestr, 'MM/DD/YYYY');
    var currentDate;
    if(currentDate == null || !currentDate.isValid()){
      currentDate = moment().toDate();
    }
    else {
      currentDate = momentDate.toDate();
    }
    helper.setDateValues(component, currentDate, currentDate.getDate());
    // Set the first day of week
    helper.updateNameOfWeekDays(component);
    helper.generateYearOptions(component,currentDate);
    var setFocus = component.get("v.setFocus");
    if (!setFocus) {
      component.set("v._setFocus", false);
    }
    helper.renderGrid(component);
  },
  handleInputFocus: function(component, event) {
    var grid = component.find("grid");
    if (grid) {
      $A.util.removeClass(grid, 'slds-hide');
      $A.util.removeClass(grid, 'slds-transition-hide');
    }
  },
  handleGridMouseLeave: function(component, event) {
    var grid = component.find('grid');
    if (grid) {
      $A.util.addClass(grid, "slds-transition-hide");
    }
    var timeout = window.setTimeout(
      $A.getCallback(function() {
        if (grid.isValid()) {
          $A.util.addClass(grid, "slds-hide");
        }
      }), 2000
    );
    component.set("v._windowTimeout", timeout);
 
  },
  handleGridMouseEnter: function(component, event) {
    var grid = component.find('grid');
    if (grid) {
      $A.util.removeClass(grid, 'slds-hide');
      $A.util.removeClass(grid, 'slds-transition-hide');
    }
    var timeout = component.get("v._windowTimeout");
    if (timeout){
      clearTimeout(timeout);
    }
  },
  handleYearChange : function (component, event, helper){
    var newYear = component.find("yearSelect").get("v.value");
    var date = component.get("v.date");
    helper.changeYear(component,newYear,date);
  },
  handleClick: function(component, event, helper) {
    console.log('Date picker controller click' + event);
    helper.selectDate(component, event);
  },
  goToToday: function(component, event, helper) {
    event.stopPropagation();
    helper.goToToday(component, event);
    return false;
  },
  goToPreviousMonth: function(component,event,helper) {
    event.stopPropagation();
    helper.changeMonth(component, -1 );
    return false;
  },
  goToNextMonth: function(component,event,helper) {
    event.stopPropagation();
    helper.changeMonth(component, 1);
    return false;
  }
});

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:

<aura:attribute name="opportunity" type="Opportunity" default="{ 'sobjectType': 'Opportunity',
                             'Name': 'New Opportunity',
                             'StageName': 'Some Stage' />

<aura:handler name="dateChangeEvent" event="c:DateChange" action="{!c.handleDateChange}" />

In your form, put the below(once you have created it) as a top level member of the form:

<div class="slds-form-element slds-m-top--medium">
    <c:DatePicker aura:id="closeDate" label="Close Date" placeholder="Enter a Date" value="{!v.opportunity.CloseDate}" formatSpecifier="MM/dd/yyyy" />
</div>

Finally, in your controller or helper update your date:

handleDateChange: function(cmp, event, helper) {
  var dateSelector = event.getSource().getLocalId();
  if (dateSelector == 'closeDate'){
    var opp = cmp.get("v.opportunity");
    opp.CloseDate = event.getParam("value");
  }
}

It should all just work!

Get the DatePicker files

All the files are located on Github.

Enjoy!

Moving Forward in Lightning

Have questions? Let us know in a comment below, or contact our team directly. You can also check out our other posts on customizing your Salesforce solution.