פיתוח

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

פיתוח

אנימציית CSS של עיגול מתרחב לכפתור

פיתוח

סגירת תפריט Off-Canvas בלחיצה על כפתור

הצלחה

הקורס המלא לעריכת וידאו לסושיאל (צרו סרטונים מדהימים בכמה דקות)

UX/UI

פיתוח

תלת מימד באלמנטור + הכירו את… הגרידליינר | בואו נעצב מדהים באלמנטור – פרק חמישי

פיתוח

הצלחה

בניית אתרים מלאה ב-AI באלמנטור | זומליינר הכנה ל-2025 🚀

UX/UI

פיתוח

אנימציות GSAP מטורפות באלמנטור 🤯

UX/UI

פיתוח

הפתעה ל…אילון מאסק! | בואו נעצב מדהים באלמנטור – פרק רביעי

פיתוח

אנימציית כניסה עדינה לכל האלמנטים באתר

UX/UI

פיתוח

הכירו את הגרידליינר – התוסף לאלמנטור שיהפוך כל עיצוב שלכם למדויק

UX/UI

פיתוח

בואו נעצב (רספונסיבי ו)מדהים באלמנטור – פרק שלישי

UX/UI

פיתוח

בואו נעצב מדהים באלמנטור – פרק שני

UX/UI

פיתוח

בואו נעצב מדהים באלמנטור – פרק ראשון

הצלחה

ככה תחזרו לשגרה בעסק באפקטיביות | זומליינר #21

UX/UI

3 טיפים לאפיון זורם ומדהים + יצירת Userflow | זומליינר 20#

פיתוח

אנימציית ריחוף מגניבה

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

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