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

François Beaufort
François Beaufort
GitHub

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

רקע

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

איך מציגים באופן פרוגרמטי
בורר לפקדים כמו תאריך?

Stack Overflow

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

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

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

איך מציגים בורר

קריאה ל-showPicker() ברכיב <input> מציגה למשתמש בורר דפדפנים. צריך לקרוא ל-onTap בתגובה לתנועת משתמש, כמו תנועת מגע או לחיצה על העכבר. אחרת, הפונקציה תיכשל עם חריגה מסוג 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() שימושי, ואנחנו נוכל לשקול להוסיף אותו אם מפתחי אתרים יבקש זאת.
  • אפשר להוסיף מדיניות הרשאות שמאפשרת ל-iframes ממקורות שונים להציג בוררי דפדפנים כששרשרת ההורה שלהם מאפשרת להם לעשות זאת.

משוב

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

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

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

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

בעיה בהטמעה?

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

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

הצגת תמיכה

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

אפשר לשלוח ציוץ אל ‎@ChromiumDev ולספר לנו איפה ואיך אתם משתמשים בו.

תודות

תודה ל-Joe Medley על בדיקת המאמר הזה. תמונת הרקע של יומן Google היא צילום של Eric Rothermel ב-Unsplash.