如何禁用html中日期输入的日期数组

Question

我有一个带type=date的HTML<input />，我想禁用日期数组，我尝试了以下代码，但无法禁用日期：

<script>
const chooseDay = document.querySelector('input[name="end_time"]');
const handleDateChange = ({ target: dateField }) => {
const
{ dataset: { unallowed = '[]' }, value } = dateField,
unallowedDates = JSON.parse(unallowed),
valid = !unallowedDates.includes(value);
if (!valid) { dateField.value = null; }
dateField.classList.toggle('invalid', !valid);
};
chooseDay.addEventListener('change', handleDateChange);
</script>
<input type="date" name="end_time" class="form-control" 
data-unallowed='["2022-08-25","2022-08-20","2022-08-22"]' />

有人能帮我们禁用上面数组中的日期吗？提前谢谢。

Answer 1

根据上面的注释，代码作为一个片段似乎可以正常工作，但可能会有所简化？

const changehandler=function(e){
if( this.dataset.unallowed.includes( this.value ) ){
this.classList.add('invalid');
this.value=null;
return false;
}
this.classList.add('valid');
};
document.querySelector('input[type="date"][name="end_time"]').addEventListener('change',changehandler);

.invalid{background:rgba(255,0,0,0.25)}
.valid{background:rgba(0,255,0,0.25)}

<input type="date" name="end_time" class="form-control" 
data-unallowed='["2022-08-25","2022-08-20","2022-08-22"]' />

Answer 2

<input type="date" name="party" min="2022-08-22" max="2022-08-25">

结果是，只有指定的日期可以分割，其余的无法在选择小部件中选择。