- Bài viết này do Kent Tamura, kỹ sư phần mềm của Chrome, viết.
Như bạn có thể đã nhận thấy, Google Chrome hỗ trợ trình chọn ngày kể từ Chrome 20. Chỉ cần đặt thuộc tính type của phần tử input thành date, người dùng có thể nhấp vào nút mũi tên và Chrome sẽ bật lên một tiện ích lịch đẹp mắt.
Chúng tôi đã nhận được nhiều ý kiến phản hồi của nhà phát triển, vì vậy, chúng tôi muốn làm rõ một số điều về cách khai thác tối đa tính năng bộ chọn ngày trong bài viết này.
Ngôn ngữ ảnh hưởng như thế nào đến định dạng ngày của giá trị nhập?
Người dùng có thể nhập giá trị ngày vào trường văn bản của input[type=date] với định dạng ngày hiển thị trong hộp dưới dạng văn bản màu xám. Định dạng này được lấy từ chế độ cài đặt của hệ điều hành.
Tác giả web không thể thay đổi định dạng ngày vì hiện không có tiêu chuẩn nào để chỉ định định dạng này.
Giá trị đầu vào được biểu thị như thế nào khi gửi đến máy chủ?
Giá trị ngày được diễn giải từ input[type=date] trong Yêu cầu HTTP như GET / POST sẽ được định dạng là yyyy-mm-dd.
Giá trị đầu vào trả về định dạng nào?
input.value luôn trả về dưới dạng yyyy-mm-dd bất kể định dạng trình bày.
Giá trị đầu vào chấp nhận loại định dạng nào?
Khi đặt input.value theo phương thức lập trình, giá trị này chỉ chấp nhận kiểu yyyy-mm-dd bất kể định dạng trình bày cho cả giá trị ban đầu và giá trị được chèn JavaScript.
Làm cách nào để thay đổi giao diện của bộ chọn ngày?
Bạn hiện không thể tạo kiểu cho giao diện của bộ chọn ngày. Trong WebKit, trước đây chúng tôi đã cung cấp các cách tạo kiểu cho các chức năng điều khiển biểu mẫu bằng thuộc tính CSS -webkit-appearance hoặc bộ chọn lớp giả ::-webkit-foo. Tuy nhiên, cửa sổ bật lên của lịch không cung cấp những cách như vậy trong WebKit vì nó tách biệt với tài liệu, chẳng hạn như trình đơn bật lên cho <select> và hiện không có tiêu chuẩn nào về cách kiểm soát kiểu trên các phần tử phụ của nó.
Làm cách nào để tránh xung đột giữa jQuery Datepicker và bộ chọn ngày gốc?
Nếu đã thử jQuery Datepicker trên input[type=date] trong Google Chrome, bạn có thể nhận thấy các lịch chồng chéo của cả giao diện người dùng jQuery và cửa sổ bật lên của lịch gốc.
Nếu bạn muốn áp dụng jQuery Datepicker trên tất cả nền tảng, hãy sử dụng input[type=text] thay vì input[type=date]. Không chỉ Google Chrome mà cả iOS Safari, trình duyệt BlackBerry và Opera đều có giao diện người dùng riêng cho input[type=date] và hiện không có cách nào để có được giao diện người dùng hợp nhất trên tất cả các nền tảng sử dụng input[type=date].
Nếu chỉ muốn áp dụng jQuery Datepicker trên các nền tảng không hỗ trợ input[type=date], bạn có thể sử dụng Modernizr hoặc mã sau:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();