将日期的输入限制在 javascript 中的特定范围内

Question

I have a list of different dates, in this format YYYYMMDD. and I have an input field type date as below, HTML and Javascript. I used a method by Jquery datePicker but I have not reached a solution yet. I prefer to use standard HTML and Javascript.

<input type="date" id="selDate" placeholder="e.g. 20180925"> 

My question is that I want to update this input date calender and highlighted multiple days based on the different date given so the user will be allowed to pick days within the given list of date.

so based on the below dates example, the user should only able to pickup those dates.

20180510 20161209

Thanks

Answer 1

You can use min, max parameters to limit the selectable range of dates:

 <input type="date" id="selectedDate" min="2016-12-09" max="2018-05-10">

You can also "replace" the date picker with a list:

 <input type="date" id="selectedDate" name="date" list="datesList"> <datalist id="datesList"> <option label="Day one">2016-12-09</option> <option label="Day two">2018-05-10</option> </datalist>