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