下面是jQuery的方法。
$('input[type="date"]').change(function{
var date = new Date( this.value );
var specificDate = "23 March 2018";
if(date.getDay() == 6 || date.getDay() == 0 || this.value == specificDate) { //Check for Saturday or Sunday
$(this).css("color","red");
}
else {
$(this).css("color","inherit");
}
});
我会制作一个数组,包含你的特殊日期。这样,您就可以针对输入的变化。并根据是否在数组中找到该类来更改该类。
i已使用indexOf()
,并将在结果与-1不同时更改类
希望这就是你想要的。如果需要,乐意解释或帮助提供更好的解决方案。
const redDates = ['2018-02-26','2018-03-26'];
$('input').change(function() {
$(this).removeClass('holiday');
if(redDates.indexOf($(this).val()) != -1)
$(this).addClass('holiday');
})
.holiday {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date">
纯js解决方案,不需要jQuery。您可以将假期保存在数组中,并检查输入是否在数组中。
参考1。包括2。日期比较
function datechanged(el) {
var holiday = new Date("2018-10-02");
var holidays = [new Date("2018-10-02").getTime(), new Date("2018-02-02").getTime(), new Date("2018-02-01").getTime()]
var inputDate = new Date(el.value);
el.classList.remove("red");
if(holidays.includes(inputDate.getTime())){
el.classList.add("red")
}
}
/* Styles go here */
.red{
color:red;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<input type=date onchange="datechanged(this)">
</body>
</html>