ui:inputDateTime date and time pickers not displaying properly

Question

We are working on some Lightning Components for a Salesforce Community. We are using our own template which is bare bones.

Here's the code:

<aura:component access="global" implements="forceCommunity:availableForAllPageTypes">

<ltng:require styles="/resource/slds2_0_2/assets/styles/salesforce-lightning-design-system.min.css" />

    <ui:inputDateTime label="Meeting Time" class="slds-input" displayDatePicker="true"/>
</aura:component>

In our community, it looks like this:

in LEX and in Napili it looks as expected and of course, we don't need the ltng:require tag in there.

Are there any workarounds for this issue?

Answer 1

Try this code.

Component:-

<aura:component access="global" implements="forceCommunity:availableForAllPageTypes">  
<ltng:require styles="/resource/slds2_0_2/assets/styles/salesforce-lightning-design-system.min.css" />
<fieldset class="slds-box slds-theme--default slds-container--small">
    <legend id="newexpenseform" class="slds-text-heading--small
                                       slds-p-vertical--medium">
        Your Code
    </legend>

    <form class="slds-form--stacked">

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <ui:inputDate aura:id="meetTime" label="Meeting Time"
                              class="slds-input"
                              labelClass="slds-form-element__label"
                              displayDatePicker="true"/>
            </div>
        </div>
    </form>
</fieldset>

Style:-

.THIS .uiInputDate .datePicker-openIcon {
    position: absolute;
    left: 95%;
    top: 55%;
}