How to change output type to input type in lightning onclick

Question

I like to change output field type to input type when i click on date picker of date field.

Answer 1

Create an input field, and us the disabled attribute based on your date change. this will basically give you output like field properties, without the bloat.

For the date, use the ui:inputDate component with the native date picker, and add a value change handler to retrieve date value change on the input field. This sample will bind the date value to a value change handler.

<aura:component>
    <aura:attribute name="myDate" type="Date" />
    <!-- Value change handler -->
    <aura:handler name="change" value="{!v.myDate}" action="{!c.handleDateChange}"/>

    <ui:inputDate aura:id="mySelectedDate" 
                  label="Select a date" displayDatePicker="true" 
                  value="{!v.myDate}"/>
</aura:component>

Now that you have selected a date, and can handle an action. Suppose you want to make another input field disabled use the code below.

lightning:input disabled="{!v.disabledByDateChange}" value="initial value" label="Disabled text field with a predefined value" />