- Bài viết này là do kỹ sư phần mềm Chrome Kent Tamura viết.
Như bạn có thể đã nhận thấy, Google Chrome hỗ trợ bộ 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 tuyệt vời.
Vì nhận được nhiều ý kiến phản hồi của các nhà phát triển nên chúng tôi muốn làm rõ một số điều về cách khai thác tối đa 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 có cách nào để thay đổi định dạng ngày vì hiện chưa có tiêu chuẩn nào để chỉ định định dạng đó.
Giá trị nhập 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, chẳng hạn như GET / POST, sẽ được định dạng là yyyy-mm-dd.
Giá trị nhập vào sẽ trả về loại định dạng nào?
input.value luôn trả về dưới dạng yyyy-mm-dd bất kể định dạng bản trình bày.
Giá trị nhập vào chấp nhận loại định dạng nào?
Khi thiết lập 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 bản trình bày đối với 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?
Hiện tại, bạn không thể tạo kiểu cho giao diện của bộ chọn ngày. Trong STDEV, trước đây chúng tôi đã cung cấp các cách để tạo kiểu cho các thành phần kiểm soát 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ổ lịch bật lên không cung cấp những cách như vậy trong STDEV 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 chưa có tiêu chuẩn về cách kiểm soát kiểu trên các phần tử phụ.
Làm cách nào để tránh xung đột giữa bộ chọn ngày jQuery và bộ chọn ngày gốc?
Nếu đã thử dùng jQuery Datepicker trên input[type=date] trong Google Chrome, bạn có thể đã nhận thấy sự chồng chéo lịch của cả giao diện người dùng jQuery và cửa sổ lịch gốc bật lên.
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òn trên iOS Safari, trình duyệt BlackBerry và Opera có giao diện người dùng riêng cho input[type=date] và hiện chưa có cách nào để có được giao diện người dùng hợp nhất trên tất cả nền tảng bằng cách 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 Advancedizr 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();