פיתוח

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

UX/UI

פיתוח

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

UX/UI

פיתוח

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

UX/UI

פיתוח

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

הצלחה

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

UX/UI

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

פיתוח

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

פיתוח

העלמת שדות משלוח למוצרים וירטואליים

פיתוח

תוויות מרחפות בטופס אלמנטור

פיתוח

הפנייה לעמוד אחר בגלישה ממובייל

פיתוח

אנימציית סיבוב קבועה

פיתוח

שיוך תפקיד למשתמש אחרי רכישת מוצר

פיתוח

בנטו גריד באלמנטור? ועוד דינאמי?! כן כן!

UX/UI

פיתוח

3 טרנדים עיצוביים באלמנטור

הצלחה

איך לעבוד מעט ולהספיק המון – ניהול זמן למעצבים ובוני אתרים | זומליינר #9

UX/UI

פיצ’ר ה-AI החדש של פוטושופ הולך לשנות לכם (ולתמונות שלכם) את החיים

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

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