0

私は 5 か月の Datepicker インライン カレンダーを持っています。startDate は私が書いた変数で、ユーザーのクリック イベントによって設定されます。これを行うことで、init の後に minDate および maxDate オプションを調整しています。

$('#datepicker').datepicker("option",{"minDate":startDate,"maxDate":endDate}).datepicker("refresh");

ただし、カレンダーが更新されると、startDate 変数に従って最初の月が表示されるため、方向感覚が失われます。たとえば、1 月にカレンダーの初期化があり、5 月まで表示されます。startDate がたまたま後の月、たとえば 2 月にある場合、カレンダーを更新すると、その月 (2 月) から表示され、選択した日付までのすべての日付が無効になります。カレンダーをフリーズして、常に 1 月から 5 月まで表示されるようにしますが、minDate までの日付はすべて黒く塗りつぶします。

minDate と maxDate の設定に関係なく、特定の 5 か月の範囲を表示するようにカレンダーを固定する簡単な方法はありますか?

前もって感謝します。

4

4 に答える 4

2

選択した日付より前の日付を黒くするために、minDate および maxDate 機能をハックしようとしていました。これを行う代わりに、次のように beforeShowDay にフィードする日付オブジェクトの配列を作成しました。

   $('#datepicker').datepicker({
            ...
            beforeShowDay: setRestrictedDates,
            ...
   })
 function setRestrictedDates(date) {
  var arrLen = jsForbiddenDatesArray.length;
  for (var x=0; x<arrLen; x++) {
   var arraydate = jsForbiddenDatesArray[x];
   var arraytime = Math.round( new Date(arraydate).getTime() / 86400000 );
   var dtime = Math.round( date.getTime() / 86400000 );
   if ( dtime == arraytime || date.getDay() == 5) {
    return [false, ''];
    break;
   }
  }
  return $.datepicker.noWeekends(date);
 }

86400000 で割って dtime を設定すると、日付が日に変換されるだけなので、比較して 2 日が同じであることを確認できます (dtime == arraytime)。また、OR ステートメント "date.getDay() == 5" はすべての金曜日を選択します。これは、datepicker.noWeekends(date) と組み合わせると、禁止された日付配列に含まれる日付と共に、週末と金曜日が黒く塗りつぶされていることを意味します。

これが誰かに役立つことを願っています。日付ピッカーの除外日を設定することは非常に便利ですが、そのためのドキュメントが存在しないためにあいまいであることがわかりました.

これを理解するのを手伝ってくれたここと jQuery フォーラムの皆さんに感謝します。

于 2010-06-24T11:53:22.240 に答える
1

ジョン-

私はこれと同じ問題に直面し、オンラインでかなりクールな解決策を見つけました。これにより、日付範囲の視覚化が非常に簡単になります。私のアプリでは、事前設定された日付範囲の選択が非常に便利です。

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

「範囲」機能については、下部に詳しく説明されています。これをテストする場合は、関連付けられたCSSファイルをリンクすることを忘れないでください。スクリプトが作成または中断されます。

幸運を。

于 2010-06-24T15:19:59.247 に答える
1 
$("#datepicker").datepicker({ showCurrentAtPos: new Date().getMonth(), numberOfMonths: 12, minDate: startDate, maxDate: endDate});
于 2010-06-22T20:55:42.217 に答える
1

オプションの前に更新を入れてみてもらえますか?

于 2010-06-22T19:51:29.733 に答える