Cách nhận loại đầu vào HTML 5 = Ngày hẹn hò làm việc trong Firefox và / hoặc IE 10

Tôi thấy thật kỳ lạ khi input type="date"vẫn không được hỗ trợ trong Firefox sau tất cả thời gian này. Trên thực tế, tôi không nghĩ rằng họ đã thêm nhiều (nếu có) trong HTML 5 loại mới vào một yếu tố đầu vào. Không ngạc nhiên khi nó không được hỗ trợ trong IE10. Vì vậy, câu hỏi của tôi là ...

Làm thế nào để có được type="date"một inputphần tử hoạt động mà không cần thêm, nhưng một tệp .js khác (cụ thể là jQueryUIDatePicker Widget) chỉ để lấy lịch / ngày chỉ cho Trình duyệt IE và Firefox? Có cái gì đó ngoài kia có thể được áp dụng ở đâu đó (có lẽ là CDN?) Sẽ làm cho chức năng này hoạt động theo mặc định trong Firefox và / hoặc Trình duyệt IE ?? Cố gắng nhắm mục tiêu trình duyệt IE 8+ và đối với Firefox, không thành vấn đề, phiên bản mới nhất (28.0) sẽ ổn.

CẬP NHẬT: Firefox 57+ hỗ trợ kiểu nhập = ngày

Bạn có thể thử webshims , có sẵn trên cdn + chỉ tải polyfill, nếu cần.

Đây là bản demo với CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

Trong trường hợp cấu hình mặc định không thỏa mãn, có nhiều cách để cấu hình nó. Ở đây bạn tìm thấy cấu hình datepicker .

Lưu ý: Mặc dù có thể có các bản phát hành lỗi mới cho webshim trong tương lai. Sẽ không có bất kỳ bản phát hành lớn nào nữa. Điều này bao gồm hỗ trợ cho jQuery 3.0 hoặc bất kỳ tính năng mới nào.

Nó có trong Firefox kể từ phiên bản 51 (ngày 26 tháng 1 năm 2017), nhưng nó không được kích hoạt theo mặc định (chưa)

Để kích hoạt nó:

về: cấu hình

dom.forms.datetime -> đặt thành đúng

https://developer.mozilla.org/en-US/Firefox/Experimental_features

Có một cách đơn giản để thoát khỏi hạn chế này bằng cách sử dụng thành phần datePicker do jQuery cung cấp.

1. Bao gồm các thư viện UI và jQuery UI (Tôi vẫn đang sử dụng một thư viện cũ)

   • src = "js / jquery-1.7.2.js"
   • src = "js / jquery-ui-1.7.2.js"

2. Sử dụng snip sau

   $(function() {
        $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
   });

Xem jQuery UI DatePicker - Thay đổi định dạng ngày nếu cần.

Loại = "ngày" không phải là một đặc điểm kỹ thuật thực tế tại thời điểm này. Đây là một khái niệm Google đã đưa ra và nằm trong thông số kỹ thuật whatwg của họ (không chính thức) và chỉ được Chrome hỗ trợ một phần.

http://caniuse.com/#search=date

Tôi sẽ không dựa vào loại đầu vào này vào thời điểm này. Nó sẽ là tốt đẹp để có, nhưng tôi không thấy trước điều này thực sự làm cho nó. Lý do số 1 là nó đặt quá nhiều gánh nặng lên trình duyệt để xác định UI tốt nhất cho đầu vào hơi phức tạp. Hãy suy nghĩ về nó từ góc độ đáp ứng, làm thế nào bất kỳ nhà cung cấp nào biết những gì sẽ hoạt động tốt nhất với giao diện người dùng của bạn nói ở 400 pixel, 800 pixel và rộng 1200 pixel?

Dưới đây là một ví dụ đầy đủ với ngày được định dạng trong YYYY-MM-DD

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />

Mặc dù điều này không cho phép bạn có được một ứng dụng hẹn hò, nhưng Mozilla cho phép sử dụng mẫu, do đó, ít nhất bạn có thể có được xác thực ngày với một cái gì đó như thế này:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

Cuối cùng, tôi đồng ý với @SuperUberDuper rằng Mozilla đang đi phía sau bao gồm cả điều này.

Đây chỉ là một gợi ý theo sau câu trả lời của Dax. (Tôi sẽ đưa nó vào một bình luận tại câu trả lời đó, nhưng tôi chưa có đủ danh tiếng để bình luận về các câu hỏi của người khác).

Id phải là duy nhất cho mọi trường, vì vậy, nếu bạn có nhiều trường ngày trong biểu mẫu (hoặc biểu mẫu), bạn có thể sử dụng phần tử lớp thay vì ID:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

và đầu vào của bạn là:

 <input type="text" class="datepicker" name="your-name" />

Bây giờ, mỗi khi bạn cần bộ chọn ngày, chỉ cần thêm lớp đó. PS Tôi biết, bạn vẫn phải sử dụng js :(, nhưng ít nhất bạn đã đặt cho tất cả trang web của mình. 2 xu của tôi ...

Phiên bản mới nhất của firefox the firefox 57 (Quantum) hỗ trợ ngày và các tính năng khác được phát hành vào ngày 14 tháng 11 năm 2017. Bạn có thể tải xuống bằng cách nhấp vào liên kết này

Cảm ơn Alexander, tôi đã tìm ra cách sửa đổi định dạng cho en lang. (Không biết lang nào sử dụng định dạng như vậy)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');

Đôi khi bạn không muốn sử dụng Datepicker http://jqueryui.com/datepicker/ trong dự án của bạn vì:

• Bạn không muốn sử dụng jquery
• Xung đột các phiên bản jquery trong dự án của bạn
• Lựa chọn của năm không thuận tiện. Ví dụ: bạn cần 120 lần nhấp vào nút trước để chuyển sang 10 năm trước.

Xin vui lòng xem mã trình duyệt chéo rất đơn giản của tôi để nhập ngày. Mã của tôi chỉ áp dụng nếu trình duyệt của bạn không hỗ trợ nhập kiểu ngày

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>

Đây là giải pháp thích hợp. Bạn nên sử dụng datepicker jquery ở mọi nơi

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

Dưới đây là liên kết để có được mã hoàn chỉnh

https://tutorialvilla.com/how/how-to-solve-the-probols-of-html-date-picker

Đây là giải pháp hoàn hảo. Bạn nên sử dụng công cụ hẹn hò JQuery cho ngày nhập của người dùng. Nó rất dễ sử dụng và nó có rất nhiều tính năng mà ngày đầu vào HTML không có.

Nhấn vào đây để sao chép mã ngày tháng của JQuery

Tôi đã phải sử dụng bootstrap-datepickerplugin để lịch hoạt động trên Firefox 55 Portable:

https://bootstrap-datepicker.readthedocs.io/en/latest/

Tương thích với Bootstrap v2 và v3. Nó đi kèm với một bản định kiểu độc lập để bạn không phải phụ thuộc vào Bootstrap.

Sử dụng:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>