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 sử dụng các thư viện tiện ích tuỳ chỉnh hoặc các thủ thuật để hiển thị bộ chọn ngày. Nền tảng web hiện đi kèm với phương thức HTMLInputElement showPicker(), một cách chính tắc để hiển thị bộ chọn trình duyệt không chỉ cho ngày mà còn cho 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 thành phần điều khiển như ngày theo phương thức lập trình
?

Stack Overflow

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

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

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

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

Việc gọi showPicker() trên phần tử <input> sẽ hiển thị bộ chọn trình duyệt cho người dùng. Bạn phải gọi phương thức này để 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, phương thức này sẽ không thành công với ngoại lệ NotAllowedError. Vì lý do bảo mật, thao tác này sẽ gửi một ngoại lệ SecurityError khi được gọi trong iframe trên nhiều nguồn gốc.

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 biết cách mở bộ chọn ngày trên 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ụ bên dưới cho bạn biết cách mở một bộ chọn của 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 sử dụng:

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

Bản minh hoạ

Bạn có thể xem bản minh hoạ tại https://show-picker.glitch.me/demo.html để sử dụng tất cả bộ chọn mà trình duyệt hỗ trợ.

Hỗ trợ trình duyệt

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

Bước tiếp theo

Tại thời điểm viết bài, showPicker() là một tính năng mới trên nền tảng web. Tính năng này có thể cần bạn thực hiện thêm một số thao tác trong tương lai:

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

Phản hồi

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

Giới thiệu về thiết kế

showPicker() có hoạt động như mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu để 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ó phát hiện 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à các hướng dẫn đơn giản để tái tạo. Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Thể hiện sự ủng hộ

Bạn có định dùng showPicker() không? Sự ủng hộ 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 thấy tầm quan trọng của việc hỗ trợ các tính năng đó.

Hãy gửi một tweet đến @ChromiumDev và cho chúng tôi biết bạn đang sử dụng công cụ này ở đâu và như thế nào.

Lời cảm ơn

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