javascript - jquery ui date-pickerで、特定の平日の選択を許可し、他の平日を無効にする方法

Question

jquery ui 日付ピッカーを制限して、将来の火曜日と木曜日のみを選択可能な日にする必要があります。

どうすればこれを達成できますか?

Answer 1

それはすべてドキュメントにあります。関数 beforeShowDay は、あなたが望むことを行います。

http://api.jqueryui.com/datepicker/#option-beforeShowDay

私の使用は別の日でしたが、最終的に beforeShowDay が limitdays 関数を呼び出すことになりました

function limitDays(date){

var day = date.getDay();

  // Only make Mon, Tues, and Thurs selectable
  if(day == 1 || day == 2 || day == 4){
    return [true, ''];
  }else{
    return [false, ''];
  }
}

Answer 2

onSelect ハンドラーを datepicker に提供し、日付が定義された基準に適合することをハンドラーに検証させます。onSelect がどこで発生するかわからないため、イベントを停止してユーザーに警告できない場合は、選択を「元に戻す」ことができます。

これを行う 1 つの方法は、パラメーターを受け取るカスタム日付バリデーター クラスを開発し、onSelect 関数からその日付バリデーターを呼び出すことです。onSelect 関数は、日付ピッカー自体との対話を処理して、デザインをクリーンに保つことができます。

http://docs.jquery.com/UI/Datepicker/datepicker#optionsから

$("div.selector").datepicker({ 
  onSelect: function(dateText) { 
    alert(dateText);
  } 
})

特定の日付または一連の曜日の表示と選択可能性を変更するには、beforeShowDay ハンドラーを使用して、問題の日付の選択可能性と CSS を変更します。

$(".selector").datepicker({ beforeShowDay: nationalDays})   

natDays = [
  [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
  [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
  [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
  [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1
          && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}