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

1k views Asked by At

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: enter image description here

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

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 mis-applying a SLDS tag here? Any advice would be appreciated. Thanks.

0

There are 0 answers