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.

Possible dupe of: http://salesforce.stackexchange.com/questions/134371/uiinputdatetime-date-and-time-pickers-not-displaying-properly — Jake Richter, Dec 18 '16 at 12:55
Hi @JakeRichter, I don't think this is a duplicate of the one you mentioned. This asks specifically the reason for the difference and the OP is very specific too. — SE_User, Dec 19 '16 at 04:44

score 3 · Accepted Answer · answered Dec 18 '16 at 06:30

3

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.

answered Dec 18 '16 at 06:30

manjit5190

8,023
16
33

Just tested this solution to see for my org if it is working and: YES!!!! Thanks @manjit_singh – Itai Shmida Dec 19 '16 at 05:56
1

Just out of curiosity, doesn't this attribute: extends="force:slds" at the app level supposed to do the same thing? – S Walsh Dec 19 '16 at 23:09
I'm finding that when using force:slds the picker isn't formatted correctly. The icons are outside the boxes. – techbusinessman Jan 06 '17 at 01:06

score 1 · Answer 2 · answered Apr 04 '17 at 01:55

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");
  ....
}

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

2 Answers2