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

François Beaufort
François Beaufort
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. מטעמי אבטחה, אם מתבצעת קריאה ל-API ב-iframe ממקורות שונים, הוא יחזיר חריגה מסוג SecurityError.

בורר הדפדפנים מוצג כשהרכיב <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://cdpn.io/web-dot-dev/fullpage/LEVKVdr. תוכלו להתנסות בכל כלי הבחירה שנתמכים בדפדפן.

תמיכה בדפדפנים

‫showPicker() זמין ב-Chrome 99 ואילך.

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

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

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

משוב

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

מתארים את העיצוב

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

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

בעיה בהטמעה?

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

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

תמיכה ביוצרים

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

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

תודות

תודה לג'ו מדלי על בדיקת המאמר הזה. תמונה של יומן מאת Eric Rothermel ב-Unsplash.