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>
Improve this question
5
  • what is callreport attribute type? Commented Nov 22, 2016 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. Commented Nov 23, 2016 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 Commented Nov 23, 2016 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. Commented Nov 30, 2016 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! Commented Feb 8, 2017 at 2:02

1 Answer 1

Reset to default
0

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

<aura:attribute name="value" type="Date" />
Improve this answer
2
  • 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. Commented Nov 23, 2016 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. Commented Nov 23, 2016 at 15:38

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.