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){

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

  • Your post doesn't contain a question.
    – Adrian Larson
    Apr 4, 2017 at 16:25
  • @AdrianLarson I have updated the question. Does it now sounds like a question now ;) Apr 5, 2017 at 6:55
  • Instead of disabling it, you may do something with the change event of ui:inputDate, like you can nullify the selection may be. Apr 5, 2017 at 11:20
  • @SantanuHalder ya nullify is possible. But I just want to know how it preventDefault() works in Salesforce Lightning. Any Idea? Apr 5, 2017 at 11:22

1 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.

  • But it gives an option to user to manually enter values. So that the value may not be a date. Apr 5, 2017 at 11:32
  • 1
    That can be restricted using the keyup event, but I am more intrigued with usage of preventDefaults() function of jQuery, trying to fit that into this situation. Apr 5, 2017 at 11:35
  • 1
    Kindly update the answer with keyup event. Its working good for me. Good one though. I will upvote it. Apr 5, 2017 at 11:40
  • The answer is updated with keyup event. Apr 5, 2017 at 16:23
  • I have upvoted the answer. But one issue in keyup is that when you long press a key, its not working @Santanu Apr 6, 2017 at 6:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .