הצגת בוחר דפדפן להצגת תאריך, שעה, צבע וקבצים

פרנסואה בופורט
פרנסואה בופורט
GitHub

במשך תקופה ארוכה, הייתם צריכים להיעזר בפריצות או בספריות ווידג'טים בהתאמה אישית כדי להציג חלונית לבחירת תאריך. פלטפורמת האינטרנט כוללת עכשיו את השיטה HTMLinputElement showPicker(), דרך קנונית להציג בוחר דפדפן לא רק לתאריכים, אלא גם לזמן, לצבע ולקבצים.

רקע

בקשה נפוצה שאנחנו מקבלים ממפתחי אתרים:

איך אפשר
להציג באופן פרוגרמטי בוחר מתאים לאמצעי בקרה כמו תאריך?

Stack Overflow

התשובות הנוכחיות לא מוצלחות. הן מסתמכות על ספריות חיצוניות, על פריצות ל-CSS או על התנהגויות דפדפן ספציפיות, כמו הדמיית אינטראקציה של משתמש עם click().

אני שמחה לעדכן שהימים האלה יסתיימו בקרוב כשפלטפורמת האינטרנט תוסיף דרך קנונית להציג בוחר דפדפן לרכיבי <input> מהסוגים הבאים: "date", "month", "week", "time", "datetime-local", "color" ו-"file". הוא יפעל גם ברכיבי <input> עם הצעות שמבוססות על <datalist> או "autocomplete", שאותן נפרט גם במאמר הזה.

צילומי מסך של בוחרי דפדפנים
בוררי תאריכים של דפדפנים ב-Chrome למחשב, ב-Chrome לנייד, ב-Safari למחשב, ב-Safari לנייד וב-Firefox במחשב (יולי 2021).

איך להציג בורר

קריאה ל-showPicker() ברכיב <input> תציג למשתמש בוחר דפדפן. צריך להפעיל אותה בתגובה לתנועת משתמש, כמו תנועת מגע או לחיצת עכבר. אחרת, ההפעלה תיכשל עם חריג מסוג NotAllowedError. מטעמי אבטחה, היא תגרום לחריגת SecurityError כשהיא מופעלת ב-iframe ממקורות שונים.

בוחר דפדפן מוצג אם הרכיב <input> הוא אחד מהסוגים הבאים: "date", "month", "week", "time", "datetime-local", "color" או "file".

הדוגמה הבאה מראה איך לפתוח חלונית לבחירת תאריך בדפדפן.

<input type="date">
<button>Show the date picker</button>

<script>
  const button = document.querySelector("button");
  const dateInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      dateInput.showPicker();
      // A date picker is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

אפשר גם לאכלס מראש את בוחר הדפדפן בפריטים מ-<datalist> או מ-"autocomplete".

בדוגמה הבאה אפשר לראות איך לפתוח בוחר דפדפן באמצעות <datalist>.

<datalist id="ice-cream-flavors">
  <option value="Chocolate"> </option>
  <option value="Coconut"> </option>
  <option value="Mint"> </option>
  <option value="Strawberry"> </option>
  <option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>

<script>
  const button = document.querySelector("button");
  const iceCreamFlavorsInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      iceCreamFlavorsInput.showPicker();
      // A picker containing some ice cream flavors is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

זיהוי תכונות

כדי לבדוק אם showPicker() נתמך, משתמשים:

if ('showPicker' in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

הדגמה (דמו)

תוכלו להפעיל הדגמה (דמו) בכתובת https://show-picker.glitch.me/demo.html ועם כל הבוררים שנתמכים בדפדפן.

תמיכת דפדפן

showPicker() זמינה ב-Chrome 99 ואילך.

המאמרים הבאים

נכון לעכשיו, showPicker() הוא משתמש חדש בפלטפורמת האינטרנט. יכול להיות שיהיה צורך בפעולות נוספות בעתיד כדי להשתמש בתכונה:

  • יכול להיות שבעתיד נוסיף רכיב showPicker() דומה לרכיב <select>, אם מפתחי אתרים יבקשו אותו.
  • הקובץ closePicker() יכול להיות שימושי, ואנחנו יכולים להוסיף אותו אם מפתחי אתרים יבקשו זאת.
  • נוכל להוסיף מדיניות הרשאות שמאפשרת למסגרות iframe ממקורות שונים להציג בוררי דפדפנים, כששרשרת ההורה שלהם מאפשרת להם לעשות זאת.

משוב

צוות Chrome וקהילת תקני האינטרנט רוצים לשמוע על החוויות שלכם עם showPicker().

נשמח לשמוע על העיצוב

האם יש משהו ב-showPicker() שלא עובד כמו שציפית? או האם יש שיטות או מאפיינים חסרים שתצטרכו ליישם את הרעיון שלכם? יש לך שאלה או הערה לגבי מודל האבטחה?

  • אתם יכולים לשלוח דיווח על בעיה במפרט במאגר WhatsApp של GitHub, או לשתף את דעתכם לגבי בעיה קיימת.

נתקלת בבעיה בהטמעה?

האם גילית באג בהטמעה של Chrome? או האם ההטמעה שונה מהמפרט?

  • דווחו על באג בכתובת https://new.crbug.com, וחשוב לכלול כמה שיותר פרטים והוראות פשוטות לשחזור. גליץ' הוא כלי מצוין לשיתוף פיצויים מהירים וקלים.

הבעת תמיכה

יש לך כוונה להשתמש ב-showPicker()? התמיכה הציבורית שלכם עוזרת לצוות Chrome לתעדף תכונות, ומראה לספקי דפדפנים אחרים עד כמה חשוב לקבל תמיכה בתכונות האלה.

שלח ציוץ אל @ChromiumDev וספר לנו איפה אתה משתמש בו ובאיזה אופן.

אישורים

תודה ל-Joe Medley על קריאת המאמר הזה. תמונת יומן מאת אריק רות'רמל ב-Unwash.