แสดงเครื่องมือเลือกเบราว์เซอร์สำหรับวันที่ เวลา สี และไฟล์

François Beaufort

เป็นเวลานานที่คุณต้องใช้ไลบรารีวิดเจ็ตที่กำหนดเองหรือการแฮ็กเพื่อแสดงเครื่องมือเลือกวันที่ ตอนนี้แพลตฟอร์มเว็บมาพร้อมกับเมธอด HTMLInputElement showPicker() ซึ่งเป็นวิธีมาตรฐานในการแสดงเครื่องมือเลือกของเบราว์เซอร์ ไม่ใช่แค่สำหรับวันที่ แต่ยังรวมถึงเวลา สี และไฟล์ด้วย

ฉากหลัง

คำขอที่พบบ่อยที่เราได้รับจากนักพัฒนาเว็บมีดังนี้

ฉันจะแสดงเครื่องมือเลือกสำหรับตัวควบคุม เช่น วันที่ โดยใช้โปรแกรม
ได้อย่างไร

Stack Overflow

คำตอบปัจจุบันยังไม่ดีนัก เนื่องจากต้องอาศัยไลบรารีภายนอก กลเม็ด CSS หรือลักษณะการทำงานของเบราว์เซอร์ที่เฉพาะเจาะจง เช่น การจำลองการโต้ตอบของผู้ใช้กับ click()

เรายินดีที่จะแจ้งให้ทราบว่าปัญหาดังกล่าวจะหมดไปในเร็วๆ นี้ เนื่องจากแพลตฟอร์มเว็บกำลัง เปิดตัววิธีมาตรฐานในการแสดงตัวเลือกเบราว์เซอร์สำหรับองค์ประกอบ <input> ที่มี ประเภทต่อไปนี้ "date", "month", "week", "time", "datetime-local", "color" และ "file" นอกจากนี้ ยังใช้ได้กับองค์ประกอบ <input> ที่มีคำแนะนำซึ่งขับเคลื่อนโดย <datalist> หรือ "autocomplete" ซึ่งเราจะกล่าวถึงในบทความนี้ด้วย

วิธีแสดงเครื่องมือเลือก

การเรียกใช้ 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://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 และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ใดและอย่างไร

ลิงก์ที่มีประโยชน์

• เอกสารประกอบของ MDN
• คำอธิบายของ WHATWG
• ข้อกำหนดของ WHATWG
• การตรวจสอบ TAG
• เดโม | แหล่งที่มาของเดโม
• ข้อบกพร่องของ Chromium
• รายการใน ChromeStatus.com

การรับทราบ

ขอขอบคุณ Joe Medley ที่ตรวจสอบบทความนี้ รูปภาพปฏิทินโดย Eric Rothermel ใน Unsplash