3

I am using a lightning:input to get a date/time value in the users Locale.

If the user picks a date that is beyond today I need to prevent that value from being entered.

I am able to catch this event and set the value to null BUT the date picker still populates the date. The time is cleared.

Any ideas how to prevent the picker from entering the date?

<lightning:input type="datetime" name="end-date" onchange="{!c.endDateUpdated}" label="Enter a end date/time" aura:id="end-date"/>

Controller JS

endDateUpdated: function(component,event,helper){
    var target = event.getSource();

    if(!$A.util.isUndefinedOrNull(target)) {
        var enteredValue = target.get("v.value");
        var g = new Date();

        if(Date.parse(enteredValue) > g.getTime()){
            component.find("end-date").set("v.value",null);
            event.preventDefault(); //Does not work
            alert('Invalid Date');
        }
    }
}

Attempt based on answer to change to onclick

When changing the onchange to onclick a different issue occurs. The Date being int he future IS caught and cleared. But if the current day is picked AND the time is changed to a future time, it is NOT caught. Confirmed with onchange both are caught. With onchange if the time is placed in the future (with current date) then the date is cleared properly.

Results after clicking a future date:

Notice how the time is cleared but the picked date is populated. Now if the field had a valid value to begin with it will get cleared as expected.

enter image description here

4

Ok. Based on sanket's answer and finding that if a valid value is entered first, I have defaulted to value to the current date/time and now it works.

Basically the issue only happened if the lightning:input did not have an initial value. Once that value is set it works properly.....

Bug??

Working markup

Markup

<aura:attribute name="userDateTime" type="Datetime" description="The current user time"/>

<lightning:input value="{!v.userDateTime}" type="datetime" name="end-date" onchange="{!c.endDateUpdated}" label="Enter a end date/time" aura:id="end-date"/>

JS

init:function(component, event,helper){
    component.set("v.userDateTime",new Date().toISOString());
},

endDateUpdated: function(component,event,helper){
    var target = event.getSource();

    if(!$A.util.isUndefinedOrNull(target)) {
        var enteredValue = target.get("v.value");
        var g = new Date();
        if(Date.parse(enteredValue) > g.getTime()){
            component.find("end-date").set("v.value",null);
            alert('Invalid Date');
        }
    }
}
  • nice one @Eric but we need to understand more about date and time field behaviour for events. May be that is a bug. – sanket kumar Aug 17 '18 at 5:29
  • @sanketkumar - its a typical bug. Lots of unexpected issues when a value provider is not initially set...Not sure value provider is correct term here as it is really the value attribute of the input. Its just hard to see or notice that is the issue when it happens – Eric Aug 17 '18 at 5:30
  • Why you should not go for validation error message before submitting the form? – sanket kumar Aug 17 '18 at 5:33
  • @sanketkumar - preference. Prefer to show blocking issues at time of entry. I consider it a better user experience.....BUT even if I did validation at end, it still would not clear the field. It would behave the same way.....If field is not cleared then the date AND time need to be set as the time does not default to current time if populated – Eric Aug 17 '18 at 5:35
  • You are right.. What i am thinking of is defining a attribute of type object with default values to null and then setting the attribute to null after validation. but it will reset the whole form. If you know a way to retain other field and just make datetime field to null ..will be answer for your question – sanket kumar Aug 17 '18 at 5:39
0

@Eric You just need to change your onchange to onclick and it will work fine as desired.

 <lightning:input type="datetime" name="end-date" label="Enter a end date/time" 
 onclick="{!c.endDateUpdated}"  aura:id="end-date" />

and even you dont need this too:- event.preventDefault();

enter image description here

I had tested it. It is working fine for me.Earlier your code was working only when you changed the correct value to bad one. Now it will fire every time you enter a value and check for bad values.

Hope it helps you.

  • Unfortunately that does not work as it creates the opposite effect. The date clears but if the time is changed to a future time it no longer catches it. To test, pick todays date and change the time to as far ahead as you can. You will see it does not catch it. Go back to onchange and do same thing and you will see it catches it – Eric Aug 17 '18 at 4:39
  • This behaviour may be because onclick is triggering only when click is done in date field. Need more investigation 🤔 – sanket kumar Aug 17 '18 at 5:27
  • you are correct. see my answer. Another example of weird behavior when a value provider is not initially set – Eric Aug 17 '18 at 5:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.