javascript - HTML5 中的日期输入：使用纯 JavaScript 突出显示每个星期一

Question

我正在一个网站上工作，该网站使用<input type=”date”&gt;通过浏览器的本机小部件显示日期选择器。我需要用户不能在星期一预订，因为该服务已关闭。我知道我不能仅仅通过标记来阻止选择周末或禁止星期一。相反，我使用 HTML5 验证 API 和原生 JavaScript Date 对象在用户选择星期一时通知他们。

我还想在每个星期一用不同的颜色突出显示，以在用户提交不允许星期一的日期之前告诉他们。

我只需要使用纯 Javascript。

有什么建议吗？

var date = document.querySelector('[type=date]');

function noMondays(e){

    var day = new Date( e.target.value ).getUTCDay();

    // Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday

    if( day == 1 ){

        e.target.setCustomValidity('OH NOES! We hate Mondays! Please pick any day but Monday.')
      

    } else {

        e.target.setCustomValidity('');

    }

}

date.addEventListener('input',noMondays);

<form action="/action_page.php">
  <input type="date"><br><br>
  <input type="submit" value="Submit">
</form>

标签： javascripthtmldatedatepickercalendar