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?

2 Answers 2


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.
    – user27749
    Commented Apr 12, 2016 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.
    – user27749
    Commented Apr 12, 2016 at 4:08
  • @BobGali Thank you :) Oh Great! Cheers! :) Commented Apr 12, 2016 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
    Commented Aug 22, 2016 at 0:50
  • are there any suggestions on how to implement only the calendar and not the input field?
    – cartman
    Commented Nov 20, 2017 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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .