מאמר זה מדגים את השימוש ב-input type=“date” ב-HTML יחד עם היישום המעשי.
כיצד להשתמש ב-input type='date' ב-HTML?
ניתן להשתמש ב'סוג הקלט='נתונים'' באתרים שונים, כמו אתרי בריאות, אתרי הזמנות של חברות תעופה, אתרי מסחר אלקטרוני, אתרי רשתות חברתיות וכו'. התחביר של בוחר התאריכים מצוין להלן:
< קֶלֶט סוּג = 'תַאֲרִיך' תְעוּדַת זֶהוּת = '' שֵׁם = '' >
התכונות המשמשות בקטעי הקוד לעיל הן:
- קודם ה ' סוּג ' תכונה מאפשרת לשדה הקלט לפעול כבוחר תאריכים שממנו המשתמש יכול לבחור כל תאריך.
- לאחר מכן, ה' תְעוּדַת זֶהוּת ' תכונה מגדירה את הייחודיות של אותו אלמנט. על ידי שימוש בו, ניתן לבחור את האלמנט ויכול להחיל פונקציונליות של JavaScript.
- לאחר מכן, ה' שֵׁם ' תכונה מציינת את השם של אותו אלמנט. הוא מספק עזרה בתהליך האימות לקבלת הערך של האלמנט הנבחר.
כדי לשפר את רמת ההבנה, הבה נעבור על דוגמאות שונות:
דוגמה 1: שימוש ב-type= 'date' ב-HTML
בקובץ HTML, צור ' <טופס> ' תג ליצירת מיכל טופס והכנס את שורת הקוד הבאה:
< טופס >
< תווית ל = 'תאריך הצטרפות' > בחר את תאריך ההצטרפות שלך: < / תווית >
< קֶלֶט סוּג = 'תַאֲרִיך' תְעוּדַת זֶהוּת = 'תאריך הצטרפות' שֵׁם = 'תאריך הצטרפות' >
< / טופס >
בקטע הקוד שלמעלה:
- קודם ה ' <תווית> נעשה שימוש בתג שבו נתוני דמה ממוקמים והערך של ' תאריך הצטרפות ' סופקה ל' ל ' תכונה.
- לאחר מכן, ה' <קלט> 'תג משמש עם הערך של ' תַאֲרִיך 'ל' שלו סוּג ' תכונה.
- לאחר מכן, הגדר את הערך של ' תאריך הצטרפות ' אל ה ' תְעוּדַת זֶהוּת ' תכונה. כמו כן, הגדר את הערך של ' שֵׁם ” תכונה לפי הצורך.
לאחר ביצוע קטע הקוד לעיל, דף האינטרנט מופיע כך:
ה-GIF שלמעלה ממחיש שבוחר התאריכים נוצר באמצעות input type= 'data' ב-HTML.
דוגמה 2: אחזור תאריך באמצעות JavaScript
כדי לאחזר את הנתונים, משתמשים יכולים להשתמש בפונקציונליות של JavaScript. להבנה טובה יותר, בקר בגוש הקוד שלהלן:
< לַחְצָן בלחיצה = 'retrieveDate()' >קבל תאריך< / לַחְצָן >< תַסרִיט סוּג = 'טקסט/Javascript' >
פונקציה retrieveDate ( ) {
היה תאריך קלט = document.getElementById ( 'תאריך הצטרפות' ) ;
var selectedDate = קלט תאריך. ערך ;
עֵרָנִי ( 'תאריך נבחר:' + תאריך נבחר ) ;
}
< / תַסרִיט >
בקטע הקוד שלמעלה:
- קודם ה ' retrieveDate() ' הפונקציה נוצרת בתוך '