- המאמר הזה נכתב על ידי מהנדס התוכנה של Chrome, קנט טאמורה (Kent Tamura).
כפי שכבר שמתם לב, Google Chrome תומך בחלונית לבחירת תאריך מאז גרסה 20 של Chrome. פשוט מגדירים את המאפיין type של הרכיב input לערך date, והמשתמש יכול ללחוץ על לחצן החץ וב-Chrome תופיע ווידג'ט נחמד של לוח שנה.
קיבלנו הרבה משוב ממפתחים, ולכן רצינו להבהיר כמה פרטים על האופן שבו אפשר להפיק את המרב מהשימוש בבורר התאריכים במאמר הזה.
איך השפה והאזור משפיעים על פורמט התאריך של ערך הקלט?
המשתמשים יכולים להקליד ערך תאריך בשדה הטקסט של input[type=date], כאשר פורמט התאריך מוצג בתיבה כטקסט אפור. הפורמט הזה מתקבל מההגדרה של מערכת ההפעלה.
אין לכותבי האינטרנט אפשרות לשנות את פורמט התאריך כי אין כרגע תקנים לציון הפורמט.
איך ערך הקלט מיוצג כששולחים אותו לשרת?
ערך התאריך שיפורש מ-input[type=date] בבקשת ה-HTTP, כמו GET או POST, יותאם לפורמט yyyy-mm-dd.
איזה פורמט מוחזר על ידי ערך הקלט?
הערך של input.value תמיד מוחזר כ-yyyy-mm-dd, ללא קשר לפורמט ההצגה.
איזה סוג פורמט מתקבל בערך הקלט?
כשמגדירים את input.value באופן פרוגרמטי, הערך מקבל רק סגנון yyyy-mm-dd, ללא קשר לפורמט ההצגה של הערך הראשוני וגם של הערך שהוחדר ל-JavaScript.
איך משנים את המראה של החלונית לבחירת תאריך?
בשלב הזה לא ניתן לעצב את המראה של החלונית לבחירת תאריך. כבר סיפקנו ב-WebKit דרכים לעצב את פקדי הטפסים באמצעות מאפיין ה-CSS -webkit-appearance או בורר המחלקות המדומה ::-webkit-foo. עם זאת, חלון הקופץ של היומן לא מספק דרכים כאלה ב-WebKit כי הוא נפרד מהמסמך, כמו תפריט קופץ של <select>, ואין כרגע תקן לדרך שבה שולטים בסגנון של רכיבי המשנה שלו.
כיצד ניתן למנוע התנגשויות בין בורר התאריך של jQuery לבורר התאריכים המקורי?
אם ניסיתם את jQuery Datepicker ב-input[type=date] ב-Google Chrome, יכול להיות שראיתם יומנים חופפים של ממשק המשתמש של jQuery ושל חלון הקופץ המקורי של היומן.
אם רוצים להחיל את jQuery Datepicker בכל הפלטפורמות, צריך להשתמש ב-input[type=text] במקום ב-input[type=date]. לא רק ל-Google Chrome אלא גם ל-iOS Safari, לדפדפן BlackBerry ול-Opera יש ממשק משתמש משלהם עבור input[type=date], וכרגע אין דרך להשיג ממשק משתמש מאוחד בכל הפלטפורמות באמצעות input[type=date].
אם רוצים להחיל את jQuery Datepicker רק בפלטפורמות ללא תמיכה ב-input[type=date], אפשר להשתמש ב-Modernizr או בקוד הבא:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();