Làm cách nào để biết liệu trình duyệt có hỗ trợ <input type = 'date'> hay không


82

Có thể trùng lặp:
Phát hiện loại HTML5 và Khởi tạo plugin

<input type=date>

Nên tạo một đầu vào với một datepicker do user-agent (tùy chọn) cung cấp, nhưng nó chưa được hỗ trợ rộng rãi, vì vậy chúng tôi đang sử dụng một Datepicker giao diện người dùng jQuery. Làm cách nào chúng tôi có thể cho phép các trình duyệt sử dụng trình chọn ngày của riêng họ và chỉ quay lại giao diện người dùng jQuery nếu trình duyệt không có thứ đó?

Hiện tại, tôi nghĩ rằng chỉ Opera có trình chọn ngày được tích hợp sẵn, nhưng một bài kiểm tra cho Opera rõ ràng sẽ rất tệ. Có cách nào để phát hiện tính năng này (nếu có thể theo cách di động)?


1
Việc phát hiện hỗ trợ ngày rất phức tạp do các trình duyệt khác nhau hỗ trợ ngày ở các cấp độ khác nhau. Một số cung cấp bộ chọn ngày lịch đẹp. Những người khác chỉ xác nhận nó giống như một ngày.
rjmunro 14/09/12

2
Chính xác lý do tại sao tôi đặt câu hỏi. Tôi muốn biết liệu trình duyệt có bộ chọn ngày hay không, chứ không phải nếu nó tuyên bố hiểu các đầu vào ngày. AFAICT không phải là bản sao và các câu trả lời dưới đây không giúp ích gì. Tôi chỉ chưa bao giờ cập nhật hoặc cạnh tranh. Tôi chỉ <input class=datepicker>sử dụng và luôn sử dụng trình chọn ngày của jquery ui (theo cách cũ).
DaedalusFall

1
Cần lưu ý rằng trên các trình duyệt máy tính để bàn, giao diện người dùng nhập ngày thường để lại thứ gì đó mong muốn. Ngay cả khi họ hỗ trợ nó, bạn có thể không muốn sử dụng nó. Sự cố này dường như không ảnh hưởng đến trình duyệt di động.
rich remer

Câu trả lời:


132

Phương pháp dưới đây kiểm tra xem một số loại đầu vào có được hầu hết các trình duyệt hỗ trợ hay không:

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

Tuy nhiên, như simonox đã đề cập trong các nhận xét, một số trình duyệt (như trình duyệt Android gốc) giả vờ rằng chúng hỗ trợ một số loại (như ngày tháng), nhưng chúng không cung cấp giao diện người dùng cho đầu vào ngày tháng. Vì vậy, simonox đã cải thiện việc triển khai bằng cách sử dụng thủ thuật đặt một giá trị bất hợp pháp vào trường ngày. Nếu trình duyệt xóa thông tin nhập này, nó cũng có thể cung cấp trình chọn ngày !!!

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}

8
Không hoạt động trong trình duyệt cổ android, nó trả về true nhưng không có hỗ trợ cho datepicker
Björn Andersson

33
Yêu cầu thuộc tính type không hoạt động trong tất cả các trình duyệt Android stock. Họ giả vờ htat họ hỗ trợ inputType = date, nhưng họ không cung cấp giao diện người dùng cho các đầu vào ngày tháng. Tính năng phát hiện này phù hợp với tôi: function () {var el = document.createElement ('input'), notADateValue = 'not-a-date'; el.setAttribute ('type', 'date'); el.setAttribute ('giá trị', notADateValue); return! (el.value === notADateValue); } Bí quyết là đặt một giá trị không hợp lệ vào một trường ngày tháng. Nếu trình duyệt xóa thông tin nhập này, nó cũng có thể cung cấp trình chọn ngày.
simonox

@simonox: một giải pháp rất tốt. Cảm ơn cho điều đó
Bartłomiej Zalewski

3
Ý bạn là '! ===' = '! =='? :)
Matty Balaam

1
@MattyBalaam Rõ ràng đó là một lỗi cú pháp. Tôi đã sửa nó :)
Ionică Bizău
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.