1

I created a custom Lightning component called inputDateTimeCustom to encapsulate some tweaks to the ui:inputDateTime component. I wanted to set the default class values and fix the icon position. The problem is the date and time no longer display when the value attribute is set.

inputDateTimeCustom.cmp

<aura:component extends="ui:inputDateTime">
    <aura:attribute name="class" type="String" default="slds-input" />
    <aura:attribute name="labelClass" type="String" default="slds-form-element__label" />
    <aura:attribute name="displayDatePicker" type="Boolean" default="true" />
</aura:component>

inputDateTimeCustom.css

.THIS .dateTime-inputDate {
    position: relative;
}

.THIS .datePicker-openIcon {
    position: absolute;
    left: auto;  /* IE doesn't support initial so use auto instead. */
    left: initial; /* Reset the left value so it doesn't interfere with the right. */
    top: 7px;
    right: 13px;
}

.THIS .dateTime-inputTime {
    position: relative;
}

.THIS .timePicker-openIcon {
    position: absolute;
    left: auto;  /* IE doesn't support initial so use auto instead. */
    left: initial;
    top: 7px;
    right: 13px;
}

When I try to use the component and bind its value attribute, nothing appears in the component. As a sanity check, I added a ui:inputDateTime component, and it displays the datetime value correctly.

<div class="slds-form-element">
    <!-- The component appears with no value -->
    <c:inputDateTimeCustom label="Start" value="{!v.StartDate}" />

    <!-- But this works fine -->
    <ui:inputDateTime label="Start" value="{!v.StartDate}" />
</div>

Can anyone tell me what I'm doing wrong?

EDIT:

Not surprisingly, switching to composition works. I'd like to be able to use the inheritance version though and avoid repeating the attribute definitions for label and value.

<aura:component>
    <aura:attribute name="value" type="String" />
    <aura:attribute name="label" type="String" />
    <aura:attribute name="class" type="String" default="slds-input" />
    <aura:attribute name="labelClass" type="String" default="slds-form-element__label" />
    <aura:attribute name="displayDatePicker" type="Boolean" default="true" />

    <ui:inputDateTime value="{!v.value}"
                      label="{!v.label}"
                      class="{!v.class}"
                      labelClass="{!v.labelClass}"
                      displayDatePicker="{!v.displayDatePicker}" />
</aura:component>
  • what is callreport attribute type? – Rao Nov 22 '16 at 21:34
  • callReport is the object where the start date is coming from. It could easily be "v.StartDate" instead. In fact I'll update the question to avoid confusion. – Joe B Nov 23 '16 at 1:57
  • just curious did you try to edit and save the app/ component reference which has the <c:inputDateTimeCustom name="StartDate" label="Start" value="{!v.StartDate}" /> I ask this because the c:inputDateTimeCustom has label and value attributes but does not contain name attribute. may be that could be why the component is not rendering as expected – Rao Nov 23 '16 at 18:10
  • Thanks for pointing that out. My custom control originally had some extra attributes like name which I took out for simplicity's sake. I just forgot to remove it in one spot. It's fixed now. – Joe B Nov 30 '16 at 19:17
  • I had the same problem, when extending ui:inputDate and displaying the date picker, the value will no longer update when selecting a date. I'm also probably going to be forced to switch to composition even though lightning components were designed for inheritance. If there's a fix would love to know it! – Boog Feb 8 '17 at 2:02
0

I think you are passing date value to string, please check again changing by

<aura:attribute name="value" type="Date" />
  • The version of the component that doesn't work (extends="ui:inputDateTime") doesn't explicitly declare the value attribute. The version of the component that does work (composition) explicitly declares the value attribute with type string and it does work! So the type of the attribute can't be the issue. – Joe B Nov 23 '16 at 15:37
  • I tried explicitly declaring the value attribute with type DateTime with no success. I also tried explicitly setting the attribute value with "component.getSuper().set('v.value', value);" in a change handler with no success. – Joe B Nov 23 '16 at 15:38

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.