增加模糊日期选择 JS

application/views/mobile_first/gh-info-page-form.php

@@ -174,8 +174,10 @@
     <div class="trip_date_length" id="tripDateBlock" style="display: none">
                   <p style="margin-bottom: 10px;">Select your travel date and trip length (days).</p>
       <div id='dateSelectionBlock'>
+                                  <div id='flatpickrBlock'>
       <input type="text" class="arrivalDate datepicker" id="starting_date" name="date_start" value="" placeholder="mm/dd/yyyy" autocomplete="off" style="width: auto; float: left; margin-right: 15px; height: 30px;
       margin-top: 5px;">
+      </div>          
       <input type="month" id="expectedMonth" name="expected_month" placeholder="Select your expected travel date." style="width: auto; float: left; margin-right: 15px;height: 30px;
       margin-top: 5px;">
       </div>
@@ -191,10 +193,16 @@
             </div>
 
             <p><input class="FullName" data-required="Please enter your fullname" id="realname" name="name"
-                placeholder="Your name" required="" type="text"></p>
+                placeholder="Your name" required="" type="text">
+                
+            <span id="realname_errmsg" style="display: none"><span class="requiredArea">Please enter your name.</span></span>
+              </p>
             <p><input class="EmailAddress" data-required="Please enter your e-mail address"
                 data-pattern="Expecting an e-mail address" id="email" name="email" pattern="^[\w\-\.]+@[\w\-\.]+(\.\w+)+$"
-                placeholder="Email" required type="text"></p>
+                placeholder="Email" required type="text">
+                <span id="email_errmsg" style="display: none"><span class="requiredArea">Please enter your email.</span></span>
+                <span id="email_verify_errmsg" style="display: none"><span class="requiredArea">Please verify your email.</span></span>
+              </p>
             <p><input class="InquiryCalendar" data-min-date="7" id="starting_date" name="date_start"
                 placeholder="Starting date" required type="date"></p> 
                 <p>
@@ -467,6 +475,7 @@
                             </select>
                             <input class="Inquiryphone" name="PhoneNo" placeholder="Phone or other ways to contact you (optional)"
                 type="text"> </p>
+                <span id="phone_errmsg" style="display: none"><span class="requiredArea">Please enter your phone number.</span></span>
                 <p style="font-size: 17px;font-style:italic;line-height: 20px; color: #555;">Having a phone
                             number, especially with WhatsApp/iMessage capability will improve communication
                             efficiency.</p>
@@ -513,7 +522,7 @@
           minDate: "today"
       });
   
-      var quick_inquiry_button = document.getElementById("info_page_button");
+      var quick_inquiry_button = document.getElementById("info_page_form_btn");
       var quick_inquiry_form = document.getElementById("info_page_form");
       
       quick_inquiry_button.addEventListener('click', function(event) {
@@ -550,7 +559,7 @@
       var emailErrEl = document.getElementById("email_errmsg");
       var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
       var startingDateErrEl = document.getElementById("date_error_msg");
-      var contactErrEl = document.getElementById("contact_errmsg");
+      var contactErrEl = document.getElementById("phone_errmsg");
       var groupErrEl = document.getElementById("group_error_msg");
   
       realnameErrEl.style.display = 'none';
@@ -648,7 +657,7 @@
   var $expectedDate = $('#starting_date');
   var $expectedMonth = $('#expectedMonth');
   var $dateSelectionBlock = $('#dateSelectionBlock');
-  var $expectedTravelDateBlock = $('#expectedTravelDateBlock');
+  var $flatpickrBlock = $('#flatpickrBlock');
   $('input[name="trip_date"]').each((i, tripDateEle) => {
     $(tripDateEle).click(function (e) {
       $expectedDate.val('');
@@ -658,17 +667,15 @@
       selectedExpectedDate = selectedTripDate.id;
       if (selectedTripDate.id === 'exact') {
         $dateSelectionBlock.show();
-        $expectedTravelDateBlock.hide();
         $expectedMonth.hide();
-        $expectedDate.show();
+        $flatpickrBlock.show();
       } else if (selectedTripDate.id === 'approximate') {
         $dateSelectionBlock.show();
-        $expectedTravelDateBlock.hide();
+        $flatpickrBlock.hide();
-        $expectedDate.hide();
         $expectedMonth.show();
       } else if (selectedTripDate.id === 'yet') {
         $dateSelectionBlock.hide();
-        $expectedTravelDateBlock.show();
+        $flatpickrBlock.hide();
       }
     })
   });
@@ -759,37 +766,7 @@
                 }
               }
             });
-            document.querySelector('.expandAll').onclick = function (e) {
+            
-              let obj = document.querySelector('.expandAll');
-              let all_status = obj.getAttribute("collapse-status");
-              if (all_status == "hide") {
-                obj.setAttribute("collapse-status", "show");
-                obj.querySelector(".expandAllText").innerHTML = "Collapse All";
-                obj.parentNode.querySelectorAll("div[collapse] span[id$='Icon']").forEach(function(icon, i){
-                  icon.classList.remove('OpenIcon');
-                  icon.classList.add('CloseIcon');
-                });
-                obj.parentNode.querySelectorAll("div[collapse-content]").forEach(function(itinerary, i){
-                  slideDown(itinerary);
-                });
-                obj.parentNode.querySelectorAll("div[collapse]").forEach(function(title, i){
-                  title.setAttribute("collapse-status", "show");
-                });
-              } else {
-                obj.setAttribute("collapse-status", "hide");
-                obj.querySelector(".expandAllText").innerHTML = "Expand All";
-                obj.parentNode.querySelectorAll("div[collapse] span[id$='Icon']").forEach(function(icon, i){
-                  icon.classList.remove('CloseIcon');
-                  icon.classList.add('OpenIcon');
-                });
-                obj.parentNode.querySelectorAll("div[collapse-content]").forEach(function(itinerary, i){
-                  slideUp(itinerary);
-                });
-                obj.parentNode.querySelectorAll("div[collapse]").forEach(function(title, i){
-                  title.setAttribute("collapse-status", "hide");
-                });
-              }
-            }
             function slideUp(target, duration) {
               duration = duration ? duration : 500;
               target.style.transitionProperty = 'height, margin, padding';