Restrict past dates in lightning-input

Question

I would like to block my user from selecting a date that happened in the past in a lightning-input of type date. For this I would like to use the min attribute of the type date.

This is the html code for the lightning-input :

<lightning-input name="fromDate" label='From Date' type="date" min={todaysDate} onchange=dateEventHandler}
                 value={fromDate} date-style="short" required>
</lightning-input>

And here is the js code to get the date

   get todaysDate() {
       var today = new Date();
       return today.toISOString();
   }

Unfortunately, it doesn't work when I select the current date :

Any Idea how to solve it ?

Answer 1

Date() actually returns the current date time, you can see that the issue is with the time when you preview your component in the playground.

Assuming you want to just restrict by the current day you need replace your todaysDate() method with something like this:

get todaysDate() {
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();
        today = mm + '/' + dd + '/' + yyyy;
        return today
    }

as per https://stackoverflow.com/a/4929629/9623950

Which results in the input accepting today's date. I've left the formatting the same as in the linked example, but you can change it to whatever you require.