Hiển thị bộ chọn của trình duyệt cho ngày, giờ, màu sắc và tệp

François Beaufort
François Beaufort
GitHub

Trong một thời gian dài, bạn đã phải dùng đến các thư viện tiện ích tuỳ chỉnh hoặc mẹo vặt để hiển thị bộ chọn ngày. Nền tảng web này hiện sử dụng phương thức showPicker() HTMLInputElement, một cách chuẩn để hiển thị bộ chọn trình duyệt không chỉ cho ngày mà còn cả thời gian, màu sắc và tệp.

Thông tin khái quát

Một yêu cầu thường xuyên mà chúng tôi nhận được từ các nhà phát triển web là:

Làm cách nào để
hiển thị bộ chọn cho các chế độ kiểm soát như ngày tháng?

Stack Overflow

Các câu trả lời hiện tại không hay lắm; chúng dựa vào thư viện bên ngoài, hành vi tấn công CSS hoặc các hành vi cụ thể của trình duyệt như mô phỏng tương tác của người dùng với click().

Tôi rất vui được thông báo rằng những ngày đó sẽ kết thúc ngay khi nền tảng web giới thiệu một cách chuẩn để hiển thị bộ chọn trình duyệt cho các phần tử <input> thuộc các loại sau: "date", "month", "week", "time", "datetime-local", "color" và "file". Điều này cũng sẽ hoạt động đối với các phần tử <input> có các đề xuất do <datalist> hoặc "autocomplete" cung cấp mà chúng tôi cũng đề cập trong bài viết này.

Ảnh chụp màn hình bộ chọn trình duyệt
Bộ chọn ngày của trình duyệt trong Chrome cho máy tính, Chrome dành cho thiết bị di động, Safari, Safari dành cho thiết bị di động và Firefox cho máy tính (tháng 7 năm 2021).

Cách hiển thị bộ chọn

Khi gọi showPicker() trên phần tử <input>, người dùng sẽ thấy một bộ chọn trình duyệt. Lệnh gọi phải được gọi để phản hồi một cử chỉ của người dùng, chẳng hạn như cử chỉ chạm hoặc nhấp chuột; nếu không, thao tác này sẽ bị lỗi với ngoại lệ NotAllowedError. Vì lý do bảo mật, trình xử lý này sẽ gửi một ngoại lệ SecurityError khi được gọi trong một iframe trên nhiều nguồn gốc.

Một bộ chọn trình duyệt sẽ xuất hiện khi phần tử <input> thuộc một trong các loại sau: "date", "month", "week", "time", "datetime-local", "color" hoặc "file".

Ví dụ bên dưới cho bạn thấy cách mở bộ chọn ngày của trình duyệt.

<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>

Bạn cũng có thể điền sẵn các mục từ <datalist> hoặc "autocomplete" vào bộ chọn trình duyệt.

Ví dụ dưới đây cho bạn biết cách mở bộ chọn trình duyệt bằng <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>

Phát hiện tính năng

Để kiểm tra xem showPicker() có được hỗ trợ hay không, hãy dùng:

if ('showPicker' in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

Bản minh hoạ

Bạn có thể truy cập vào https://show-picker.glitch.me/demo.html để xem bản minh hoạ này với mọi bộ chọn mà trình duyệt hỗ trợ.

Hỗ trợ trình duyệt

showPicker() có trong Chrome 99 trở lên.

Các bước tiếp theo

Tại thời điểm chúng tôi viết bài viết này, showPicker() mới đối với nền tảng web. Tính năng này có thể cần được cải tiến thêm trong tương lai:

  • Có thể sau này chúng ta sẽ thêm một showPicker() tương tự vào phần tử <select> nếu các nhà phát triển web yêu cầu.
  • closePicker() có thể sẽ hữu ích và chúng ta có thể cân nhắc thêm tính năng này nếu các nhà phát triển web yêu cầu.
  • Chúng tôi có thể thêm chính sách về quyền cho phép các iframe nhiều nguồn gốc hiển thị bộ chọn trình duyệt khi chuỗi gốc cho phép các iframe đó làm như vậy.

Ý kiến phản hồi

Nhóm Chrome và cộng đồng các tiêu chuẩn web muốn biết về trải nghiệm của bạn với showPicker().

Cho chúng tôi biết về thiết kế

Có điều gì đó về showPicker() không hoạt động như bạn mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần triển khai ý tưởng không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật?

Bạn gặp vấn đề khi triển khai?

Bạn có tìm thấy lỗi khi triển khai Chrome không? Hay cách triển khai có khác với thông số kỹ thuật không?

  • Gửi lỗi tại https://new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể và hướng dẫn đơn giản để tái tạo. Hiệu ứng cố định hình ảnh hoạt động hiệu quả khi bạn muốn chia sẻ tệp sao chép nhanh chóng và dễ dàng.

Hiển thị hỗ trợ

Bạn có định dùng showPicker() không? Sự hỗ trợ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác biết tầm quan trọng của việc hỗ trợ các tính năng đó.

Gửi một bài đăng trên Twitter đến @ChromiumDev để cho chúng tôi biết vị trí và cách bạn sử dụng công cụ này.

Xác nhận

Cảm ơn Joe Medley đã xem lại bài viết này. Ảnh lịch của Eric Rothermel trên Unsplash.