Lightning Components in Visualforce - datepicker, icon style inconsistency

Question

Based on trailhead module or documentation:

• Lightning Components Basics Trailhead Module
• Lightning Components Developer Guide

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:

I expected to have styles consistent with lightning experience:

Similar issue with time picker:

From the documentation:

versus lightning experience:

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?

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" />
</div>

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){
      func({fieldName:"CloseDate",value:event.getParam("value")});
    }
}

How it looks: