Date Picker in Visualforce page using Lightning design system
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/
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.