Jquery UI Datepicker - jquery/javascriptで複数の日付のbgcolorを強調する方法

Question

私は知っている、Stackoverflowの多くの質問も。しかし、うまくいきませんでした。誰でも私がこの問題を解決するのを助けることができますか？

今月の複数の日付を強調したいと思います。例：2017年3月2日、2017年3月10日、3月25日2017年

マイコード：

$(function() { 
 
    $("#datepicker").datepicker(); 
 
    });

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    
 
<div id="datepicker"></div>

Answer 1

はい：eは、コードの例次のreference

です。私は答えを得た。 ここでは動作する解決策です。

var dates = ['03/02/2017', '03/10/2017', '03/25/2017']; 
 

 
$('#datepicker').datepicker({ 
 
    dateFormat: 'dd/mm/yy', 
 
    //defaultDate: new Date('03/10/2017'), // this line is for testing 
 
    beforeShowDay: highlightDays 
 
}); 
 

 
function highlightDays(date) { 
 
    for (var i = 0; i < dates.length; i++) { 
 
     if (new Date(dates[i]).toString() == date.toString()) { 
 
      return [true, 'highlight']; 
 
     } 
 
    } 
 
    return [true, '']; 
 
}

td.highlight > a { 
 
\t background: #E50104!important; 
 
\t color: #fff!important; 
 
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    
 
<div id="datepicker"></div>

Answer 2

あなたはライブラリにMultiDatesPicker v1.6.3 for jQuery UI

Answer 3

を使用する必要がありますあなたはbeforeShowDayイベント、彼女を使ってそれを処理することができます

$(function() { 
 
$("#datepicker").datepicker({ 
 
    beforeShowDay: function(d) { 
 
     var a = new Date(2017, 2, 10); // April 10, 2012 
 
     var b = new Date(2017, 2, 20); // April 20, 2012 
 
     return [true, a <= d && d <= b ? "my-class" : ""]; 
 
    } 
 

 
}); 
 
});

.my-class { 
 
background: red; 
 
} 
 
.my-class a { 
 
background: lime !important; 
 
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    
 
<div id="datepicker"></div>