実現したいこと

予約フォームにカレンダー表示させるDatepickerについてご教授ください。
下記を参考に基本的なカレンダー表示は出来ました。
https://blog.knis.jp/datepicker/#sample03

条件
→土日祝および水曜日は選択させない
→過去日は選択させない

※一つのフォームに複数設置するため、#datepickerを.dateに変更しています。
https://codepen.io/MayMayMayMay/pen/WbvKeNq

発生している問題・分からないこと

カレンダーの選択可能日を3週間先にしたいのですが、下記を見ても分かりませんでした。
https://blog.knis.jp/datepicker/#sample06

上記に加えて、PC版とモバイル版のカレンダー表示数を変えたいのですが、どこに加筆すれば良いのか分かりません。
（3週間先ということで、月の中旬以降にアクセスした際に次月も見えた方が良いため）
https://www.site-convert.com/archives/2190#outline__4

どうぞよろしくお願いいたします。

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

希望するすべての条件を満たす結果を得られませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

ざっくりこんな感じ

html
1<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
3<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
4<script>
5$(function(){
6  var dateFormat='yy/mm/dd';
7  // 祝日はリストを作って対応する
8  var disableDates = [
9    "2025/07/21",
10    "2025/08/11",
11    ];
12  $('.calendar').datepicker({
13  minDate: '+0d',
14  dateFormat:dateFormat,
15  beforeShowDay:function(date) {
16    var disableDate = $.datepicker.formatDate(dateFormat, date);
17    if($.inArray(disableDate,disableDates)>-1) return [false,'mydisabled',''];
18    if(date.getDay()==0) return [false,'sunday',''];
19    if(date.getDay()==3) return [false,'wednesday',''];
20    if(date.getDay()==6) return [false,'saturday',''];
21    return [true,'',''];
22  }
23  });
24});
25</script>
26<input class="calendar">
27<input class="calendar">

以下、何をしたいかわかりません。

カレンダーの選択可能日を3週間先にしたいのですが、下記を見ても分かりませんでした。

過去を選ばせたくないのか、3週間後から選ばせたいのか条件がわかりません。
3週間後から選ばせたいならminDateを'+21d'(or 20d？)とかにすればよいです

上記に加えて、PC版とモバイル版のカレンダー表示数を変えたいのですが、どこに加筆すれば良いのか分かりません。

なにをどうしたいのでしょうか？

（3週間先ということで、月の中旬以降にアクセスした際に次月も見えた方が良いため）

minDateを設定すると選択できる最初の月が表示されるはずです

注記

jqueryは古い仕組みのためあえてconstやletではなくvarで変数宣言しています

調整版

html
1<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
3<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
4<script>
5$(function(){
6  var dateFormat='yy/mm/dd';
7  // 祝日はリストを作って対応する
8  var disableDates = [
9    "2025/07/21",
10    "2025/08/11",
11    ];
12  var is_mobile=window.matchMedia('(max-width: 767px)').matches;
13  var numberOfMonths=is_mobile?1:2;
14  $('.calendar').datepicker({
15  minDate: '+21d',
16  dateFormat:dateFormat,
17  numberOfMonths:numberOfMonths,
18  beforeShowDay:function(date) {
19    var disableDate = $.datepicker.formatDate(dateFormat, date);
20    if($.inArray(disableDate,disableDates)>-1) return [false,'mydisabled',''];
21    if(date.getDay()==0) return [false,'sunday',''];
22    if(date.getDay()==3) return [false,'wednesday',''];
23    if(date.getDay()==6) return [false,'saturday',''];
24    return [true,'',''];
25  }
26  });
27});
28</script>
29<input class="calendar">
30<input class="calendar">

投稿2025/06/16 02:57

編集2025/06/17 01:06

yambejp

総合スコア117995

MayMay

2025/06/16 23:24

早々にご回答頂いたにも関わらず、お返事が遅くなり申し訳ありませんでした。昨日のcodepenは余計な行があったので修正しました。 https://codepen.io/MayMayMayMay/pen/WbvKeNq 上記で出来ている条件は質問で書いた通り、下記です。 →土日祝および水曜日は選択させない →過去日は選択させない加えての条件は、PCからは二月分表示、スマホでは一月表示が出来た方が、ユーザーにとって便利かなと思った次第で、これを追加したいのです。参考先　https://www.site-convert.com/archives/2190#outline__4 ＞過去を選ばせたくないのか、3週間後から選ばせたいのか条件がわかりません。出来れば両方、併用が無理なら3週間後から選ばせたいです。祝日はCDNで以下を読み込ませています。 <script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script> すみませんが、改めてよろしくお願いいたします。