html input type = date, field constraints

Question

I have a simple input like :

Enter Payment Date : <input type="date" name="date" required><br/><br/>

Now I want to restrict the user from selecting a date before the current date. I checked the attributes of the date input and found that I can set a min and max date. But the min attribute requires me to specify a particular date like min="2017-08-06". But I want it to be system's current date. Because if I set the min date as 2017-08-06 and the user uses the app later on 2017-08-20, then the user can choose a date like 2017-08-15 or so, which I don't want to. I want the user to be able to choose dates from the present date on which he/she is using the app.

Is there any way I can do that using this input field?

Sorry, this is a long explanation, I wanted to clear it out.

You can add `max` and `min` attributes to your nput type="date" tag, in order to have a restriction. You might need some of the jQuery for tweaking your logic — Tushar Gupta, Aug 06 '17 at 06:03
@Tushar I did look into that, I mentioned it in my question. Can you please see the question once again? — Steve Doson, Aug 06 '17 at 06:05
HTML can not change itself based on anything. But you could change it via javascript in the users browser. The better solution though would be to render the HTML correctly on the server with a server side programming language. You might got java or PHP running there? — caramba, Aug 06 '17 at 06:05

McLemore · Answer 1 · 2017-08-06T06:59:30.260

You would have to use JavaScript to get the current date and then parse some information from it. The code was taken from Samuel Meddows' accepted answer to the question How do I get the current date in JavaScript and then tweaked to work with the min attribute of the HTML input tag.

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd
}

if (mm < 10) {
  mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
document.getElementById('input').setAttribute("min", today);

Enter Payment Date : <input id="input" type="date" name="date" required><br/><br/>

html input type = date, field constraints

1 Answers1