I am trying to use date picker in ligtning design system and and using the idea explained in this link to do it:

Lightning (SLDS) styling for calendar

enter image description here

This works fine in the browser on the desktop but when I open it Salesforce1 it does not work properly and comes out in a weird way. Any idea on how to solve this?


Using the SLDS style date picker is great.

I wrote a blog post here on how to create a SLDS style datepicker.

Once you implement the code in the blog post & the date picker looks like below:

(source: minerva18.com)

Blog Post -- http://www.minerva18.com/blog/creating-lightning-design-datepicker-salesforce/

  • that's a nice blog post. – Bob Gali Apr 12 '16 at 4:03
  • thats a nice blog post . I have rechecked the code again and found the issue to be standard style sheets conflicting with LDS style sheet. standardStylesheets="false" makes the old code work fine. – Bob Gali Apr 12 '16 at 4:08
  • @BobGali Thank you :) Oh Great! Cheers! :) – Raghavendhra Yarlagadda Apr 12 '16 at 15:09
  • I tired using your code but for some reason it's not working... I believe the javascript call is not happening. Can you please help – user36608 Aug 22 '16 at 0:50
  • are there any suggestions on how to implement only the calendar and not the input field? – cartman Nov 20 '17 at 18:05

I too have made a datepicker - however this one is stand-alone (apart from moment.js - which it was not supposed to need). No Appiphany or jQuery needed. Here is the blog post link.

Also, I wouldn't have needed moment either, apart from what looks like a framework bug with the localizationService

In the meantime, here is all the code on github: Datepicker

Here's how to implement it:

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' />

In your component, you need to handle the dateChangeEvent from the component:

<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" />

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

Of course, a gif too:

Datepicker gif

Let me know if you find any bugs.

I know you are supposed to put code in here, but there is simply too much for that to make sense this time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.