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

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

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

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

ขอขอบคุณ

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