How can I make a Lightning ui:InputDateTime control look like the Lightning Experience DateTime picker?

Question

I'm working on some Salesforce lightning components and I need a nice DateTime control. The component reference lists the ui:inputDateTime control and this control supports the functionality, but it sure doesn't look like the control in Salesforce!

Here's what you get in SF experience:

And here's what you get out of the box with the ui:inputDateTime control:

The calendar itself is way too large and just isn't styled, and the Time control isn't even displaying the right icon. Here's my markup:

<div class="slds-form-element">
    <div class="slds-form-element__control">      
        <ui:inputDateTime aura:id="encStart" 
                          label="Start Time" 
                          value="{!v.newEvent.startTime}" 
                          displayDatePicker="true" /> 

    </div>
</div>

Am I just missing or just mis-applying a SLDS tag here? Any advice would be appreciated. Thanks.

Answer 1

I believe the second picture is from a standalone application. If you place you component inside Salesforce lightning ui via app page/record page, it will work perfectly with same look and feel as native date picker.

In standalone apps, the Salesforce fonts are not loaded and you are viewing it in Helvetica font.

Answer 2

I can't help with the time component, but I have built a custom date picker that you might like:

You can get it on github:

Unfortunately, there is a bit too much code to really try to explain how it works here, so I'll just post a pic:

How to use:

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

In your form, put the below(once you have created it) as a top level member of the form. Note the handling of the dateChangeEvent in the markup

<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" 
                dateChangeEvent={!c.handleDateChange}
 />
</div>

Finally, in your controller or helper update your date:

handleDateChange: function(cmp, event, helper) {
  var dateSelector = event.getSource().getLocalId();
  opp.CloseDate = event.getParam("value");
  ....
}