הגבלת תאריכים בצורה דינאמית באלמנטור, שמאפשר רק טווח מסוים של תאריכים
יום אחד קולגה שלי שלח לי הודעה, אחי אני לא מוצא אפשרות בטופס אלמנטור להגביל את בחירת התאריכים לחודש קדימה וללא שישי שבת.
במקרה הזה הוא היה צריך להגדיר מועד הגעה של טכנאי, מבדיקה שעשיתי אכן לא היתה אופציה כזו קיימת באלמנטור.
לעיתים יש צורך להגביל את הבחירה של תאריכים לטווח מסוים. לדוגמה, נרצה לאפשר למשתמשים לבחור תאריך החל ממחר ועד 30 ימים קדימה, תוך סינון ימים מסוימים בשבוע. כיצד ניתן לעשות זאת?
נשתמש בספריית JavaScript פופולרית בשם Flatpickr, זו בעצם הספריה שאלמנטור משתמשים בה, שתאפשר לנו לבצע את ההגבלות הנדרשות בצורה פשוטה ויעילה.
שלב 1: כללי ה-CSS
ראשית, אם יש צורך להסתיר תאריכים באמצעות CSS, ניתן להשתמש בקוד הבא:
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
display: none;
}
את הקוד נטמיע בCSS הכללי של העמוד או לחילופין בשדה HTML שנטמיע מתחת לטופס שלנו.
שימו לב אם נגדיר את הCSS בשדה הHTML נצטרך להוסיף תגיות <style>והCSS שלנו יישב כאן</style>
הקוד הזה יסתיר תאריכים שלא בחודש הנוכחי, אבל זה לא הכרחי אם אנו משתמשים בהגדרות ה-JavaScript הבאות
שלב 2: הסקריפט של JavaScript
אחר כך, נשתמש בקוד JavaScript כדי להגדיר את ההגבלות בבורר התאריכים:
<script>
document.addEventListener('DOMContentLoaded', function() {
var today = new Date();
var tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
var oneMonthAhead = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 30);
var startDate = tomorrow.toISOString().split('T')[0];
var endDate = oneMonthAhead.toISOString().split('T')[0];
flatpickr("#form-field-field_33258a5", {
enableTime: false,
dateFormat: "Y-m-d",
minDate: startDate, // מאפשר בחירה החל ממחר
maxDate: endDate, // מאפשר בחירה עד 30 יום מהיום
disable: [
function(date) {
// מנטרל ימי שישי ושבת
return (date.getDay() === 5 || date.getDay() === 6);
}
],
disableMobile: "true" // מנטרל את הקלט הספציפי לניידים כדי להבטיח שנעשה שימוש ב-Flatpickr
});
});
</script>
בקוד הנ”ל, אנו מגדירים שהבחירה תתחיל ממחר (tomorrow) ותסתיים 30 ימים מהיום (oneMonthAhead). בנוסף, אנו משתמשים באופציה disable כדי להגדיר פונקציה שתחסום את ימי שישי ושבת מהבחירה.
