ngày đầu vào không làm việc trong firefox

tôi có đầu vào ngày sau:ngày đầu vào không làm việc trong firefox

<div class="form-group"> 
    <label for="start_date">Start Date</label> 
    <input type="date" class="form-control" name="start_date" id="start_date" placeholder="mm/dd/yyyy"> 
</div>

Nếu tôi bấm vào nó trong chrome, một bảng chọn ngày bật lên:

Tuy nhiên, nếu tôi bấm vào nó trong firefox, datepicker không bật lên:

Có ai biết tại sao điều này xảy ra và/hoặc cách tôi có thể khắc phục trong firefox để nó nhất quán ?

Lưu ý - Tôi đang sử dụng bootstrap 3

Cảm ơn trước !!

Nguồn

2016-05-18 Trung Tran

Thật không may <input type="date"/> không được hỗ trợ trong firefox. Để có thể sử dụng loại ngày trong tất cả các trình duyệt, bạn có thể kiểm tra bằng trình hiện đại hóa và nếu không được hỗ trợ, bạn có thể quay lại sử dụng javascript để hiển thị datepickerr.

<script> 
    $(function(){   
     if (!Modernizr.inputtypes.date) { 
      $('input[type=date]').datepicker({ 
        dateFormat : 'yy-mm-dd' 
       } 
      ); 
     } 
    }); 
</script>

Nguồn

2016-05-18 20:05:54 riteshmeher

Làm thế nào tôi có thể sử dụng điều này? Tôi mới sử dụng javascript. Tôi đã thêm tệp Modernizr vào dự án của mình. Sau đó, ở đầu tệp html của tôi, tôi đã chỉ vào mã js (ví dụ:

Hỗ trợ trình duyệt cho các tính năng như thế này rất khác nhau. Hiện nay, Firefox và một số trình duyệt khác không hỗ trợ việc sử dụng các <input type='date' /> yếu tố như mentioned here và nhìn thấy trong biểu đồ dưới đây:

Hãy xem xét một dựa trên Javascript Alternative

Những gì bạn có thể xem xét việc làm đang sử dụng plugin dựa trên Javascript như jQueryUI's DatePicker để nhắm mục tiêu bất kỳ yếu tố nào thuộc loại đó và để cho nó tiếp quản theo cách thân thiện hơn trên nhiều trình duyệt:

<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> 
<script> 
    $(function(){ 
     // Find any date inputs and override their functionality 
     $('input[type="date"]').datepicker(); 
    }); 
</script>

Ngoài ra, bạn cũng có thể cân nhắc xem xét một plugin cụ thể của Bootstrap như bootstrap-datepicker, có thể mang lại cho bạn giao diện nhất quán hơn.

Nguồn

2016-05-18 20:10:38

Hãy thử liên kết này. này đang làm việc trong firefox http://www.javascriptkit.com/javatutors/createelementcheck2.shtml

Nguồn

2017-07-24 18:25:46

Bạn có thể thêm chi tiết và đoạn mã để giúp làm rõ câu trả lời của bạn không? – MedAli

Tôi đồng ý! Điều này thật tuyệt vời, nhưng nó cần thêm thông tin trong câu trả lời. –

Chỉ cần Update FireFox mới nhất (v57) vấn đề đau đớn này đã biến mất mãi mãi :-)

XemCan I Use

Documents: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Proof:

Nguồn

2017-11-24 12:46:32 mumair

Nguyên nhân gốc rễ của lý do tại sao các định dạng không làm việc như nhau trên tất cả các trình duyệt là do việc thực hiện khác nhau của ngày javascript() constructor trên các trình duyệt khác nhau:

alert (new Date ('30/12/2017')) ->

Firefox:

"Ngày không hợp lệ"

(có thể chính xác tùy thuộc vào định nghĩa).

IE:

"Wed 12 tháng 6 năm 2019 ..."

(! Bây giờ mà là sai)

.. này xuất phát từ C/C++ nội bộ: đó là chuyển đổi từ 30 đến 2 năm (24 tháng) + 6 tháng -> Jun (tháng 12 + 6 tháng) 2019 (2017 + 2 năm).

Về cơ bản, nó hoạt động kém trên tất cả các trình duyệt!

Bạn có thể thay đổi (hoặc ghi đè hàm ngày) "jquery.validate.js":

Đây là bản sửa lỗi. Điều này phù hợp với khách hàng của tôi:

Bạn cũng sẽ nhận thấy rằng đối với IE, v.v., nó kiểm tra nhiều hơn bằng cách không cho phép nhiều ngày xấu.

// http://docs.jquery.com/Plugins/Validation/Methods/date

 date: function (value, element) {
 // test 
// alert (new Date('30/12/2017')) 

// original - bad 
// return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString()); 

// fix 
var oInst = $.datepicker._getInst(element) 
var sDateFormat = $.datepicker._get(oInst, "dateFormat") 
var oSettings = $.datepicker._getFormatConfig(oInst) 
var dtDate = null 
try { 
    dtDate = $.datepicker.parseDate(sDateFormat, value, oSettings) 
} catch (ex) { } 

return this.optional(element) || dtDate != null

},

Chúc mừng, Ron Lentjes, LC CLS

Nguồn

2017-12-26 14:34:08

Các vấn đề liên quan

ngày đầu vào không làm việc trong firefox

Trả lời

Các vấn đề liên quan