增加模糊日期选择 JS

hotfix/paypal-note
Jimmy Liow 2 years ago
parent 63dbc33203
commit fb35c0b31b

@ -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();
$expectedDate.hide();
$flatpickrBlock.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';

Loading…
Cancel
Save