שדה קלט זמן ותאריך ב-Fluent Forms #
השדה זמן וקלט תאריך מאפשר למשתמשים להציג שדה שלוכד נתוני תאריך ולשלוח זמן כשעות או דקות. ישנה תצורת תאריך זמינה בה באפשרותך לבחור את התאריך והזמן הרצויים שלך בשני הפורמטים.
הוספת שדה קלט זמן וקלט תאריך בטפסים שלך קלה עם Fluent Forms.
- כדי להוסיף שדה זה לטופס שלך, גרור והנח את השדה משדות הקלט הזמינים.
- כדי להפעיל התאמה אישית, לחץ על סמל העריכה שאתה מקבל בעת הצבת הסמן על השדה. או לחץ על הכרטיסייה Input Customization (התאמה אישית של קלט) בסרגל הצד הימני בעת בחירת השדה.
בקטע Input Customization (התאמה אישית של קלט), באפשרותך להתאים אישית את שדה קלט זמן וקלט תאריך בדרכים הבאות. בקטע זה, תמצא 2 חלקים:
- אפשרויות בסיסיות
- אפשרויות מתקדמות
אפשרויות בסיסיות #
בצד ימין של הכרטיסייה, ישנן כמה אפשרויות בסיסיות חשובות המפורטות להלן:
- Element Label (תווית אלמנט): זהו הטקסט שהמשתמשים יראו בטופס עבור שדה קלט זמן וקלט תאריך. באפשרותך לשים כל טקסט כאן שעוזר להבין את מטרת השדה.
- Label Placement (מיקום התווית): קבע את מיקום התווית שהגדרת בעבר ביחס לשדה הקלט. האפשרויות הזמינות הן Top (עליון), Left (שמאל), Right (ימין), ו-Default (ברירת מחדל). כל אלה הם מובנים מאליהם למעט Default. המשמעות היא שהוא ייצג את הגדרות מיקום התווית הגלובליות שלך.
- Admin Field Label (תווית שדה מנהל): אם ברצונך להציג תווית שונה למשתמשי הניהול שלך כאשר הם צופים בשליחות הטופס, באפשרותך להגדיר זאת באמצעות אפשרות זו. לזה אין השפעה בפועל על הטופס; אלא רק למטרות ניהולניות.
- Placeholder (מציין מקום): באפשרותך גם להכיל מציין מקום שבאמצעותו המשתמשים יתפסו את נושא השדה.
- Date Format (פורמט תאריך): בחר כל פורמט תאריך מהתפריט הנפתח. המשתמש יוכל לבחור תאריך בפורמט זה.
- Required (נדרש): קבע אם השדה יכול להיות ריק או לא כאשר המשתמש שולח את הטופס שלך על ידי בחירת האפשרות המתאימה מכאן.
אפשרויות מתקדמות #
האפשרויות המתקדמות הזמינות עבור שדה קלט זמן וקלט תאריך הן כדלקמן:
- Default value (ערך ברירת מחדל): באפשרותך להגדיר ידנית כל ערך קבוע בשדה שלך, וגם באפשרותך להחזיק מראש את שדה הקלט שלך באופן דינמי באמצעות shortcodes הזמינים שלנו. כדי להבין טוב יותר Default Value דינמי, קרא את המדריך הזה.
- Container Class (מחלקת קונטיינר): השתמש באפשרות זו כדי להוסיף את מחלקות ה-CSS המותאמות שלך ל-wrapper של השדה.
- Element Class (מחלקת אלמנט): באופן דומה, באפשרותך להוסיף מחלקות CSS מותאמות לשדה הקלט עצמו.
- Help Message (הודעת עזרה): כדי להנחות את המשתמש שלך לחלוטין, באפשרותך להשתמש באפשרות זו. פשוט הוסף את הטקסט שלך כאן, והוא יוצג כהודעת עזרה למשתמש.
- Name Attribute (תכונת שם): תכונת השם של שדה הקלט היא המקבילה HTML של אותו שם. לא צריך לשנות זאת.
- Conditional Logic (לוגיקה מותנית): באפשרותך ליצור כללים מסוימים כדי להסתיר/להציג בצורה דינמית את שדה הקלט בהתאם לערכים משדות אחרים. כדי להבין טוב יותר לוגיקה מותנית, קרא את זה.
תצורה מתקדמת #
שדה תאריך וזמן של Fluent Forms משתמש בספרייה flatpickr JS; למשתמשים מתקדמים, באפשרותך לספק את object ה-config בהגדרות המתקדמות של השדה.
הוספת היום הראשון של תאריך השבוע #
כעת, באפשרותך להוסיף את התאריך של תחילת השבוע. באפשרותך לעשות זאת בעזרת קוד מותאם אישית; פשוט השתמש בקוד המופיע להלן:
{
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
}אפשרויות זמינות #
| Config Option | סוג (Type) | ברירת מחדל (Default) | תיאור (Description) |
|---|---|---|---|
| altFormat | String | “F j, Y” | בדיוק כמו פורמט התאריך, אך עבור שדה ה-altInput |
| altInput | Boolean | false | הציג למשתמש תאריך קריא (לפי altFormat), אך החזר משהו לגמרי שונה לשרת. |
| altInputClass | String | “” | מחלקה זו תתווסף לאלמנט הקלט שנוצר על ידי אפשרות altInput. שימו לב שה-altInput כבר יורש מחלקות מהקלט המקורי. |
| allowInput | Boolean | false | מאפשר למשתמש להזין תאריך ישירות בשדה הקלט. כברירת מחדל, ההזנה הישירה מורשלת. |
| appendTo | HTMLElement | null | במקום body, הוסף את ה-calendar לנוד שצוין במקום זאת. |
| ariaDateFormat | String | “F j, Y” | מגדיר כיצד התאריך יופורמט ב-aria-label עבור ימי לוח שנה, תוך שימוש באותם tokens כמו dateFormat. אם תשנה זאת, בחר ערך שיהיה הגיוני אם קורא מסך יקרא אותו בקול רם. |
| clickOpens | Boolean | true | האם לחיצה על הקלט צריכה לפתוח את ה-picker. אתה יכול להשבית זאת אם אתה רוצה לפתוח את לוח השנה ידנית עם .open() |
| dateFormat | String | “Y-m-d” | מחרוזת של תווים המשמשת להגדרת אופן הצגת התאריך בתיבת הקלט. התווים הנתמכים מוגדרים בטבלה למטה. |
| defaultDate | String | null |
קובע את התאריך (או התאריכים) הנבחר/הנבחרים ברשימה. אם אתה משתמש ב-mode: “multiple” או בלוח שנה בטווח, ספק Array של אובייקטי Date או Array של מחרוזות תאריך שעוקבות אחר dateFormat שלך. אחרת, באפשרותך לספק אובייקט Date יחיד או מחרוזת תאריך. |
| defaultHour | Number | 12 |
ערך התחלתי של אלמנט השעה. |
| defaultMinute | Number | 0 |
ערך התחלתי של אלמנט הדקה. |
| disable | Array | [] | ראה הגבלת תאריכים ספציפיים |
| disableMobile | Boolean | false | הגדר את disableMobile ל-true כדי להשתמש תמיד ב-picker שאינו native. כברירת מחדל, flatpickr משתמש בווידג׳טים של datetime native אלא אם כן משתמשים באפשרויות מסוימות (למשל disable). |
| enable | Array | [] | ראה הפעלת תאריכים |
| enableTime | Boolean | false | מפעיל את ה-time picker |
| enableSeconds | Boolean | false | מפעיל שניות ב-time picker. |
| formatDate | Function | null | מאפשר שימוש בפונקציית פורמט תאריך מותאמת אישית במקום הטיפול המובנה לפורמטים תאריך באמצעות dateFormat, altFormat וכו’. |
| hourIncrement | Integer | 1 | מתאים את הצעד עבור קלט השעה (כולל גלילה) |
| inline | Boolean | false | מציג את לוח השנה באופן מקביל |
| maxDate | String/Date | null | התאריך המקסימלי שמשתמש יכול לבחור עד (כולל). |
| minDate | String/Date | null | התאריך המינימלי שמשתמש יכול להתחיל לבחור ממנו (כולל). |
| minuteIncrement | Integer | 5 | מתאים את הצעד עבור קלט הדקה (כולל גלילה) |
| mode | String | “single” | “single”, “multiple”, או “range” |
| nextArrow | String | > | HTML עבור סמל החץ, המשמש להחלפת חודשים. |
| noCalendar | Boolean | false | מסתיר את בחירת היום בלוח השנה. השתמש בו יחד עם enableTime כדי ליצור time picker. |
| onChange | Function, [functions] | null | פונקציה (פונקציות) להפעלה בכל בחירת תאריך. ראה Events API |
| onClose | Function, [functions] | null | פונקציה (פונקציות) להפעלה בכל פעם שלוח השנה סגור. ראה Events API |
| onOpen | Function, [functions] | null | פונקציה (פונקציות) להפעלה בכל פעם שלוח השנה פתוח. ראה Events API |
| onReady | Function, [functions] | null | פונקציה להפעלה כאשר לוח השנה מוכן. ראה Events API |
| parseDate | Function | false | פונקציה הצופה מחרוזת תאריך וחייבת להחזיר אובייקט Date |
| position | String | “auto” |
היכן ה-calendar מרונדר ביחס לקלט.
“auto”, “above” או “below” |
| prevArrow | String | < | HTML עבור סמל החץ השמאלי. |
| shorthandCurrentMonth | Boolean | false | הצג את החודש תוך שימוש בגרסה מקוצרת (כלומר, Sep במקום September). |
| showMonths | Integer | 1 | מספר החודשים שהוצגו. |
| static | Boolean | false | מקם את לוח השנה בתוך ה-wrapper וליד אלמנט הקלט. |
| time_24hr | boolean | false | מציג את ה-time picker במצב 24 שעות ללא בחירת AM/PM כאשר מופעל. |
| weekNumbers | Boolean | false | מאפשר הצגה של מספרי שבועות בלוח השנה. |
| wrap | Boolean | false | אלמנטים מותאמים אישית וקבוצות קלט |
בדוק את תיעוד flatpickr לפרטים נוספים.