ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery UI Datepicker から週末と祝日を除外する方法は?

jQuery UI Datepicker から週末と祝日を除外する方法は?

DDD
リリース: 2024-11-17 00:28:03
オリジナル
322 人が閲覧しました

How to Exclude Weekends and Holidays from jQuery UI Datepicker?

jQuery UI Datepicker から土曜日、日曜日、祝日を除く

jQuery UI Datepicker は、日付を選択するための強力なツールを提供します。機能を強化するには、週末や休日などの特定の日付を無効にすることができます。幸いなことに、これは強力な beforeShowDay オプションを使用することで可能になります。

beforeShowDay オプションは、日付を入力として受け取り、配列を返す関数を受け取ります。返される配列には 2 つの値が含まれます:

  1. 日付が選択可能 (true) か否か (false) を示すブール値。
  2. に適用するオプションの CSS クラス名。日付、またはデフォルトのスタイルの場合は空の文字列。

の選択を防止する週末

土曜日と日曜日の選択を防ぐには、jQuery UI の組み込み noWeekends 関数を利用できます。この関数は、週末の日付に対して false を返します。

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends });
ログイン後にコピー

を除く休日

日付ピッカーから特定の休日を除外するカスタム関数を定義できます。たとえば、次のコードは、natDays 配列で定義された祝日の選択を無効にします。

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, ''];
}
ログイン後にコピー

週末と休日の除外の組み合わせ

週末と休日の両方を無効にするには、 noWeekends 関数とnationalDays 関数を組み合わせることができます。次の例では、週末の日付または休日の日付に対して false を返すカスタム noWeekendsOrHolidays 関数を作成します。

function noWeekendsOrHolidays(date) {
  var noWeekend = $.datepicker.noWeekends(date);
  if (noWeekend[0]) {
    return nationalDays(date);
  } else {
    return noWeekend;
  }
}
ログイン後にコピー

これらのカスタム関数で beforeShowDay オプションを使用すると、土曜日、日曜日、および特定の休日を効果的に無効にできます。 jQuery UI Datepicker を使用すると、よりカスタマイズされた限定的な日付選択エクスペリエンスを作成できます。

以上がjQuery UI Datepicker から週末と祝日を除外する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート