[解決済み] jQuery UI Datepickerで土日(祝日も)を無効にすることはできますか?
2022-04-21 03:15:15
質問内容
予約日を選択するためにdatepickerを使用しています。 日付の範囲は翌月だけに設定済みです。 これは問題なく動作します。 土曜日と日曜日を選択肢から除外したいのですが、可能でしょうか? これは可能でしょうか? もし可能なら、どのようにすればよいですか?
解決方法を教えてください。
そこには
beforeShowDay
このオプションは、日付ごとに呼び出される関数を受け取り、その日付が許可されている場合はtrueを、許可されていない場合はfalseを返します。 docsから。
ビフォアショーデー
この関数は、パラメータとして日付を受け取り、この日付が選択可能かどうかを示す [0] が true/false に等しい配列を返す必要があります。 1 は、CSS クラス名 (複数可) またはデフォルトの表示では '' に相当します。このメソッドは、日付ピッカーが表示される前に、各日付ごとに呼び出されます。
datepickerに祝祭日を表示します。
$(".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, ''];
}
noWeekendsという、週末の曜日を選択できないようにする組み込み関数が1つ存在する。
$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
この2つを組み合わせるには、次のような方法があります(仮に
nationalDays
関数を使用します)。
$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
更新情報 : なお、jQuery UI 1.8.19以降では beforeShowDayオプション は、オプションで第3のパレメータであるポップアップツールチップを受け付けます。
関連
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
JavaScriptの配列共通メソッド解説
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み】文字列表現を使わずにタイムゾーンを設定した日付を作成する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vueのグローバルがscss(mixin)を導入。
-
vueディレクティブv-bindの使用と注意点
-
Vueのクラススタイルの使い方の詳細
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
jq は html ページとデータを動的に分割する。