JQuery UI DatePickerを複数の日付表示

Question

私はこれまでJQuery UI DatePickerを使用してきましたが、かなり満足しています。私は将来、複数の日付をユーザーに表示する方法を探しています。私は、ユーザーが日付を選択できるようにする必要はありません、私はちょうどそれらを実行時にそれらを修正したい。

これを可能にする簡単な方法はありますか？

Answer 1

これは、beforeShowDayイベントで行うことができます。

// list of dates to highlight 
var dates = [ 
    [2011, 8, 1], 
    [2011, 8, 9], 
    [2011, 8, 25] 
]; 

$('#datepicker').datepicker({ 
    beforeShowDay: function (date){ 
     var year = date.getFullYear(), month = date.getMonth(), day = date.getDate(); 

     // see if the current date should be highlighted 
     for (var i=0; i < dates.length; ++i) 
      if (year == dates[i][0] && month == dates[i][1] - 1 && day == dates[i][2]) 
      return [false, 'ui-state-highlight ui-state-active']; 

     return [false]; 
    } 
}); 

例を参照してください：http://jsfiddle.net/william/VzZYU/

Answer 2

私はこれを行う機能がdatepickerに組み込まれているとは思わない。だから、あなたが求めていることをする簡単な方法ではないようです。

ただし、複数の日付にui-datepicker-current-dayクラスを適用することでこれを実現できます。選択したい日付のタグを見つけて手動で行う必要があります。

日付を選択できないようにするには、"disable" datepickerメソッドまたは"disabled"オプションを使用できます。しかし、それはカレンダーを薄暗くするでしょう。別の考えられる方法は、onSelectイベントを処理し、cssクラスを複数の日付に再割り当てし、ユーザーが選択した日付から削除することです。