How to prevent manual entry in ui:inputDate

Question

I have used <ui:inputDate> for entering date as follows:

<ui:inputDate aura:id="ValidFrom" label="Valid From" class="slds-input" labelClass="slds-form-element__label" value="{!v.ValidFrom}"  displayDatePicker="true" required="true" keypress="{!c.validateDate}"/>

When I use disabled="true", the datepicker option is not visible.

I just want to prevent user entering date manually.

I tried using event.preventDefault() but it did not stop the user to enter value manually. The below is the code for preventDefault.

validateDate : function(component, event, helper){
  event.preventDefault();
}

How to prevent user manually entering data in the ui:inputDate box? But the datepicker should be available to choose the date.

Answer 1

Well, not the change event, but the select event worked for me.

You can nullify the selection user makes in the handler of select event of ui:inputDate.

nullify : function(comp, ev, hel)
{
    var dp = comp.find('ValidFrom');
    dp.set('v.value', '');
}

Add the select event on ui:inputDate,

<ui:inputDate aura:id="ValidFrom" label="Valid From" class="slds-input" labelClass="slds-form-element__label" select="{!c.nullify}" keyup="{!c.nullify}" keypress="{!c.nullify}" updateOn="keypress, keyup" displayDatePicker="true" required="true" />

keyup & keypress combined will restrict users to stop typing anything in the box, even if he/she long presses a key. Also notice the updateOn attribute of the element.

Nullifying is just an option, you can show an error or warning to user as well.