6

So I got this really simple component:

<aura:component >
    <form class="slds-form--inline">
        <div class="slds-form-element">
            <ui:inputCheckbox label="Cancel"/>            
        </div>
        <div class="slds-form-element">
            <ui:inputDate aura:id="dateField" label="Due Date" value="2014-01-30" displayDatePicker="true"/>
        </div>
        <div class="slds-form-element">
            <ui:inputTextArea  aura:id="comments" label="Item Description" rows="1"  />            
        </div>
        <div class="slds-form-element">
            <ui:button label="Add Sub-item"/>
        </div>            
    </form>
</aura:component>

Trouble is, that inputDate element is not inheriting inline form style class: Lightning design system used with Lightning component

Why is that?

5

non-SLDS picker SLDS picker

ui:inputDate Lightning Component will render as on the right only when the Component is "living" natively inside of the Lightning Experience on a Record Detail page or Quick Action, etc. But if you use ui:inputDate in a Lightning Application or with Lightning Out you will get a date picker as rendered on the left. Why Salesforce thought anyone would ever want a picker as on the left is beyond me.

Even when you inherit the Lightning Design System natively by extending force:slds or including the SLDS as a static-resource, Date pickers continue to render as the left.

I've seen other individuals attempt to solve this problem by subclassing ui:inputDate or by composition (implement a component which uses ui:inputDate and then specialize). However, there is a bug (in api v39) that prevents meaningful subclass of ui:inputDate (value binding seems to no longer work) and because the datePicker popout was implemented by injecting the popout in to the DOM outside of the components container (what Salesforce breaking their own design guidelines?!) - you are not able to override the CSS styles which get applied to date picker popout since they reside outside the component and any lightning bundled CSS selector which starts with ".THIS" cannot be applied to the picker.

TLDR: my solution

Steal the desirable CSS styles from a properly styled control from somewhere in the Lightning Experience (i.e. record detail), and then include the external CSS as a Static Resource so that the CSS can apply to the whole page and override Salesforce's shitty CSS.

I had to make some minor changes to the CSS so that it had a higher specificity than any styles which might compete. I did that primarily by adding body to the selectors. Here is a link to my CSS

Finally here is example Lightning Component which includes the CSS as a static-resource,

<aura:component>
  <ltng:require styles="{!$Resource.DatePicker}" />
  <ui:inputDate displayDatePicker="true" />
</aura:component>
3

Looks like you're missing the slds-input class in ui:inputDate. You can do something like this:

<div class="slds-form-element">
     <div class="slds-form-element__control">
         <ui:inputDate aura:id="dateField" label="Due Date"
                       class="slds-input"
                       labelClass="slds-form-element__label"
                       value="2015-11-17"
                       displayDatePicker="true"/>
     </div>
 </div>

Take a look at the Quick Start in the Dev guide and see if that helps.

  • Thank you for the suggestion, but in this particular example it did not produce any different result. Will look at this in more depth later, perhaps I am missing something else. – dzh Nov 18 '15 at 22:26
  • 1
    Hmm, I tried it too - I think it's just not ready yet, sigh. – Caspar Harmer Nov 24 '15 at 17:14
1

Please use lightning:input tag , with summer 19 it is in full potential and supports date type and formatting.Doc for Tag Updates in summer 19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.