Datepickerで特定の日付の背景色を変えたい

//sample.html
<body>
    <h1>以下試し</h1>
    <input type="text" id="datepicker" name="date" value="2000-01-01">
    <button class="show_btn">実行</button>
    <p class="show_date">date</p>
    <script src="sample.js"></script>
    <h1>以上試し</h1>
</body>

// sample.css
.Highlighted > .ui-state-default{
    background: #FFFFCC !important;
    color: red !important;
}
.Lowlighted > .ui-state-default{
    background: blue !important;
    color: white !important;
}

// sample.js
var days= ['2000-01-01','2000-01-02','2000-02-01'];
// カレンダーの設定
$('#datepicker').datepicker({
    beforeShowDay: function(date){
        for (var i=0; i<days.length; i++){
            alert(i);
            var day=new Date();
            day.setTime(Date.parse(days[i])); 
            if (day.getYear() == date.getYear() &&
            day.getMonth() == date.getMonth() &&
            day.getDate() == date.getDate()){
                return [true,'Lowlighted','target'];
            }
            else{
                return [true,'Highlighted','mistake'];
            }
        }
    },
    defaultDate: new Date('2020-01-01'), // 初期値はその日の日付　
 　 dateFormat: 'yy-mm-dd',
// 選択した日付を表示するボタン
$('.show_btn').on('click',function(){ 
    inputText=$('#datepicker').val();
    $('.show_date').text(inputText);
})
//

特定の日（'2000-01-01','2000-01-02','2000-02-01'）の背景色を青色にしたいのですが、2000-01-01の日のみ背景色が青色になり、2000-01-02,2000-02-01の日はデフォルトのままです。alert(i)でデバックしてみたところ、ずっと0を表示しているので、for文の繰り返しがうまくいってないと思います。
改善点を教えてくださると助かります。

m.ts10806

2021/05/04 09:12 編集

コードだけでは憶測しかないですが、これですか？ https://jqueryui.com/datepicker/ プラグインやライブラリはなるべく公式URLや自身が使っているバージョンが分かる情報を提示してください。ひとえに「Datepicker」といっても世界中に沢山ありますので。（タグには説明がないので、広義でのDatepickerを指しているものと思います）

hima-mura.

2021/05/04 19:33

次から表示するようにします。参考にさせていただきます。

行動規範の内容に同意します

回答1件

ベストアンサー

ずっと0を表示しているので、for文の繰り返しがうまくいってないと思います。

ずっと0になるのは、forループが1周しか回らないからです。
forループの中にあるif文を見ると、

javascript
1if ( ... ){
2    return [true,'Lowlighted','target'];   // (1)
3}
4else{
5    return [true,'Highlighted','mistake']; // (2)
6}

のようになってるので、
どっちへ分岐しても、必ず1周目でbeforeShowDayハンドラはreturnしてしまいますね。

(1)は今のままで良いので、(2)の方を、for文の後ろへ移動してみてはいかがでしょうか。

あえて文章で書くなら、
daysを順に見ていき、
(1) dateとマッチしたら、即、[true,'Lowlighted','target']をreturnする
(2) daysを全部見終わってもdateとマッチしなければ、[true,'Highlighted','mistake']をreturnする
みたいなニュアンスです。