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

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

ที่มา

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

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

Stack Overflow

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

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

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

การเรียก showPicker() ในองค์ประกอบ <input> จะแสดงเครื่องมือเลือกเบราว์เซอร์แก่ผู้ใช้ โดยจะต้องเรียกใช้เพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้ เช่น ท่าทางสัมผัสการแตะหรือการคลิกเมาส์ มิเช่นนั้น จะดำเนินการไม่สำเร็จโดยมีข้อยกเว้น NotAllowedError ด้วยเหตุผลด้านความปลอดภัย URL จะแสดงผลข้อยกเว้น 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() ที่ไม่เป็นไปตามที่คุณคาดไว้ไหม หรือมีวิธีหรือพร็อพเพอร์ตี้ที่คุณจำเป็นต้องใช้เพื่อนำแนวคิดไปปฏิบัติจริงไหม หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลการรักษาความปลอดภัย

• ให้ส่งปัญหาข้อมูลจำเพาะในที่เก็บ GitHub สำหรับ WHATWG หรือเพิ่มความเห็นของคุณเกี่ยวกับปัญหาที่มีอยู่

มีปัญหาเกี่ยวกับการติดตั้งใช้งานใช่ไหม

คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่ หรือการใช้งานแตกต่างจากข้อกำหนด

• รายงานข้อบกพร่องที่ https://new.crbug.com อย่าลืมใส่รายละเอียดให้มากที่สุดเท่าที่จะทำได้ และคำแนะนำง่ายๆ ในการทำซ้ำ Glitch เหมาะสำหรับการแชร์คำแนะนำที่ทำซ้ำได้ง่ายและรวดเร็ว

แสดงการสนับสนุน

คุณกำลังวางแผนที่จะใช้ showPicker() ใช่ไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนดังกล่าวมีความสำคัญเพียงใด

ส่งทวีตไปที่ @ChromiumDev และบอกเราว่าคุณใช้งานฟีเจอร์นี้ที่ไหนและอย่างไร

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

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

กิตติกรรมประกาศ

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