Lightning system datepicker icon not in input box?

Question

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?

Answer 1

<ui:inputDate> generates a few elements when it gets rendered. The ones we're concerned with are an <input> element, and an <a> element that is used for your icon.

The CSS class .slds-input is applied to the <input> element and has the property width: 100% which is causing your <a> element to wrap because it comes after the <input> element in your DOM. There are a few ways to get around this:

1. Reduce the width of your date picker in the Style portion of your component
2. Add white-space: nowrap to the div that contains your <ui:inputDate> element.

I'm no CSS/HTML wizard, there may be some better solutions here, but your problem is definitely the <a> element wrapping.

Answer 2

The current datepicker is a dog. I ran into the exact same issues with the icon placment.

Because of this, I have created a custom date picker which should solve any issues you may have. Also, if you run into issues, you will be able to fix them, since you will have defined the components. Here is the blog post link.

This date picker is styled using the proper SLDS css, so will fit right into your SLDS Page or Lightning App.

I tried to eliminate any dependencies and would have fully succeeded except for a bug with the Locker Service (it seems to prevent some values being returned from string to date methods called on the localizationService object. Hence, it does require moment.js at present.

In your form, put the below(once you have created it) as a top level member of the form:

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

In your component, you need to handle the dateChangeEvent from the component:

<aura:handler name="dateChangeEvent" event="c:DateChange" action="{!c.handleDateChange}" />

Finally, in your controller or helper update your date:

handleDateChange: function(cmp, event, helper) {
  var dateSelector = event.getSource().getLocalId();
  if (dateSelector == 'closeDate'){
    var opp = cmp.get("v.opportunity");
    opp.CloseDate = event.getParam("value");
  }
}

In the meantime, here is all the code on github: Datepicker

Of course, a gif too:

Let me know if you find any bugs.

Answer 3

As per Trailhead Module under Bonus Lesson—Minor Visual Improvements section you will find out the solution as below

Salesforce Lightning Component for DatePicker Input

<div class="slds-form-element">
      <div class="slds-form-element__control">
          <ui:inputDate aura:id="expdate" label="Expense Date"
              class="slds-input"
              labelClass="slds-form-element__label"
              value="{!v.newExpense.Date__c}"
              displayDatePicker="true"/>
      </div>
  </div>

CSS for the above datepicker input

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

You will get the output as below

Answer 4

I had the similar issue and the way I fixed is by overriding the width, hope this helps you.

.THIS .slds-input{
    width: 50%
}