質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

4580閲覧

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

komtan

総合スコア3

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/08/16 00:27

ワードプレスにて、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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/08/16 01:22 編集

コードは ``` と ``` で囲ってください(``` はバッククォート 3 つ)。インデントされて見やすくなるので。 jQuery と jQuery UI のバージョン、使用するブラウザを書いてください。 「本店」と「支店」とか書いてありますが、何がどう違うのでしょう? 「本店」のブラウザで見た時と「支店」のブラウザで見た時の違い?
yambejp

2021/08/16 01:30

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

2021/08/16 01:44

ご返信ありがとうございます。 >jQuery と jQuery UI のバージョン、使用するブラウザを書いてください。 →jQuery と jQuery UI のバージョン バージョンはわかりかねますので、調べます。 ●使用するブラウザ クロム・サファリ・IE11以上となります。 >「本店」と「支店」とか書いてありますが、何がどう違うのでしょう? >「本店」のブラウザで見た時と「支店」のブラウザで見た時の違い? →本店と支店の2店舗ありまして以下のように受け入れ可能な体制が異なるため、 予約カレンダー上で、制御したいと考えています。 ※ページもそれぞれ別ページとしています。 本店 当日・翌日受け入れ可能 支店 当日・翌日受け入れ不可能 ご不明点などございましたらお声がけください。 よろしくお願いいたします。
guest

回答2

0

ベストアンサー

たとえば

javascript

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

IE対応が必要なら

javascript

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

投稿2021/08/16 01:39

編集2021/08/16 02:10
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

komtan

2021/08/16 03:49

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

0

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

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

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);

投稿2021/08/16 03:54

komtan

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問