jquery-ui - jQuery UI Datepicker-選択時に、特定の範囲の日付を強調表示するにはどうすればよいですか？

Question

ユーザーが日付を選択したときに、次の11日間を強調表示したいと思います。選択した日に応じて選択した12日間の範囲を表示することを目的としています。

http://www.filamentgroup.com/から提案された「日付範囲ピッカー」を見たことがありますが、これは私が望む視覚化を実際には与えません。私が理解しているように、ユーザーが範囲（from / to）を選択できるようにするだけです。それ。

これをどのように実現できるかについての提案はありますか？

乾杯

Answer 1

beforeShowDayイベントを使用して、強調表示する必要のある日付のCSSスタイルを指定できます。

コード：

$(document).ready(function(){
    var selected = null;

    $('#datePicker').datepicker({beforeShowDay: function(date) {
                        if (selected != null && date.getTime() > selected.getTime() &&
                            (date.getTime() - selected.getTime()) < 12*24*3600*1000) {
                            return [true, "highlighted"];
                        }
                        return [true, ""];
                    }});

    $("#datePicker").datepicker( 'option' , 'onSelect', function() {
            str = $(this).val().toString();
            selected=$.datepicker.parseDate('mm/dd/yy', str);
            console.log(selected);
            });
});