jQuery UI Datepickerで、･当日と翌日を選択不可 ･「今日」の印を表示させる方法 をご教示いただけないでしょうか?

Question

ワードプレスにて､jQuery UI Datepickerを利用しています｡
お手数おかけしますが､以下実装方法をご教示いただけないでしょうか?
よろしくお願いいたします><

■やりたいこと
●本店
･当日と翌日を選択不可
しつつ､
･「今日」の印を表示させる方法

●支店
本店に設定した内容を反映させないようにしたい｡
※本店の設定変更に行った場合でも､現状を維持したい｡

■実際のソース
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(function($) {
//今日の日付
var today = new Date();
var today_y = today.getFullYear();
var today_m = today.getMonth() + 1;
var today_mm = ('0' + today_m).slice(-2);
var today_d = today.getDate();
var today_dd = ('0' + today_d).slice(-2);
var todays = today_y + "-" + today_mm + "-" + today_dd;

//明日の日付
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var tomorrow_y = tomorrow.getFullYear();
var tomorrow_m = tomorrow.getMonth() + 1;
var tomorrow_mm = ('0' + tomorrow_m).slice(-2);
var tomorrow_d = tomorrow.getDate();
var tomorrow_dd = ('0' + tomorrow_d).slice(-2);
var tomorrows = tomorrow_y + "-" + tomorrow_mm + "-" + tomorrow_dd;


//本店カレンダー
var target_days_honten = [//定休日指定
	//'2020-11-28',
];
//支店カレンダー
var target_days_sakuragi = [//定休日指定
	'2020-12-28',
];
//本店ページ用（本店）
$('#js-datepicker-honten').datepicker({
	minDate: 0,
	dateFormat: 'yy/mm/dd',
    beforeShowDay: function (day) {
		yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
		if ($.inArray(yymmdd, target_days_honten) == -1) {
			return [true, ""];
		}
		else {
			return [false, ""];
		}
    }
});

//支店ページ用（支店）
$('#js-datepicker-sakuragi').datepicker({
	minDate: 0,
	dateFormat: 'yy/mm/dd',
    beforeShowDay: function (day) {
		yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
		if ($.inArray(yymmdd, target_days_sakuragi) == -1) {
			return [true, ""];
		}
		else {
			return [false, ""];
		}
    }
});

//予約ページ用
$('#js-datepicker-main').datepicker({
	minDate: 0,
	dateFormat: 'yy/mm/dd',
    beforeShowDay: function (day) {
		var extraction_val = $(".shop-select").val();
		yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
		if (extraction_val == "本店") {
			if ($.inArray(yymmdd, target_days_honten) == -1) {
				return [true, ""];
			}
			else {
				return [false, ""];
			}
		}
		else if (extraction_val == "支店") {
			if ($.inArray(yymmdd, target_days_shiten) == -1) {
				return [true, ""];
			}
			else {
				return [false, ""];
			}
		}
    }
});

})(jQuery);

Comments

[退会済みユーザー]

コードは ``` と ``` で囲ってください（``` はバッククォート 3 つ）。インデントされて見やすくなるので。

jQuery と jQuery UI のバージョン、使用するブラウザを書いてください。

「本店」と「支店」とか書いてありますが、何がどう違うのでしょう？　「本店」のブラウザで見た時と「支店」のブラウザで見た時の違い？

[yambejp]

どこの何をどうしたいのか説明してください
htmlも無いと回答がブレるかもしれません

[komtan]

ご返信ありがとうございます｡

>jQuery と jQuery UI のバージョン、使用するブラウザを書いてください。

→jQuery と jQuery UI のバージョン
バージョンはわかりかねますので､調べます｡

●使用するブラウザ
クロム･サファリ･IE11以上となります｡

>「本店」と「支店」とか書いてありますが、何がどう違うのでしょう？　>「本店」のブラウザで見た時と「支店」のブラウザで見た時の違い？

→本店と支店の2店舗ありまして以下のように受け入れ可能な体制が異なるため､
予約カレンダー上で､制御したいと考えています｡
※ページもそれぞれ別ページとしています｡

本店　当日･翌日受け入れ可能
支店　当日･翌日受け入れ不可能

ご不明点などございましたらお声がけください｡
よろしくお願いいたします｡

Answer 1

たとえば

  target_days_honten=[...target_days_honten,todays,tomorrows];

IE対応が必要なら

  target_days_honten.push(todays);
  target_days_honten.push(tomorrows);

Comments

[komtan]

ご回答ありがとうございます!

Answer 2

本件解決いたしました｡
こちらの質問が言葉足らずで､お手数おかけして申し訳ございません｡

皆様からいただいたアドバイスをもとに､要件を再整理しながら､
明確にすべきキーワード等を整理し､以下のリファレンスを参照しながら解決することができました｡

http://alphasis.info/2011/06/jquery-ui-datepicker-mindate-maxdate/

ご回答頂いた皆様ありがとうございます｡

ソースに以下のように記述を記載することで､解決いたしました｡
※「今日」の印を表示させるのは､マストのものではない判断し､対象外としています｡

minDate: 0,
→
minDate: '2d',

■実際のソース
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(function($) {
//今日の日付
var today = new Date();
var today_y = today.getFullYear();
var today_m = today.getMonth() + 1;
var today_mm = ('0' + today_m).slice(-2);
var today_d = today.getDate();
var today_dd = ('0' + today_d).slice(-2);
var todays = today_y + "-" + today_mm + "-" + today_dd;

//明日の日付
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var tomorrow_y = tomorrow.getFullYear();
var tomorrow_m = tomorrow.getMonth() + 1;
var tomorrow_mm = ('0' + tomorrow_m).slice(-2);
var tomorrow_d = tomorrow.getDate();
var tomorrow_dd = ('0' + tomorrow_d).slice(-2);
var tomorrows = tomorrow_y + "-" + tomorrow_mm + "-" + tomorrow_dd;

//本店カレンダー
var target_days_honten = [//定休日指定
//'2020-11-28',
];
//支店カレンダー
var target_days_sakuragi = [//定休日指定
'2020-12-28',
];
//本店ページ用（本店）
$('#js-datepicker-honten').datepicker({
minDate: '2d',
dateFormat: 'yy/mm/dd',
beforeShowDay: function (day) {
yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
if ($.inArray(yymmdd, target_days_honten) == -1) {
return [true, ""];
}
else {
return [false, ""];
}
}
});

//支店ページ用（支店）
$('#js-datepicker-sakuragi').datepicker({
minDate: 0,
dateFormat: 'yy/mm/dd',
beforeShowDay: function (day) {
yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
if ($.inArray(yymmdd, target_days_sakuragi) == -1) {
return [true, ""];
}
else {
return [false, ""];
}
}
});

//予約ページ用
$('#js-datepicker-main').datepicker({
minDate: 0,
dateFormat: 'yy/mm/dd',
beforeShowDay: function (day) {
var extraction_val = $(".shop-select").val();
yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
if (extraction_val == "本店") {
if ($.inArray(yymmdd, target_days_honten) == -1) {
return [true, ""];
}
else {
return [false, ""];
}
}
else if (extraction_val == "支店") {
if ($.inArray(yymmdd, target_days_shiten) == -1) {
return [true, ""];
}
else {
return [false, ""];
}
}
}
});

})(jQuery);