HTML5 输入类型日期验证-如何限制输入

Question

hey guys can someone help me out with this. I am using the HTML5 input type = date in one of my client side input forms. I want the user to be able to add a date only for the month. So if the date is 1st June then upto 30th June and if the date is 10th June then also only till 30th June. Is there a way I can achieve this in the front end.

One possible solution or maybe more of a workaround is to take the date and then compare it in my app.js with the the current month and send the user to an error page if the month is not matching with the current month. But I was hoping I can validate this somehow in the front end.

I read about the min and max parameter but doesn't look like a viable solution for a monthly validation, unless I am missing something

Can some one help?

Regards, Sandeep

Answer 1

Min and max can be used with dates. See: Constraint Validation at MDN.

 let today = new Date(); let maxDate = new Date(); maxDate.setUTCDate(1); maxDate.setUTCMonth(maxDate.getUTCMonth()+1); maxDate.setUTCDate(0); document.getElementById('thedate').setAttribute('max', `${maxDate.getUTCFullYear()}-${(maxDate.getUTCMonth()+1).toString().padStart(2,'0')}-${maxDate.getUTCDate()}`); document.getElementById('thedate').setAttribute('min', `${today.getUTCFullYear()}-${(today.getUTCMonth()+1).toString().padStart(2,'0')}-${today.getUTCDate()}`); console.log(document.getElementById('thedate')) document.forms[0].onsubmit = function(e) { e.preventDefault(); console.log(`the form is ${e.target.reportValidity()?'':'not '}valid`); return false; }

 <form> <input id="thedate" type="date"> <input type="submit"> </form>