Based on trailhead module or documentation:

I have added lightning component to visualforce page:

$Lightning.use("c:expensesApp", function() { $Lightning.createComponent( "c:expenses", {AccountId : {!$CurrentPage.parameters.AccountId}}, "lightning", function(cmp) { console.log("Component created!"); console.log(cmp); }); });

I am using newest LDS $Resource.SLDS202

Is working as expected but I see that there are few major CSS issues which are accepted without comment in both, documentation and trailhead module:

DatePicker field style as a part of the component built in trailhead module:

DatePicker field style as a part of the component built in trailhead module

I expected to have styles consistent with lightning experience:

lightning experience date picker styles

Similar issue with time picker:

From the documentation: enter image description here

versus lightning experience: enter image description here

What does it mean? Am I missing something or should I avoid ui components as per:

Lightning Component Styling on UI Components

Is there any road map for ui components?


I have recently created a datepicker component.Here is the blog post about it. The blog contains code and implementation instructions. Unfortunately no timepicker.

Some quick implementation details - for use in a VF page - (once the component is built):

You will want a structure like this:

VF Page (instantiate and add callback)
       DatepickerWrapper (handle date change events, call callback)
                         Datepicker (perform date display and selection)

In your DatepickerWrapper component, handle the dateChangeEvent from the Datepicker and add a callback attribute (for lightning out):

<aura:handler name="dateChangeEvent" event="c:DateChange" action="{!c.handleDateChange}" />
<aura:attribute name="callback" type="String" description="Call this to communicate results to visualforce page" access="global"/>

Place the Datepicker in the DatepickerWrapper component like this (assuming you are using slds) (you may want to do all form element stuff in the parent vf page - up to you):

<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 DatepickerWrapper controller or helper update your date by calling the callback on the vf page:

handleDateChange: function(cmp, event, helper) {
    var func = cmp.get('v.callback');
    if (func){

How it looks:

Datepicker gif

  • Hi @Caspar, thanks for the datepicker. Do you plan to add a time picker as well? – Vladimir Romanov Mar 28 '17 at 14:27

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.