JS

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

יצרתם טופס באלמנטור ואתם רוצים להגביל את התאריכים שלא יבחרו תאריך מוקדם מהיום? התשובה לפניכם! מושלם לטפסי צ'ק-אין / צ'ק-אאוט ולטפסים בהם הגולש נדרש לבחור טווח תאריכים

מאת יוסי דויד

קטע הקוד:

שימו ♥:

  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);

	});



				
			
  • אם הקוד נדרש לחול בעמוד ספציפי ניתן לשים אותו בווידג'ט HTML בעמוד,
    או למקם אותו תחת הגדרות אלמנטור > Custom Code, ולהגדיר שיחול בעמוד/ים שנרצה.
 
  • אם הקוד נדרש לחול על כל האתר, ניתן למקם אותו בהגדרות אלמנטור > Custom Code.

שניכנס לתא הטייס?

שכחת סיסמה?

שחזור סיסמה:

שכח את הסיסמה? הזן את שם המשתמש או כתובת הדואר אלקטרוני. תקבל קישור לאיפוס סיסמה באמצעות דואר אלקטרוני.