jquery - jQueryの日付ピッカーで特定の範囲の日付を強調表示する

Question

指定できるはずの開始日と終了日の間の日付を強調表示する必要があります。誰でも私を助けることができますか？

Answer 1

これが実際の例です！ここから、コア、ウィジェット、および日付ピッカーを備えたhttp://jqueryui.com/downloadを使用してパッケージを作成する必要があります。

前に置くjavascriptの部分：

<script>
$(document).ready(function() {

    var dates = ['22/01/2012', '23/01/2012']; //
            //tips are optional but good to have
    var tips  = ['some description','some other description'];      

    $('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 3,
    });

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

});
</script>

HTML部分：

<div id="datepicker"></div>

このCSSをどこかに追加します。

    td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

そして、それを機能させるには、bg.pngという小さな画像を作成する必要があります

Answer 2

他の人よりも速くて軽いように見えるので、私は2セントを投入すると思いました：

jQuery(function($) {
  var dates = {
    '2012/6/4': 'some description',
    '2012/6/6': 'some other description'
  };

  $('#datepicker').datepicker({
    beforeShowDay: function(date) {
      var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();

      if (search in dates) {
        return [true, 'highlight', (dates[search] || '')];
      }

      return [false, '', ''];
    }
  });
});

Answer 3

これがまだ役に立つかどうかはわかりませんが、これは私にとって役に立ったので、私がやったことを共有したいと思います:

私のJavaScriptでは：

var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"];

$("#SomeID").datepicker({ beforeShowDay: highLight });

function highLight(date) {
        for (var i = 0; i < holidays.length; i++) {
            if (new Date(holidays[i]).toString() == date.toString()) {
                return [true, 'ui-state-holiday'];
            }
        }
        return [true];
    }

そして、追加したjquery-ui-theme.cssに

.ui-state-holiday .ui-state-default {
    color: red;
}

週末も強調したい場合は、代わりにこの CSS を使用する必要があります

.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default {
    color: red;
}

そして、これは結果です：

(言語をスペイン語に設定しましたが、これはこのコードにとって重要ではないことに注意してください)