בורר תאריכים HTML5

לאחרונה פרסמתי שהחלטתי להשתמש באופרה בהפגנות HTML5 שלי לימי ההדרכה של RMOUG 2011. כפי שציינתי באותה פוסט, סיבה גדולה להוספת דפדפן האינטרנט אופרה לסט המוצג היא שהיא תומכת בחלק מהתכונות של HTML5. טוב יותר משאר הדפדפנים. פוסט זה ימחיש אחד מהמקרים הללו: בוחרי התאריכים HTML5.

אחד הדברים הקטנים אך הנחמדים בשימוש ב- Flex או בספריית JavaScript כמו JQuery הוא הזמינות של מנגנונים מובנים לבקרות קלט ידידותיות למשתמש. בפרט, בורר תאריכים טוב תמיד זוכה להערכה.

HTML5 מתוכנן כעת להציע יישומון רגיל לבחירת תאריכים שניתן להשתמש בו עם תגי HTML. בפוסט זה אני מסתכל על מצב בוחרי התאריכים HTML5 בגרסאות האחרונות שאינן בטא של חמישה דפדפני אינטרנט פופולריים (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 ו- Opera 11).

HTML תומך בשדות קלט שונים באמצעות תג הקלט. הסוגים השונים של שדות קלט מוגדרים באמצעות תכונת inputהאלמנט type. HTML5 מגדיל באופן דרמטי את מספר ה- types הזמינים שניתן לציין. אחדים מן הערכים החדשים עבור typeהתכונה כולל אלה הקשורים תאריך / שעה: date, datetime, datetime-local, month, week, ו time. כל אחד מאלה מתואר בקטע קוד ה- HTML הבא.

   HTML5 Date Pickers Demonstrated    
    
Input Type Input Field
date
datetime
datetime-local
month
week
time

מבין חמשת דפדפני האינטרנט שרשמתי בעבר, Opera מספקת את היישום המשוכלל ביותר של התאריך / שעה typeשל inputהתג. החל מהחיובי, כמה תמונות המסך הראשונות מראות כיצד HTML פשוט זה מעבד באופרה 11.

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

מאפיין "תאריך" לתג קלט אופרה 11

מאפיין תווית קלט "datetime" של Opera 11

מאפיין קלט אופרה 11 "datetime-local"

תכונת קלט "חודש" של אופרה 11

היישום של אופרה מדגיש את כל החודש שייבחר.

תכונת קלט "שבוע" של אופרה 11

אופרה מדגישה את השבוע שייבחר.

מאפיין "זמן" לתג קלט אופרה 11

אופרה 11 - כל שדות הקלט שנבחרו

היישום של אופרה בשדות קלט התאריך / שעה מרשים. הלוואי ואפשר לומר את אותו הדבר לגבי שאר הדפדפנים שאינם בטא. למרבה הצער, הדפדפנים האחרים אינם מספקים תמיכה בסוגי שדות אלה בשום מקום קרוב לאלגנטי זה. למעשה, אני לא חושב שכדאי אפילו לכלול כאן את כל צילומי המסך שלהם. במקום זאת, אני פשוט מראה תמונת מסך של כל אחד מהם לאחר מילוי כל השדות. ברוב המקרים, הדפדפנים פשוט התייחסו לשדות אלה כאל שדות פשוטים מסוג "טקסט".

Firefox 3.6 בוחרים תאריכים: הם רק טקסט

בוחרי תאריכים 8 של Internet Explorer: הם רק טקסט

ספארי 5 בוחרי תאריכים: הם רק טקסט עם הדגשת פוקוס

כרטיסי 8 תאריכים: לא ממש שם

אמנם לא אלגנטי כמו הטיפול של אופרה בשדות תאריך / שעה, אך דפדפן Chrome מתייחס לשדות אלה כאל יותר מטקסט ומגביל את מה שאפשר להזין בשדות. למרבה הצער, אין חלונות קופצים לבחירת תאריך / שעה נחמדים כמו אופרה. ובכל זאת, הדגשת השדה הממוקדת נחמדה והעובדה שהנתונים שנבחרו הם מעט תאריך / שעה כמו בפורמט עוזרת.

סיכום

אני מצפה ליום שבו הדפדפנים העיקריים תומכים בעקביות בבקרות תאריך / שעה סטנדרטיות, כך שתגי "קלט" פשוטים של HTML עם המאפיינים המתאימים יהפכו לבוחרי תאריך / שעה אלגנטיים ומסוגננים בכל דפדפן. אופרה 11 מובילה כיום את החבילה ומספקת את ההמחשה הטובה ביותר למה שיכול להיות.

סיפור זה, "HTML5 Picker Picker" פורסם במקור על ידי JavaWorld.