提问者:小点点

如何更改<input type=Date>的特定日期的颜色?[副本]


有没有办法改变HTML 5中输入类型日期的样式(即颜色)在HTML 5中我们可以通过


共3个答案

匿名用户

下面是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>