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 để
Stack Overflow
hiển thị bộ chọn cho các chế độ kiểm soát như ngày tháng?
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.
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áo cáo vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub WhatsApp hoặc thêm ý kiến vào vấn đề hiện có.
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.
Các đường liên kết hữu ích
- Tài liệu về MDN
- Nội dung giải thích về WhatsApp
- Thông số kỹ thuật của WhatsApp
- Xem xét TAG
- Bản minh hoạ | Nguồn minh hoạ
- Lỗi Chromium
- Mục ChromeStatus.com
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.