[SalesForce] How to prevent manual entry in ui:inputDate

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.

Best Answer

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.

Related Solutions

[SalesForce] ui:inputDate change event not firing

You should be able to add the handlers after creation - The reason being is because you don't need to make your aura:id values unique.

If there are multiple components with the same local ID, find() returns an array of the components.

source

So with that in mind, in your iteration, give the input dates all the same id of say... aura:id="repeatedDate" and reference them in a loop on init:

var dateInputs = component.find("repeatedDate");

for (var i = 0; i < dateInputs.length; i++) {
  var dateInput = dateInputs[i];
  if (dateInput) {
    dateInput.addHandler("valueChange", component, "c.handleDateChange");
  }
}

Note - I'm not sure of the exact name for the valueChange event - you'll need to check the docs for this, or even consult the aura github project.

Note, there is another technique that SHOULD work, but doesn't - I'll put it in for reference, as it probably will at some point:

var cmpArr = component.find({ instancesOf : "ui:dateInput" });
for (var i = 0; i < cmpArr.length; i++) {
    var outputCmpArr = cmpArr[i];
    outputCmpArr.addHandler("valueChange", component, "c.handleDateChange");
}

(There are a couple of problems with this technique, one of which is supposed to be fixed by performing a find on the parent of the iterator list first and running a find off that - but I wasn't able to get that to work either)

[SalesForce] Restricting ui:inputDate to take ‘//’

There is no readonly attribute associated to an input element when the ui:inputdata renders, so there is no question of making the ui:date readonly. I was going to recommend lightning:input but you do not get the nice date picker option with lightning:input component

This is what I did,

Downloaded momentJS from here: https://momentjs.com/ and load it into the static resource( do not go for CDN option locker service will not support CDN)

Though this JS library is not officially published as locker supported third party library , i looked this forum and saw @mohith answer this question: Is there a version of moment.js that works with the current Locker Service?

The only close answer I found to validate mm/dd/yyyy format was by using momentJS, all other options will fail you somewhere down the line.

Not to the code

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global">
    <ltng:require scripts="{!$Resource.momentjs}"
                  afterScriptsLoaded="{!c.validatedate}" />

    <ui:inputDate aura:id="dateField" label="Birthday" value="2014-01-30" displayDatePicker="true" format="MM/dd/yyyy" change="{!c.validatedate}"/>
</aura:component>

controller:

({
    validatedate : function(component, event, helper) {
        var date_val = component.find("dateField").get("v.value");
        var date_formatter = new Date(date_val);
        if(date_val.includes('//') || !moment(date_formatter, 'MM/DD/YYYY', true).isValid()){
             alert("invalid date please enter in MM/DD/YYYY format");
            component.find("dateField").set("v.value","2014-01-30");
        }
    }
})

output:

Best Answer

Related Solutions

[SalesForce] ui:inputDate change event not firing

[SalesForce] Restricting ui:inputDate to take ‘//’

Related Topic