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

Lâu nay, bạn phải dùng đến các thư viện tiện ích tuỳ chỉnh hoặc các giải pháp tạm thời để hiện bộ chọn ngày. Giờ đây, nền tảng web đ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 của 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 để lập trình
hiển thị bộ chọn cho các chế độ kiểm soát như ngày?

Stack Overflow

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

Tôi rất vui khi thông báo 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 trình chọn trình duyệt cho các phần tử <input> có các loại sau: "date", "month", "week", "time", "datetime-local", "color" và "file". Tính năng này cũng sẽ hoạt động cho các phần tử <input> có đề xuất dựa trên <datalist> hoặc "autocomplete". Chúng ta cũng sẽ đề cập đến vấn đề này trong bài viết này.

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

Cách hiện bộ chọn

Việc gọi showPicker() trên một phần tử <input> sẽ cho người dùng thấy một bộ chọn trình duyệt. 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 một ngoại lệ NotAllowedError. Vì lý do bảo mật, hệ thống 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.

Trình 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 thấy cách mở trình 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>

Trình chọn trình duyệt cũng có thể được điền sẵn các mục từ <datalist> hoặc "autocomplete".

Ví dụ dưới đây cho thấy cách mở trình 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 đối tượ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://cdpn.io/web-dot-dev/fullpage/LEVKVdr để dùng thử 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 thêm công việ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 thêm tính năng đó nếu các nhà phát triển web yêu cầu.
  • Chúng tôi có thể thêm một chính sách về quyền cho phép iframe trên nhiều nguồn hiển thị bộ chọn trình duyệt nếu chuỗi mẹ cho phép chúng làm như vậy.

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().

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

Có vấn đề gì về showPicker() mà bạn không hài lòng không? Hoặc 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 của mình không? Bạn có câu hỏi hoặc bình luận về mô hình bảo mật?

  • Gửi vấn đề về thông số kỹ thuật trên kho lưu trữ WHATWG GitHub hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

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

Bạn có phát hiện thấy lỗi trong quá trình triển khai của Chrome không? Hay việc triển khai có khác với quy cách không?

  • Báo cáo lỗi tại https://new.crbug.com. Nhớ cung cấp càng nhiều thông tin chi tiết càng tốt và hướng dẫn đơn giản để tái tạo lỗi.

Thể hiện sự ủng hộ

Bạn có dự đị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 này.

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

Lời cảm ơn

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