- המאמר הזה נכתב על ידי מהנדס התוכנה של 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 Datepicker לבין בורר התאריכים המקורי?
אם ניסיתם את jQuery Datepicker ב-input[type=date] ב-Google Chrome, יכול להיות שראיתם יומנים חופפים של ממשק המשתמש של jQuery ושל חלון הקופץ המקורי של היומן.
אם רוצים להחיל את jQuery Datepicker בכל הפלטפורמות, צריך להשתמש ב-input[type=text] במקום ב-input[type=date]. לא רק ל-Google Chrome יש ממשק משתמש משלו ל-input[type=date], אלא גם ל-iOS Safari, לדפדפן BlackBerry ול-Opera. בשלב זה אין דרך ליצור ממשק משתמש מאוחד בכל הפלטפורמות באמצעות 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();