增加日期选择和相应JS

application/views/mobile_first/ah-tour-list-form.php

@@ -147,7 +147,41 @@
 					</div>
 
 				</div>
-
+				<div class="selectionBlock">
+					<h4>
+						When would you travel?
+					</h4>
+					<div id="date_error_msg" style="display: none">
+						<div class="requiredArea" style="margin-top:-10px;">Select your travel data.</div>
+					</div>
+					<div class="travel_group date_select">
+						<input type="radio" value="exact travel dates" id="exact" name="trip_date">
+						<label for="exact" class="family">
+							I have exact travel dates.
+						</label>
+					</div>
+					<div class="travel_group date_select">
+						<input type="radio" value="approximate travel dates" id="approximate" name="trip_date">
+						<label for="approximate" class="couple">
+							I have approximate travel dates.
+						</label>
+					</div>
+					<div class="travel_group date_select">
+						<input type="radio" value="haven't decided travel dates" id="yet" name="trip_date">
+						<label for="yet" class="solo">
+							I haven't decided my travel dates.
+						</label>
+					</div>
+					<div class="trip_date_length" id="tripDateBlock" style="display: none">
+						<p style="clear: both;margin-bottom: 10px;" id="trip_date_tip">Select your travel date.</p>
+						<div id="dateSelectionBlock">
+						  <div id='flatpickrBlock'>
+							<input class="InquiryCalendar datepicker" id="starting_date" name="date_start" placeholder="Starting date *" readonly="readonly" type="text" value="" />
+						  </div>
+							<input type="month" id="expectedMonth" name="expected_month" placeholder="Select your expected travel date.">
+						</div>
+					</div>
+				</div>
 				<input class="FullName" id="realname" name="name" placeholder="Your name *" required="" type="text"
 					value="" />
 				<div id="realname_errmsg" style="display: none">
@@ -475,6 +509,8 @@
 
 <script src="https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js"></script>
 <script>
+  
+  var selectedExpectedDate = '';
 document.addEventListener('DOMContentLoaded', () => {
     flatpickr("#starting_date", {
         dateFormat: "Y-m-d",
@@ -484,15 +520,15 @@
         minDate: "today"
     });
 
-		var tour_list_button = document.getElementById("tour_list_button");
+    var quick_inquiry_button = document.getElementById("quick_inquiry_button");
-		var tour_list_form = document.getElementById("tour_list_form");
+    var quick_inquiry_form = document.getElementById("quick_inquiry_form");
     
-		tour_list_button.addEventListener('click', function (event) {
+    quick_inquiry_button.addEventListener('click', function(event) {
         var validateResult = validateQuickInquiryForm();
         if (validateResult) {
           if (typeof(grecaptcha) === "undefined") {
             console.warn('grecaptcha is disabled.');
-					tour_list_form.submit();
+            quick_inquiry_form.submit();
           } else {
             grecaptcha.enterprise.ready(async () => {
               const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
@@ -500,27 +536,27 @@
               el.type = "hidden";
               el.name = "__grecaptcha_token__";
               el.value = token;
-						tour_list_form.appendChild(el);
+              quick_inquiry_form.appendChild(el);
-						tour_list_form.submit();
+              quick_inquiry_form.submit();
-						tour_list_button.innerText = "Submitted successfully";
+              quick_inquiry_button.innerText = "Submitted successfully";
             });
           }
         }  
     });
-
 });
 
 function validateQuickInquiryForm() {
     var result = true;
     var realnameVal = document.getElementById("realname").value;
     var emailVal = document.getElementById("email").value;
-		var startingDateVal = document.getElementById("starting_date").value;
+    var expectedDateVal = document.getElementById("starting_date").value;
+    var expectedMonthVal = document.getElementById("expectedMonth").value;
     var contactVal = document.getElementById("PhoneNo").value;
 
     var realnameErrEl = document.getElementById("realname_errmsg");
     var emailErrEl = document.getElementById("email_errmsg");
     var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
-		var startingDateErrEl = document.getElementById("starting_date_errmsg");
+    var startingDateErrEl = document.getElementById("date_error_msg");
     var contactErrEl = document.getElementById("contact_errmsg");
     var groupErrEl = document.getElementById("group_error_msg");
 
@@ -543,6 +579,21 @@
       result = false;
     }
 
+    var tripDate_is_checked = false;
+      if (selectedExpectedDate === 'exact') {
+        tripDate_is_checked = expectedDateVal !== '';
+      } else if (selectedExpectedDate === 'approximate') {
+        tripDate_is_checked = expectedMonthVal !== '';
+      } else if (selectedExpectedDate === 'yet') {
+        tripDate_is_checked = true;
+      }
+
+			//时间选择
+			if (!tripDate_is_checked) {
+        startingDateErrEl.style.display = '';
+        result = false;
+			}
+
     if (realnameVal === '') {
         realnameErrEl.style.display = '';
         result = false;
@@ -557,10 +608,6 @@
             result = false;
         }
     }
-		if (startingDateVal === '') {
-			startingDateErrEl.style.display = '';
-			result = false;
-		}
     if (contactVal === '') {
         contactErrEl.style.display = '';
         result = false;
@@ -568,9 +615,9 @@
     return result;
 }
 </script>
-
-
 <script>
+  
+	$(function () {
         	var $adultBlock = $('#adultBlock');
     var $childrenBlock = $('#childrenBlock');
     var $adultNumberInput = $('#adultNumber');
@@ -604,6 +651,35 @@
 			})
 		});
 
+    var $tripDateBlock = $('#tripDateBlock');
+    var $expectedDate = $('#flatpickrBlock');
+    var $expectedMonth = $('#expectedMonth');
+    var $dateSelectionBlock = $('#dateSelectionBlock');
+    var $tripDateTip = $('#trip_date_tip');
+    
+    $('input[name="trip_date"]').each((i, tripDateEle) => {
+			$(tripDateEle).click(function (e) {
+        $expectedDate.val('');
+        $expectedMonth.val('');
+        $tripDateBlock.show();
+        var selectedTripDate = e.currentTarget;
+        selectedExpectedDate = selectedTripDate.id;
+        if (selectedTripDate.id === 'exact') {
+          $dateSelectionBlock.show();
+          $expectedMonth.hide();
+          $expectedDate.show();
+          $tripDateTip.show();
+        } else if (selectedTripDate.id === 'approximate') {
+          $dateSelectionBlock.show();
+          $expectedDate.hide();
+          $expectedMonth.show();
+          $tripDateTip.show();
+        } else if (selectedTripDate.id === 'yet') {
+          $dateSelectionBlock.hide();
+          $tripDateTip.hide();
+        }
+      })
+    });
 
 //成人
     $('#plusAdult').click(function () {
@@ -649,4 +725,5 @@
 				$infantNumberInput.val(infantNumber);
 			}
 		});
+  })
     </script>