Date Picker in Visualforce page using Lightning design system

Question

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

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?

Answer 1

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/

Answer 2

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

Of course, a gif too:

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.