jQuery ui Datepicker 明日以降のみ選択 出力形式に曜日 土日祝だと1を返す

予約カレンダーフォームにて、jQuery ui Datepickerで日付選択できるようにしています。
カレンダーは祝日をだしたりなどはネット検索して出るようになったのですが、
下記３点ができません。

＜やりたいこと＞
１：明日以降~６か月先まで選択可能
２：選択した日付の出力形式に曜日を出す。　2020/11/20（木）
３：選択した曜日が土日祝なら$weekend='1';などを返し、その後のラジオボタンで平日の表示と休日の表示を分ける参照値にしたい。

$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", "showOn", 'both');
$("#datepicker").datepicker("option", "buttonImageOnly", true);
$("#datepicker").datepicker("option", "buttonImage", 'image/reserve/cal_icon.png');
$("#datepicker").datepicker().holiday();
$("#datepicker").datepicker({
minDate: '+1d',
maxDate: '+6m',
dateFormat: 'yy/mm/dd(DD)'
});
});

１に関しては、ネット上でたくさんの方が書いておられ、どれもおなじような書き方なので、間違っていないように思うのですが、なぜかでません。

ご教授よろしくお願いします。

質問者からの補足コメント

• １
  
  何度もありがとうございます！
  文字数制限で送信できず、端折って書いてしまい、大変失礼いたしました。
  
  No.4で送ってくださった内容に変更すると、
  IE・クローム・ファイアフォックス・edge、すべてでカレンダーから祝日を選択した時のみ（祝日だよ）が表示されるようになりました！！
  
  
  
  <input name="date" type="text" id="datepicker" readonly />
  <span id="holiday" style="color:red; display:none;">(祝日だよ)</span>
  
  <?php
  $date=2020/11/23;　//出力した日付
  $weekend="祝日だよ";　//土日祝の場合のみ値をセット

  No.4の回答に寄せられた補足コメントです。 補足日時：2020/11/20 10:08

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/11/16 13:50

こんにちは

datepickerは使ったことがありませんが、ドキュメントはjQuery uiのサイトにあります。
https://api.jqueryui.com/datepicker/#method-option

これを見る限りholidayなるメソッドの記載はないので、通常のuiだけではエラーになってスクリプトは止まります。
想像するところ、そのために選択日の指定やフォーマット指定が実行されていないものと思います。
（何か別の組込みをdatepickerに行っていれば別ですが…）


ご提示のオプションのうち有効なものを残すとして、まとめて指定できるので、
$('#datepicker').datepicker({
showOn: 'both',
buttonImageOnly: true,
buttonImage: 'A.ping',
minDate: '+1d',
maxDate: '+6m',
dateFormat: 'yy/mm/dd(DD)'
});
でいけると思います。（テスト確認済です。）

なお、表示を日本語化したいのであれば、すでに日本語化したものがCDNにあるようです。
https://ajax.googleapis.com/ajax/libs/jqueryui/1 …

＞３：選択した曜日が土日祝なら～～
これに関しては、祝日の判定を別途行わないといけないのではないでしょうか？
（国によって祝日指定は違うので、組み込まれてはいないはず）

＞カレンダーは祝日をだしたりなどはネット検索して出るようになったのですが～
・・・であるなら、その関数を利用して祝日判定をするのが宜しいと思います。
（わざわざ別に作成しても無駄なだけなので）

この回答へのお礼

ありがとうございます！！

日本語化はできており、下記で無事曜日も日付制限もできました！

$("#datepicker").datepicker({
showOn:'both',
buttonImageOnly: true,
buttonImage: 'image/reserve/cal_icon.png',
minDate: '+1d',
maxDate: '+6m',
dateFormat: 'yy/mm/dd(D)'
});
$("#datepicker").datepicker().holiday();


http://www.dolphy.gr.jp/lab/holiday/index.html
祝日は上記を参考に、日本の祝祭日のツールチップを表示させる jquery プラグインを追加し、祝日に色をつけることはできています。

上記サイト内の下記の内容を拝見すると、
土日祝を選んだ際は、$weekendに'1'をセットする。
と書けそうな気がするのですが、どのように書けばよいのかわかりません。

土日だけなら、フォームに出力された文字の中に土や日があれば、という条件式で値を渡すことはできそうなのですが、祝日は出力されてしまうと、

2020/11/23(月)というように、（祝）とはならないので、カレンダー内で値をセットできないかと考えております。

$("input.withHoliday").datepicker({
changeMonth: true,
changeYear: true
})
.holiday({
'css':[ //日のCSSクラス名の指定
{'day':0, 'class':"day-sunday"}, //日曜日
{'day':6, 'class':"day-saturday"}, //土曜日
{'day':'holiday', 'class':"day-holiday"}, //祝祭日
{'day':'anniversary', 'class':'day-anniversary'} //記念日
],
});

お礼日時：2020/11/16 16:36

No.6 回答者： fujillin 回答日時： 2020/11/20 15:23

No5です。

現在スマホからなので、テストも確認もできないのですが・・・

＞土日祝の場合は
＞<input type="hidden" name="weekend" value=”1” />
＞のようにして、reserve2.phpにデータを渡すことができるでしょうか？

input要素のvalue値を設定したいということでしたら、可能です。
画面に表示する代わりに値を設定するだけです。
全体のHTML構成が不明なので、適切なセレクタがわかりませんが、
let d = $('#datepicker').datepicker('getDate');
d = !$.fn.holiday('name', d) && (d.getDay() % 6);
$("input[name='weekend']").val(d?0:1);

のような感じで可能と思います。
（テストしていませんので、タイポ等ありましたらご容赦）

しかしながら、No4にも書きましたように、これってサーバ側でないと処理できないような内容なのでしょうか？
ユーザが日にちを選び直したらどうなるのかなど、要らぬ疑問がわいてきますけれど？
（一度選択したら、前のページに戻ってやり直さない限り、変えられないという仕様なのかな？）

実際に何をしたいのかさっぱりわかりませんが、
＞予約枠を平日だと最大９、土日祝だと最大１０と分けたい。
程度のことであるのなら、このような面倒なやり取りをしなくても、そのままスクリプトで処理してしまう方が遥かに簡単だし、ユーザビリティも良くなると思いますけれど・・・？

まぁ、やり方は人様々なので自由ですけれど。

この回答へのお礼

外出先でまで、ありがとうございます!!!

＜DB＞zan_table
zan_date　2020/11/23　2020/11/24　2020/11/25
zan　50　40　50

phpで予約フォームを作成しており、やりたいことは

　①　日付選択<input name="date" type="text" id="datepicker" readonly />
　②　「①で選択した日付」==zan_date　を条件にDBから残数を出力
　③　「①で選択した日付」が平日なら最大9、土日祝なら最大20のselect。
<input type="submit" value="確認へ" />

上記を１つのファイル内ですることが私の知識ではできず、No.5のお礼へ記載したように２つのファイルにわける形をとっています。
「１つ目のファイルで日付を指定。→２つ目のファイルで、日付は表示のみで、日付を変更したい場合は前頁に戻る。」

送ってくださった内容で、無事、$weekendにセットすることができました!!!

祝日だけセットされると思い、
dow === 0 || dow === 6をどうにか足して土日も出そうといろいろ調べてたのですが、もう土日祝まとめて書いてくださっていたのですね！！

無事、やりかたかった分岐をすることができました。本当にありがとうございました。

お礼日時：2020/11/21 14:56

No.5 回答者： fujillin 回答日時： 2020/11/20 11:55

No4です。

あぁ…、PHPの変数のことを言っていたのですね。
回答者には、質問文にある情報が全てなので、PHPのPの字もなかったので思いもよりませんでした。
（そもそもがjavascriptのカテですし・・）

全体の構成がどうなっているのか不明ですが、実行の順序をちゃんと理解なさっていますか？
PHPの処理はサーバ側で、javascriptはクライアント側で実行されます。
①PHP1を実行（PHP1の処理は終了）
　（HTMLを出力）
　　　↓
②ブラウザでユーザが操作
　操作結果を送信
　　　↓
③PHP2で結果を受信

という順序であれば普通の処理なのでまったく問題はありませんが、②の結果を①に戻すような事を考えていませんか？
もしそうであるなら、まず先に、タイムマシンを開発してからということになります。

上記の順序通りでよいのなら、ブラウザからformをsubmitするなどでデータを送信することは可能です。
PHP2はPHP1と兼用することもできますが、内容的にそのような処理に対応できるように作成されていることが必要になります。

とは言え、（実際になさりたいことがよくわかっていませんけれど）入力時の条件設定をするだけのように思われますので、わざわざサーバに送信して処理するようなものでもないように感じられます。

もしも、サーバ側でないと処理できない（バックデータが必要など）場合には、ブラウザの遷移なくサーバに送信する方法もありますけれど、ご質問の状況から察するところ、そのような方法を試みるにしても混乱なさるだけのようにも懸念します。

この回答へのお礼

phpかJavascriptのどちらのカテゴリーに投稿すべきか悩んだのですが、
<head>内の<script>の記述がわからなかったので、javascriptなのかと思い、こちらのカテゴリーを選択しました。
申し訳ございません。

実行順序がよく理解できておりませんでした。

reserve.phpファイル
<form action="reserve2.php" method="post">
<input name="date" type="text" id="datepicker" readonly />
<span id="holiday" style="color:red; display:none;">(祝日だよ)</span>
<input type="submit" value="日付を指定" />
</form>

reserve2.phpファイル
<form action="reserve_check.php" method="post">
・日付：<?php echo $date; ?>
・日付を条件にDBから残数を出力
・日付が平日だったら最大9、土日祝だったら最大20のselectを作る。
<input type="submit" value="確認へ" />
</form>

上記のように日付とその他の項目はページを分けて作成しているのですが、.change(function()を使うと、クリックすると同時に「祝日だよ」と出たので、
下記のように１つにまとめるのが可能なのではないかと欲張ってしまいました。

<form action="reserve_check.php" method="post">
・日付選択
・選択した日付を条件にDBから残数を出力
・選択した日付が平日なら最大9、土日祝なら最大20のselect。
<input type="submit" value="確認へ" />
</form>

現在、reserve.phpからreserve2.phpへ日付は渡す事ができているので、

土日祝の場合は
<input type="hidden" name="weekend" value=”1” />
のようにして、reserve2.phpにデータを渡すことができるでしょうか？

お礼日時：2020/11/20 13:01

No.4 回答者： fujillin 回答日時： 2020/11/18 10:43

No3です。

＞クローム、ファイアフォックスは、edgeと同様でした。
aler表示はされるということですよね？

holidays.jsは$(function()～で単独実行するようになっているため、本体の$(function()～とダブってバインドされることになっており、その場合の実行順序は記述順とは限りません。
それもあって、No2のサンプルでは省いています。
ユーザーのイベント時には、実行されていることが保証されているので、イベント内での使用は問題なくできるものとの判断できます。

＞・選択した日付を$dateにセット
＞・選択した日付が土日祝の場合$weekendに'1'をセット
＞として、２項目以降の分岐条件（select　のWHERE zan_date=?で参照したい）
残念ながら、私には文章の意味がまったく理解できませんでした。

IEで動かないのは前述の通りですが、少し旧いブラウザでも動くようにと、alertの代わりに画面に表示する方法に変えてみました。
（fx81,Chrome86,IE11,Edge86にて動作確認済み）
祝日を判別したいとのご質問なので、上記の理由からholidayの処理は省いています。
あくまでも、holiday,jsを利用して祝日の判別を行うサンプルです。
(判定方法はNo2のまま同じ方法です)

◆script
$(function(){
$('#datepicker').datepicker({
showOn: 'both',
buttonImageOnly: true,
buttonImage: 'A.png',
minDate: '+1d',
maxDate: '+6m',
dateFormat: 'yy/mm/dd(DD)'
});

$('#datepicker').on('change',function(){
let d = $('#datepicker').datepicker('getDate');
let dsp = $.fn.holiday("name", d)?'':'none';
$('#holiday').css('display', dsp);
});
});

◆HTML
<input id="datepicker" type="text" value="" />
<span id="holiday" style="color:red; display:none;">(祝日だよ)</span>

※ 事前にjQeryやholidays,jsを読み込んでおくことは同じです。
※ holidayでは祝日判定しか行っていいませんので、土日なども加えたい場合は、普通の曜日判定を追加する必要があります。
※ カレンダー表示に祝日表示を追加なさりたい場合は、上述のスクリプトの実行順序を確実に制御できるように修正しておくことが望ましいと思います。

この回答へのお礼

何度もありがとうございます！
文字数制限で送信できず、端折って書いてしまい、大変失礼いたしました。

No.4で送ってくださった内容に変更すると、
IE・クローム・ファイアフォックス・edge、すべてでカレンダーから祝日を選択した時のみ（祝日だよ）が表示されるようになりました！！



<input name="date" type="text" id="datepicker" readonly />
<span id="holiday" style="color:red; display:none;">(祝日だよ)</span>

<?php
$date=2020/11/23;　//出力した日付
$weekend="祝日だよ";　//土日祝の場合のみ値をセット

require_once ('config.php');
$sql='SELECT zan FROM zan_table WHERE zan_date=?';
$stmt=$dbh->prepare($sql);
$data[]=$date;
$stmt->execute($data);
$rec=$stmt->fetch(PDO::FETCH_ASSOC);
$zan=$rec['zan'];
?>


この日の残数は<?php echo $zan; ?>

<select name="ad">
<?php
if(isset($weekend)){
$yoyakunum=20;
}else{
$yoyakunum=9;
}
for($i=0;$i<=$yoyakunum;$i++){
print '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>


日付を選択すると、その選択した日付の値を$dateにいれる。
選択した日付が土日祝だと$weekendに値を入れる。
それを元に残数を出し、予約枠を平日だと最大９、土日祝だと最大１０と分けたい。

日付を選択すると「d」に日付が入っているのかと思い、なんとかその日付の値を$dateに入れられないかとチャレンジしたのですができません。

何度も申し訳ないです。よろしくお願いします。

お礼日時：2020/11/20 10:11

No.3 回答者： fujillin 回答日時： 2020/11/17 23:34

No2です。

今、環境がないため試してみることができないので、机上での追加情報になってしまいますが・・・

＞としましたが、edgeだとカレンダーに祝日が表記されなくなり、
祝日表示は既に解決済みだと思いましたので、No2では省略してあります。

＞IEだとカレンダー自体でなくなりました。
edgeはわかりませんが、IEはアロー関数に対応できていなかったと記憶していますので、そのせいであろうと推測します。

「()=>」の記述部分を修正すれば動作するのではと思いますが、ひとまず、普通の他のブラウザではいかがでしょうか？
当方、Chromeで確認しています。
もしも動作しない場合は、とりあえずラッパーのdiv要素をform要素に変えるか、ラッパーを用いずに、直接対象のinput要素のchangeイベントで処理するようにしても行けるのではと思います。

この回答へのお礼

ありがとうございます！

クローム、ファイアフォックスは、edgeと同様でした。

同一フォーム内で、選択した日付を$dateに入れることができるでしょうか？

本当は同一フォーム内の1項目目で日付を選択し、
・選択した日付を$dateにセット
・選択した日付が土日祝の場合$weekendに'1'をセット

として、２項目以降の分岐条件（select　のWHERE zan_date=?で参照したい）
ネットで調べて下記のような感じにしたらできるかと思ったのですが、うまく書けず、

$(function() {
$('#date_select input[type="text"]').change(function() {
var val = $(this).val();
$date.text(val);
});
});
<table>
・
・
<td id="date_select"><input name="date" type="text" id="datepicker" readonly /></td>
・
・
</table>



今はbody内の前後は下記のように書いており、日付選択したらreserve_2にsubmitするようにしています。

<form action="reserve_2.php" method="post">
<table>
<tr>
<th scope="row">日付<span>※</span></th>
<td><div id="wrap">
<input id="datepicker" type="text" value="" />
</div></td>
</tr>
</table>
<div id="button1">
<input class="button" type="submit" value="日付を指定して空き状況確認" />
</div>
</form>

よろしくお願い致します。

お礼日時：2020/11/18 09:04

No.2 回答者： fujillin 回答日時： 2020/11/16 18:16

No1です。

お礼の欄でご提示のサイトのholiday.jsを使っているのなら、$.fn.holidayで関数を利用できるような拡張をしているみたいなので、そのまま利用させてもらうのが良いのではないでしょうか？

テストしてみましたが、こんな感じで判別はできそうに思います。
（入力すると、祝日の場合はalert表示します。）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5 …
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1 …
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1 …
<script src="js/jquery.holiday.js"></script>

<script>
$(()=>{
$('#datepicker').datepicker({
showOn: 'both',
buttonImageOnly: true,
buttonImage: 'A.png',
minDate: '+1d',
maxDate: '+6m',
dateFormat: 'yy/mm/dd(DD)'
});

$('#wrap').on('change',()=>{
let d = $('#datepicker').datepicker('getDate');
if($.fn.holiday("name", d)){alert('祝日です！');}
});
});
</script>

</head>
<body>
<div id="wrap">
<input id="datepicker" type="text" value="" />
</div>
</body>
</html>

※ ソース中のjsやCSSのアドレスは質問者様の環境とは異なると思いますので、ご注意。
※ 試しに、入力表示の後ろに「(祝)」を付け加えるようにしても、一応、動作はするみたいですが、datepickerの中身をわかっていないので、それで問題ないかどうかの判断がつきません。
（実際の値は別に保有しているような気がしますので、多分、問題ないのではとは思いますが、確証がないのでalertまでにしておきました）

この回答へのお礼

ありがとうございます！

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/ …
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/ …
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/ … >
<link rel="stylesheet" href="js/jquery.holiday.css">
<script src="js/jquery.holiday.js"></script>

<script>
書いていただいたまま
</script>

body内-------
<div id="wrap">
<input id="datepicker" type="text" value="" />
</div>


としましたが、edgeだとカレンダーに祝日が表記されなくなり、

$("#datepicker3").datepicker().holiday();　←をここに追加
$('#wrap').on('change',()=>{

してみると、カレンダーに祝日色がつくようにはなりましたが、アラートはでません。IEだとカレンダー自体でなくなりました。

ヘッドの上部の部分が違うのかとも思いましたが、書いていただいた文をコピーできず、元々書いているものになります。

のちに土日祝ならば、予約枠10　else予約枠20と条件式をつけたいので、土日祝ならば1など、値をセットできたらと思うのですが、

https://memorandums.3ki3ki.com/datepicker/

を拝見すると土日祝の識別はできるので、土日祝を選択すると日付出力とともに1をセットするなどはできるでしょうか？

何度も申し訳ないですが、ご教授いただけるとありがたいです。
よろしくお願いいたします。

お礼日時：2020/11/17 22:01