每年在相同日期将jquery datepicker日期设置为不同的颜色

时间:2018-10-10 12:58:05

标签: javascript jquery datepicker jquery-ui-datepicker

我想使日期选择器日期单元格每年在相同日期使用不同的颜色。 如果月份为12(十二月),日期为18到31。 我不希望特定的日期数组应该是不同的颜色。

我已经尝试过了:

beforeShowDay: function(date) {
      var day = date.getUTCDate();
      var month = date.getUTCMonth();

      return [!( (day == 17 && month == 11) || (day == 18 && month == 11) || (day == 19 && month == 11) || (day == 20 && month == 11) || (day == 21 && month == 11) || (day == 22 && month == 11) || (day == 23 && month == 11) || (day == 24 && month == 11) || (day == 25 && month == 11) || (day == 26 && month == 11) || (day == 27 && month == 11) || (day == 28 && month == 11) || (day == 29 && month == 11) || (day == 30 && month == 11) )];
}

但这只会禁用细胞。我不想让他们禁用

1 个答案:

答案 0 :(得分:1)

您要使用jQuery更改一年12月的所有18至31日期的颜色

请检查以下代码:

$('#mydate').datepicker({
    beforeShowDay: colorize
});


function colorize(date) {
    if((date.getMonth() + 1)!=12) return [true, ""];
    if(date.getDate()<18) return [true, ""];
    
    return [true, "cool"];
}
.cool a.ui-state-default {
    background-color: #03a9f4;
    background-image: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<p>See December month of any year:</p>
<input type="text" id="mydate" placeholder="click here" />