wordpress
WordPress日付予約を簡易にするphp+java
最終更新日: 2025年1月21日
管理しているポータルサイトで
”見学予約を1タップ・クリックで日付指定できるものを”
との依頼から、直近2週間分のカレンダーとその日付をクリックしてinput dateに日付が入るものを作った。
Wordpressとしたが、phpが動くページならWPタグは関係ない（value=”<?php echo get_the_title(); ?>資料” id=”lab<?php echo get_the_id(); ?>” ここらは代替えでなんか入れる、入れなくても動く）ので普通に使える。
高齢者にはinput dateで出現するカレンダーの扱いが・・・ってことだが、まぁUI簡易に越したことはない。
<script>document.addEventListener('DOMContentLoaded', function() { const dateElements = document.querySelectorAll(".daycheck"); // 日付要素を取得 const triggerCheckbox = document.getElementById("Trigger<?php echo get_the_id(); ?>"); // チェックボックスを取得 if (triggerCheckbox) { // チェックボックスが存在する場合のみ処理 dateElements.forEach(function(dateElement) { dateElement.addEventListener("click", function(event) { event.preventDefault(); // デフォルト動作を無効化 if (!triggerCheckbox.checked) { // チェックが入っていない場合のみチェック triggerCheckbox.checked = true; } const selectedDate = dateElement.dataset.date; const dateInput = document.getElementById("selectedDateInput"); if (dateInput) { dateInput.value = selectedDate; } console.log(`選択された日付: ${selectedDate}`); //チェックボックスにチェックが入った後の処理を追加する場合、ここに記述 //例：フォームを自動送信する場合など //document.getElementById("myForm").submit(); }); }); } else { console.error("IDがTrigger<?php echo get_the_id(); ?>のチェックボックスが見つかりません。"); }});</script><ul class="daysSq"> <?php $week = array("日", "月", "火", "水", "木", "金", "土"); $daysToShow = 14; // 表示する日数（今日を含めて14日分） for ($i = 0; $i < $daysToShow; $i++) { $timestamp = strtotime("+$i day"); $dayOfWeek = $week[date('w', $timestamp)]; $dateFormatted = date("Y-m-d", $timestamp); $dayOfMonth = date("j", $timestamp); $dayClass = date("D", $timestamp); // 今日（$i == 0）の場合のクラスを追加 $todayClass = ($i == 0) ? ' today' : ''; echo '<li class="' . $dayClass . $todayClass . '">'; echo '<a href="#" data-date="' . $dateFormatted . '" class="daycheck">'; echo '<span>' . $dayOfWeek . '</span>'; echo $dayOfMonth; echo '</a>'; echo '</li>'; } ?></ul><p>他の日時をご希望の際は下の欄の「見学予約」にチェックを入れ日時指定をしてください。</p><div class="requestWrap" style="max-width:640px;min-width:calc(320px - 3%);"><div style="width:100%"><p><?php echo get_the_title(); ?>の資料請求/見学予約 ※選んで下さい</p><input type="hidden" value="<?php echo get_the_title(); ?>" name="施設名"><label><input type="checkbox" class="checks mfp_checked" value="<?php echo get_the_title(); ?>資料" id="lab<?php echo get_the_id(); ?>" name="施設資料請求" checked="checked">資料請求</label><input id="Trigger<?php echo get_the_id(); ?>" class="tourTrigger" type="checkbox" name="Trigger1"<?php if(isset($_GET['ymd'])) { $ymd = $_GET['ymd']; echo " checked='checked'"; }else{} ?> data-post-disable="1"><label for="Trigger<?php echo get_the_id(); ?>">見学予約</label> <div class="tourWrap"><div><p>第一希望日時</p><input name="<?php echo get_the_title(); ?>見学予約第一希望日時" type="hidden" data-join="<?php echo get_the_title(); ?>お申込み日第一希望+-+<?php echo get_the_title(); ?>お申込み日第一希望の時間+\n" /><input type="date" class="dateBox" id="selectedDateInput" name="<?php echo get_the_title(); ?>お申込み日第一希望" data-value="" data-post-disable="1"><div class="selectWrap" style="width:35%;margin-left:5%;border:none"><select id="select<?php echo get_the_id(); ?>a" class="hourBox" name="<?php echo get_the_title(); ?>お申込み日第一希望の時間" data-post-disable="1"><option class="opt-fst" selected="selected" value="">時刻選択</option><option value=" 午前">午前</option><option value=" 午後">午後</option><option value=" 9:00">9:00</option><option value=" 9:30">9:30</option><option value=" 10:00">10:00</option><option value=" 10:30">10:30</option><option value=" 11:00">11:00</option><option value=" 11:30">11:30</option><option value=" 12:00">12:00</option><option value=" 12:30">12:30</option><option value=" 13:00">13:00</option><option value=" 13:30">13:30</option><option value=" 14:00">14:00</option><option value=" 14:30">14:30</option><option value=" 15:00">15:00</option><option value=" 15:30">15:30</option><option value=" 16:00">16:00</option><option value=" 16:30">16:30</option></select></div></div><div><p>第二希望日時</p><input name="<?php echo get_the_title(); ?>見学予約第二希望日時" type="hidden" data-join="<?php echo get_the_title(); ?>お申込み日第二希望+-+<?php echo get_the_title(); ?>お申込み日第二希望の時間+\n" /><input type="date" class="dateBox" name="<?php echo get_the_title(); ?>お申込み日第二希望" style="text-align:left;" data-post-disable="1"><div class="selectWrap" style="width:35%;margin-left:5%;border:none"><select id="select<?php echo get_the_id(); ?>b" class="hourBox" name="<?php echo get_the_title(); ?>お申込み日第二希望の時間" data-post-disable="1"><option class="opt-fst" selected="selected" value="">時刻選択</option><option value=" 午前">午前</option><option value=" 午後">午後</option><option value=" 9:00">9:00</option><option value=" 9:30">9:30</option><option value=" 10:00">10:00</option><option value=" 10:30">10:30</option><option value=" 11:00">11:00</option><option value=" 11:30">11:30</option><option value=" 12:00">12:00</option><option value=" 12:30">12:30</option><option value=" 13:00">13:00</option><option value=" 13:30">13:30</option><option value=" 14:00">14:00</option><option value=" 14:30">14:30</option><option value=" 15:00">15:00</option><option value=" 15:30">15:30</option><option value=" 16:00">16:00</option><option value=" 16:30">16:30</option></select></div></div></div></div></div>
phpで今日+向こう2週間の日付けと曜日を取得しクリックでjavaによりinputに入力。
もともとは資料請求だから、資料請求にはデフォルトでチェックが入っているが、消し込んでも問題はない。
作ったのはだいぶ前だが、最近ちょっとコードを変えたのでその備忘。
結果はこう。
