app/Plugin/PiaReservation/Resource/template/default/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  5. <link rel="stylesheet" href="/common/css/jquery-ui.css">
  6. <script src="/common/js/jquery-ui-1.13.0.js"></script>
  7. <script src="/common/js/jquery.ui.datepicker-ja.min.js"></script>
  9. <script>
  10. var dateFormat = 'yy/mm/dd';
  12. // 選択不可日付を登録（※最終行に「,」を入れない）
  13. // 0を頭に付けて2桁にしてください。例．2020/01/03
  14. var disableDates = [
  15.   {{ holiday|raw }}
  16. ];
  18. // 六曜データをJavaScriptに渡す
  19. var htRoku = {{ htRoku|json_encode|raw }};
  21. $(function() {
  22.   // 日付フィールドの直接入力を禁止
  23.   $("#pia_reservation_hope_date01").keypress(function(e) {
  24.     $(this).val("");
  25.     alert("直接入力ではなくカレンダーから選択してください。");
  26.     return false;
  27.   });
  28.   $("#pia_reservation_hope_date02").keypress(function(e) {
  29.     $(this).val("");
  30.     alert("直接入力ではなくカレンダーから選択してください。");
  31.     return false;
  32.   });
  33.   $("#pia_reservation_hope_date03").keypress(function(e) {
  34.     $(this).val("");
  35.     alert("直接入力ではなくカレンダーから選択してください。");
  36.     return false;
  37.   });
  39.   $.datepicker.setDefaults($.datepicker.regional["ja"]);
  40.   $("#open_date").datepicker({
  41.     minDate: "+1d",
  42.     maxDate: "+4m",
  43.     numberOfMonths: 4,
  44.     showButtonPanel: false,
  45.     beforeShowDay: function(date) {
  46.       if (date.getDay() === 0) {
  47.         return [false, 'ui-state-disabled', "非営業日"];
  48.       } else {
  49.         var year = date.getFullYear();
  50.         var month = date.getMonth();
  51.         var day = date.getDate();
  52.         var disableDate = year + "/" + ('00' + (month + 1)).slice(-2) + "/" + ('00' + day).slice(-2);
  53.         var isAvailable = (disableDates.indexOf(disableDate) === -1);
  54.         
  55.         // 六曜の取得
  56.         var dateStr = year + "-" + ('00' + (month + 1)).slice(-2) + "-" + ('00' + day).slice(-2);
  57.         var rokuyou = htRoku[dateStr] || "";
  58.         
  59.         return [isAvailable, "", rokuyou];
  60.       }
  61.     },
  62.     onSelect: function(dateText, inst) {
  63.       // 日付をHTML5のdate形式に変換
  64.       var dateParts = dateText.split('/');
  65.       var formattedDate = dateParts[0] + '-' + dateParts[1].padStart(2, '0') + '-' + dateParts[2].padStart(2, '0');
  66.       
  67.       // 4ヶ月カレンダーから選択した場合は第1希望日に設定
  68.       $("#pia_reservation_hope_date01").val(formattedDate);
  69.       $("#pia_reservation_hope_date01").focus();
  70.     }
  71.   });
  73.   $.datepicker.setDefaults({
  74.     minDate: "+1d",
  75.     maxDate: "+3m",
  76.     numberOfMonths: 1,
  77.     beforeShowDay: function(date) {
  78.       if (date.getDay() === 0) {
  79.         return [false, 'ui-state-disabled', "非営業日"];
  80.       } else {
  81.         var year = date.getFullYear();
  82.         var month = date.getMonth();
  83.         var day = date.getDate();
  84.         var disableDate = year + "/" + ('00' + (month + 1)).slice(-2) + "/" + ('00' + day).slice(-2);
  85.         return [(disableDates.indexOf(disableDate) === -1), "", "営業日"];
  86.       }
  87.     }
  88.   });
  90.   // 個別のdatepickerは、フォーカスされたフィールドにのみ適用
  91.   $("#pia_reservation_hope_date01").datepicker({
  92.     onSelect: function(dateText, inst) {
  93.       // 日付をHTML5のdate形式に変換
  94.       var dateParts = dateText.split('/');
  95.       var formattedDate = dateParts[0] + '-' + dateParts[1].padStart(2, '0') + '-' + dateParts[2].padStart(2, '0');
  96.       $(this).val(formattedDate);
  97.       $("#pia_reservation_hope_time01").focus();
  98.     }
  99.   });
  100.   $("#pia_reservation_hope_date02").datepicker({
  101.     onSelect: function(dateText, inst) {
  102.       // 日付をHTML5のdate形式に変換
  103.       var dateParts = dateText.split('/');
  104.       var formattedDate = dateParts[0] + '-' + dateParts[1].padStart(2, '0') + '-' + dateParts[2].padStart(2, '0');
  105.       $(this).val(formattedDate);
  106.       $("#pia_reservation_hope_time02").focus();
  107.     }
  108.   });
  109.   $("#pia_reservation_hope_date03").datepicker({
  110.     onSelect: function(dateText, inst) {
  111.       // 日付をHTML5のdate形式に変換
  112.       var dateParts = dateText.split('/');
  113.       var formattedDate = dateParts[0] + '-' + dateParts[1].padStart(2, '0') + '-' + dateParts[2].padStart(2, '0');
  114.       $(this).val(formattedDate);
  115.       $("#pia_reservation_hope_time03").focus();
  116.     }
  117.   });
  118. });
  120. function changeDateFormat(date) {
  121.   let year = date.getFullYear();
  122.   let month = ('00' + date.getMonth()).slice(-2);
  123.   let day = ('00' + date.getDate()).slice(-2);
  124.   let f_date = year + "/" + month + "/" + day;
  125.   return f_date;
  126. }
  128. function doConfirm() {
  129.   var hope_date01 = $("#pia_reservation_hope_date01").val();
  130.   if (!hope_date01) {
  131.     alert("第１希望日を選択してください。");
  132.     $("#pia_reservation_hope_date01").focus();
  133.     return;
  134.   }
  135.   $("#open_date").hide();
  136.   $("#fm").submit();
  137. }
  139. $(function() {
  140.   dispCalendar();
  141. });
  143. $(window).resize(function() {
  144.   dispCalendar();
  145. });
  147. function dispCalendar() {
  148.   var w = $(window).width();
  149.   var x = 640;
  150.   if (w <= x) {
  151.     $("#open_date").hide();
  152.     $("#calenderform button").show();
  153.   } else {
  154.     $("#open_date").show();
  155.     $("#calenderform button").hide();
  156.   }
  157. }
  159. function doSelect(id) {
  160.   $(id).focus();
  161. }
  163. $(function() {
  164.   doNext("#pia_reservation_reservation_name", "#pia_reservation_reservation_tel");
  165.   doNext("#pia_reservation_reservation_tel", "#pia_reservation_reservation_email");
  166.   doNext("#pia_reservation_reservation_email", "#pia_reservation_visitor");
  167.   doNext("#pia_reservation_visitor", "#pia_reservation_visitor_detail");
  168. });
  170. function doNext(s_id, n_id) {
  171.   $(s_id).keypress(function(e) {
  172.     if (e.which == 13) {
  173.       $(n_id).focus();
  174.       $(s_id).blur();
  175.       return false;
  176.     }
  177.   });
  178. }
  179. </script>
  181. <style type="text/css">
  182. #calenderform button {
  183.   display: none;
  184. }
  185. .ui-datepicker-today {
  186.   opacity: 1 !important;
  187. }
  188. .ui-datepicker-today span {
  189.   color: red !important;
  190.   border: 1px solid red !important;
  191. }
  192. .ui-datepicker-multi-4 .ui-datepicker-group {
  193.   width: 25% !important;
  194. }
  195. #open_date {
  196.   width: fit-content;
  197.   margin: auto !important;
  198. }
  199. #error_msg {
  200.   width: 80%;
  201.   margin: 20px auto;
  202.   background-color: #fffce5;
  203.   padding: 10px;
  204. }
  205. #error_msg p {
  206.   margin: 0;
  207. }
  208. </style>
  209. <div class="ec-registerRole">
  210.   <div class="kaso_h1title">
  211.     <p>Appointment</p>
  212.     <h1>来店予約</h1>
  213.   </div>
  215. <div class="ec-off1Grid">
  216.   <div class="ec-off1Grid__cell">
  217.     <form id="fm" name="fm" method="post" action="{{ url('plugin_pia_reservation_confirm') }}">
  218.       {{ form_widget(form._token) }}
  219.       <div id="open_date"></div>
  220.       
  221.       <div id="calenderform">
  222.         <div class="ec-borderedDefs">
  223.           <p id="attention_area" style="text-align: left;">
  224.             第1希望日を最優先とさせて頂きますが、先約を頂いている場合、お時間の調整または第2、第3希望日で承る場合がございますのでご了承下さい。<br>
  225.             ご予約お申込は、確定ではございません。のちほど担当者よりメールまたは、お電話にて改めてご連絡申し上げます。<br>
  226.             <span style="color:red;">※</span> は必要項目になります。ご入力お願い致します。
  227.           </p>
  229.           {% if error_msg %}
  230.           <div id="error_msg">
  231.             {% for msg in error_msg %}
  232.               <p><span style="color:red;">※</span>{{ msg }}</p>
  233.             {% endfor %}
  234.           </div>
  235.           {% endif %}
  237.           <div id="calen_table" class="open_date_val">
  238.             <dl>
  239.               <dt>第１希望日 <span style="color:red;">※</span></dt>
  240.               <dd>
  241.                 <span>日程：</span>
  242.                 {{ form_widget(form.hope_date01, {'attr': {'id': 'hope_date01', 'autocomplete': 'off'}}) }}
  243.                 {{ form_errors(form.hope_date01) }}
  244.                 <span>　<br></span>
  245.                 時間：
  246.                 {{ form_widget(form.hope_time01, {'attr': {'id': 'hope_time01', 'onchange': 'doSelect("#pia_reservation_hope_date02");'}}) }}
  247.                 {{ form_errors(form.hope_time01) }}
  248.               </dd>
  249.             </dl>
  251.             <dl>
  252.               <dt>第２希望日</dt>
  253.               <dd>
  254.                 <span>日程：</span>
  255.                 {{ form_widget(form.hope_date02, {'attr': {'id': 'hope_date02', 'autocomplete': 'off'}}) }}
  256.                 {{ form_errors(form.hope_date02) }}
  257.                 <span>　<br></span>
  258.                 時間：
  259.                 {{ form_widget(form.hope_time02, {'attr': {'id': 'hope_time02', 'onchange': 'doSelect("#pia_reservation_hope_date03");'}}) }}
  260.                 {{ form_errors(form.hope_time02) }}
  261.               </dd>
  262.             </dl>
  264.             <dl>
  265.               <dt>第３希望日</dt>
  266.               <dd>
  267.                 <span>日程：</span>
  268.                 {{ form_widget(form.hope_date03, {'attr': {'id': 'hope_date03', 'autocomplete': 'off'}}) }}
  269.                 {{ form_errors(form.hope_date03) }}
  270.                 <span>　<br></span>
  271.                 時間：
  272.                 {{ form_widget(form.hope_time03, {'attr': {'id': 'hope_time03', 'onchange': 'doSelect("#pia_reservation_reservation_name");'}}) }}
  273.                 {{ form_errors(form.hope_time03) }}
  274.               </dd>
  275.             </dl>
  277.             <dl>
  278.               <dt>お名前 <span style="color:red;">※</span></dt>
  279.               <dd class="w90">
  280.                 {{ form_widget(form.reservation_name, {'attr': {'id': 'reservation_name'}}) }}
  281.                 {{ form_errors(form.reservation_name) }}
  282.               </dd>
  283.             </dl>
  284.             <dl>
  285.               <dt>電話番号 <span style="color:red;">※</span></dt>
  286.               <dd class="w90">
  287.                 {{ form_widget(form.reservation_tel, {'attr': {'id': 'reservation_tel'}}) }}
  288.                 {{ form_errors(form.reservation_tel) }}
  289.               </dd>
  290.             </dl>
  291.             <dl>
  292.               <dt>メールアドレス <span style="color:red;">※</span></dt>
  293.               <dd class="w90">
  294.                 {{ form_widget(form.reservation_email, {'attr': {'id': 'reservation_email'}}) }}
  295.                 {{ form_errors(form.reservation_email) }}
  296.               </dd>
  297.             </dl>
  298.             <dl>
  299.               <dt>来店人数</dt>
  300.               <dd>
  301.                 {{ form_widget(form.visitor, {'attr': {'id': 'visitor'}}) }}
  302.                 {{ form_errors(form.visitor) }}
  303.               </dd>
  304.             </dl>
  305.             <dl>
  306.               <dt>詳細</dt>
  307.               <dd class="w90">
  308.                 {{ form_widget(form.visitor_detail, {'attr': {'id': 'visitor_detail', 'rows': 5, 'maxlength': 2000, 'placeholder': '年齢、友人と一緒に来店予定、など'}}) }}
  309.                 {{ form_errors(form.visitor_detail) }}
  310.               </dd>
  311.             </dl>
  312.             <dl>
  313.               <dt>ご質問など</dt>
  314.               <dd>
  315.                 {{ form_widget(form.message, {'attr': {'id': 'message', 'rows': 5, 'maxlength': 2000}}) }}
  316.                 {{ form_errors(form.message) }}
  317.               </dd>
  318.             </dl>
  319.           </div>
  320.           <div id="yoyaku">
  321.             <input type="button" value="予約内容を確認する" id="yoyakubtn" onclick="doConfirm();">
  322.           </div>
  323.         </div>
  324.       </div>
  325.     </form>
  326.   </div>
  327. </div>
  328. </div>
  329. {% endblock %}