Làm cách nào để hỗ trợ <input type = “date”> trên tất cả các trình duyệt? Bất kỳ lựa chọn thay thế?

83

Tôi đang làm việc với các thuộc tính đầu vào phần tử HTML5 và chỉ Google Chrome mới hỗ trợ các thuộc tính ngày, giờ. Tôi đã thử Modernizr nhưng tôi không thể hiểu cách tích hợp nó trên trang web của mình (về cách viết mã / cú pháp / bao gồm). Bất kỳ đoạn mã nào ở đó về cách làm việc với các thuộc tính ngày, giờ cho tất cả các trình duyệt.

javascript  jquery  html  jquery-ui 
— leonardeveloper
nguồn
Bạn đang sử dụng Datepicker kiểu kiểm soát nào ?? có lẽ giao diện người dùng JQuery sẽ hoàn hảo ??
— Sebastien
10
Xin lưu ý rằng nếu bạn chưa dựa vào jQueryUI cho một thứ gì đó, thì việc bao gồm trọng lượng khổng lồ của nó chỉ để nhập ngày tháng sẽ không phải là một quyết định mặc định.
— jfmatt
Một ví dụ đầy đủ được cung cấp tại html5doctor.com/…
— koppor

Câu trả lời:

116

Bất kỳ trình duyệt mà không hỗ trợ các loại đầu vào datesẽ mặc định loại tiêu chuẩn, đó là text, vì vậy tất cả các bạn phải làm là kiểm tra các loại tài sản (không phải là thuộc tính) , nếu nó không phải date, đầu vào ngày không được hỗ trợ bởi trình duyệt, và bạn thêm công cụ chọn ngày của riêng mình:

if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}

VĨ CẦM

Tất nhiên, bạn có thể sử dụng bất kỳ trình chọn ngày nào bạn muốn, trình chọn ngày của jQuery UI có lẽ là công cụ thường được sử dụng nhất, nhưng nó thêm khá nhiều javascript nếu bạn không sử dụng thư viện giao diện người dùng cho bất kỳ thứ gì khác, nhưng có hàng trăm trình chọn ngày thay thế để lựa chọn.

Các typethuộc tính không bao giờ thay đổi, trình duyệt sẽ chỉ rơi trở lại mặc định textkiểu cho bất động sản, vì vậy người ta phải kiểm tra tài sản.
Thuộc tính vẫn có thể được sử dụng như một bộ chọn, như trong ví dụ trên.

— adeneo
nguồn
1
Có thể tốt hơn nếu sử dụng jQuery để kiểm tra thuộc tính thay vì thả xuống DOM? $('input').prop('type') != 'date'
— IMSoP
9
DOM nhanh hơn phải không?
— reaper_unique
6
Trong khi "loại" của đầu vào thay đổi thành "văn bản" nếu "ngày" không được hỗ trợ, thuộc tính "loại" vẫn là "ngày". Vì vậy, điều này có thể dễ dàng được sử dụng như bộ chọn. Tôi đã cập nhật fiddle theo cách này: jsfiddle.net/2AaFk/34
— Michael Wyraz
2
@MichaelWyraz khi tôi kiểm tra fiddle của bạn, nó có vẻ như không hoạt động trên trình duyệt safari.
— Rishabh Seth
1
Điều này phù hợp với tôi, chỉ cần lưu ý rằng tôi không có css bắt buộc và tôi đã tìm thấy nó trên chuỗi này: stackoverflow.com/a/29791769/1339326 <link rel = "stylesheet" href = "// code.jquery.com /ui/1.11.2/themes/smoothness/jquery-ui.css ">
— magorich
14

Modernizr thực sự không thay đổi bất cứ điều gì về cách xử lý các loại đầu vào HTML5 mới. Đó là một tính năng dò , không phải là một shim (trừ <header>, <article>vv, mà nó miếng chêm để được xử lý như các yếu tố khối tương tự <div>).

Để sử dụng <input type='date'>, bạn cần kiểm tra Modernizr.inputtypes.datetập lệnh của riêng mình và nếu nó sai, hãy bật một plugin khác cung cấp công cụ chọn ngày. Bạn có hàng ngàn lựa chọn; Modernizr duy trì một danh sách không đầy đủ các polyfills có thể cung cấp cho bạn một nơi nào đó để bắt đầu. Ngoài ra, bạn có thể để nó đi - tất cả các trình duyệt trở lại textkhi được hiển thị với kiểu đầu vào mà họ không nhận ra, vì vậy điều tồi tệ nhất có thể xảy ra là người dùng của bạn phải nhập ngày. (Bạn có thể muốn cung cấp cho họ một trình giữ chỗ hoặc sử dụng thứ gì đó như jQuery.maskedinput để giữ cho họ đi đúng hướng.)

— jfmatt
nguồn
11

Bạn đã yêu cầu ví dụ về Modernizr, vì vậy bạn bắt đầu. Mã này sử dụng Modernizr để phát hiện xem loại đầu vào 'ngày tháng' có được hỗ trợ hay không. Nếu nó không được hỗ trợ, thì nó không thể quay lại bộ chọn ngày JQueryUI.

Lưu ý: Bạn sẽ cần tải xuống JQueryUI và có thể thay đổi đường dẫn đến các tệp CSS và JS trong mã của riêng bạn.

<!DOCTYPE html>
<html>
    <head>
        <title>Modernizer Detect 'date' input type</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
        <script type="text/javascript">
            $(function(){
                if(!Modernizr.inputtypes.date) {
                    console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead.");
                    $("#theDate").datepicker();
                }
            });
        </script>
    </head>
    <body>
        <form>
            <input id="theDate" type="date"/>
        </form>
    </body>
</html>

Tôi mong công việc này phù hợp với bạn.

— Tim S
nguồn
Lưu ý rằng đối Modernizr 3, bạn phải tạo ra các cấu hình sử dụng modernizr.com/download?inputtypes-setclasses và biên dịch javascript như đã mô tả ở modernizr.com/docs/#downloading-modernizr
— koppor
7 
   <script>
      var datefield = document.createElement("input")
      datefield.setAttribute("type", "date")
      if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
         document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
      }
   </script>

 <script>
    if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
       jQuery(function($) { // on document.ready
           $('#birthday').datepicker();
       }); <- missing semicolon
    }
 </script>


<body>
 <form>
   <b>Date of birth:</b>
   <input type="date" id="birthday" name="birthday" size="20">
   <input type="button" value="Submit" name="B1">
 </form>
</body>

NGUỒN 1 & NGUỒN 2

— Ritabrata Gautam
nguồn
6

Đây chỉ là một phần quan điểm, nhưng chúng tôi đã thành công lớn với WebShims . Nó có thể phân rã rõ ràng để sử dụng trình chọn ngày jQuery nếu bản gốc không khả dụng. Demo tại đây

— Antti Haapala
nguồn
2

Phiên bản Chrome 50.0.2661.87 m không hỗ trợ định dạng mm-dd-yy khi được gán cho một biến. Nó sử dụng yy-mm-dd. IE và Firefox hoạt động như mong đợi.

— Kelvin
nguồn
2

giải pháp dễ dàng và hiệu quả nhất mà tôi đã tìm thấy là làm việc trên các trình duyệt sau

  1. Google Chrome
  2. Firefox
  3. Microsoft Edge

  4. Safari

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h2>Poly Filler Script for Date/Time</h2>
<form method="post" action="">
    <input type="date" />
    <br/><br/>
    <input type="time" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {type: 'date'});
  webshims.setOptions('forms-ext', {type: 'time'});
  webshims.polyfill('forms forms-ext');
</script>

</body>
</html>
— Kashif Latif
nguồn
0

Tôi đang gặp sự cố với điều này, duy trì định dạng dd / mm / yyyy của Vương quốc Anh, ban đầu tôi sử dụng câu trả lời từ adeneo https://stackoverflow.com/a/18021130/243905 nhưng điều đó không hoạt động trong safari đối với tôi nên tôi đã thay đổi thành này, mà theo như tôi có thể nói là hoạt động - sử dụng trình chọn ngày jquery-ui, xác thực jquery.

if ($('[type="date"]').prop('type') !== 'date') {
    //for reloading/displaying the ISO format back into input again
    var val = $('[type="date"]').each(function () {
        var val = $(this).val();
        if (val !== undefined && val.indexOf('-') > 0) {
            var arr = val.split('-');
            $(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
        }
    });

    //add in the datepicker
    $('[type="date"]').datepicker(datapickeroptions);

    //stops the invalid date when validated in safari
    jQuery.validator.methods["date"] = function (value, element) {
        var shortDateFormat = "dd/mm/yy";
        var res = true;
        try {
            $.datepicker.parseDate(shortDateFormat, value);
        } catch (error) {
            res = false;
        }
        return res;
    }
}
— nat
nguồn
0 
<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
    var datefield = document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
</script>

<script>
    if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
        jQuery(function($) { // on document.ready
            $('#start_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
            $('#end_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        })
    }
</script>
</head>
<body>
    <input name="start_date" id="start_date" type="date" required>
    <input name="end_date" id="end_date" required>
</body>
</html>
— Amol Shirude
nguồn
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 cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.