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?

1 Answer 1


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? Mar 28, 2017 at 14:27

You must log in to answer this question.

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