פיתוח

7

הגבלת טווחי תאריכים בטפסי אלמנטור

שימו ♥

  1. יש להוסיף את הקלאס הבא לטופס: desktop-booking-form.
  2. יש להוסיף 2 שדות תאריך, לראשון לתת את השם (ID) checkin ולשני checkout.

הקוד שלהלן מאפשר לנו להגביל בחירת תאריכים מהתאריך הנוכחי והלאה בלבד, ואחרי שבוחרים תאריך בשדה הראשון (צ’ק-אין, למשל), אי אפשר לבחור תאריך מוקדם יותר בשדה השני (לדוגמה – צ’ק-אאוט).

    
     jQuery(document).ready(function($) {
  setTimeout(function() {
   const currentDate = new Date(),
      checkinDate = $('.desktop-booking-form #form-field-checkin').val(),
      checkoutDate = $('.desktop-booking-form #form-field-checkout').val();
   document.querySelector('.desktop-booking-form #form-field-checkin')._flatpickr.config.minDate = currentDate;
   document.querySelector('.desktop-booking-form #form-field-checkin')._flatpickr.config.onChange.push(function(selectedDates, dateStr, instance){
    document.querySelector('.desktop-booking-form #form-field-checkout')._flatpickr.config.minDate = dateStr;
    console.log('data changed');
   });
   if(checkinDate != '' && checkinDate) {
    if( (new Date(checkin_date)) > (new Date(checkout_date)) ) {
     document.querySelector('.desktop-booking-form #form-field-checkin')._flatpickr.clear();
     document.querySelector('.desktop-booking-form #form-field-checkin')._flatpickr.config.maxDate = checkoutDate;
    }
   }
   else {
    document.querySelector('.desktop-booking-form #form-field-checkin')._flatpickr.config.maxDate = checkoutDate;
   }
  }, 1500);
 });
    
   

הרשמו לעדכונים במייל

ואל תפספסו אף זום חינמי, סדנה חדשה או מדריך שווה!