Im building a lightning experience app and i have created a ui:inputDate field with displayDatePicker="true" But the date picker always appears outside the input box, or if i get it inside the input box, i lose the styling.
I am using salesforce lightning design system for styling.
Code:
<aura:component controller="risetest.lBookings" implements="force:appHostable">
<ltng:require styles="/resource/SLDS090/assets/styles/salesforce-lightning-design-system-ltng.css"
scripts="/resource/jquery,
/resource/moment" />
<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="appointments" type="risetest__Appointment__c[]"/>
<aura:attribute name="newAppointment" type="risetest__Appointment__c"
default="{ 'sobjectType': 'risetest__Appointment__c',
'Name': 'Test',
'risetest__Date__c': '',
'risetest__Start_Time__c': '',
'risetest__End_Time__c': ''}"/>
<div class="slds-text-heading--medium">New Appointment</div>
<div class="slds-m-top--small"></div>
<div class="container">
<form class="slds-form--stacked">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputDate aura:id="AppointmentDate" label="Appointment Date"
class="slds-input"
format="yyyy-MM-dd"
labelClass="slds-form-element__label"
value="{!v.newAppointment.risetest__Date__c}"
displayDatePicker="true" />
</div>
</div>
<div class="slds-form-element">
<ui:button label="Submit"
class="slds-button slds-button--neutral slds-button--small"
press="{!c.createAppointment}"/>
</div>
</form>
</div><!-- ./container-->
<div class="slds-m-top--medium"></div>
Here is what it looks like:
If remocve the class on the ui:inputDate :
<ui:inputDate aura:id="AppointmentDate" label="Appointment Date"
format="yyyy-MM-dd"
labelClass="slds-form-element__label"
value="{!v.newAppointment.risetest__Date__c}"
displayDatePicker="true" />
I get the following with no styling:
Can you help?