AH线路页面QI 添加日期选择

application/views/mobile_first/ah-inquiry-form.php

@@ -5,8 +5,8 @@
         <textarea id="form_additionalrequirements" name="additional_requirements" placeholder="Tell us your travel requirements here: anniversary, honeymoon, family trip, birthday travel, beach, food... (optional)"></textarea>
        
 		<div class="selectionBlock">
-                            <h4>
-                                Numbers in your group
+                            <h4 style="margin-bottom: 0;">
+                                How would you travel?
                             </h4>
 							<div id="group_error_msg" style="display: none">
     <div class="requiredArea" style="margin-top:-10px;">Please select number in your group.</div>
@@ -134,13 +134,39 @@
                             </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 date and trip length (days).</div>
+                            </div>
+                            <div class="travel_group">
+                                <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">
+                                <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">
+                                <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>Select your travel date and trip length (days).</p>
+                                <div id="dateSelectionBlock">
                                     <input class="InquiryCalendar datepicker" id="starting_date" name="date_start" placeholder="Starting date *" readonly="readonly" type="text" value="" />
-        <div id="starting_date_errmsg" style="display: none">
-        <div class="requiredArea" style="margin-top:-10px;">Please enter your starting date.</div> </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">
     <div class="requiredArea" style="margin-top:-10px;">Please enter your name.</div>
@@ -575,7 +601,8 @@ 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");
@@ -604,6 +631,22 @@ function validateQuickInquiryForm() {
       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) {
+				calcScrollTop($('#dateselect'));
+				$('#date_error_msg').removeClass('hidden');
+				errorCount++;
+			}
+
     if (realnameVal === '') {
         realnameErrEl.style.display = '';
         result = false;
@@ -665,6 +708,31 @@ function validateQuickInquiryForm() {
 			})
 		});
 
+    var $tripDateBlock = $('#tripDateBlock');
+    var $expectedDate = $('#Date_Start');
+    var $expectedMonth = $('#expectedMonth');
+    var $dateSelectionBlock = $('#dateSelectionBlock');
+    var selectedExpectedDate = '';
+    $('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();
+        } else if (selectedTripDate.id === 'approximate') {
+          $dateSelectionBlock.show();
+          $expectedDate.hide();
+          $expectedMonth.show();
+        } else if (selectedTripDate.id === 'yet') {
+          $dateSelectionBlock.hide();
+        }
+      })
+    });
 
 //成人
     $('#plusAdult').click(function () {