Тип входного = «Дата» работает в Chrome, но не в Firefox

Question

Я не так в HTML и у меня есть следующие проблемы в этой веб-странице: http://www.saranistri.com/saranistriWPnew/richiesta-online-di-foto-storiche/

Если открыть его с помощью Chrome вы можете увидеть, что есть 2 дата поля, в которых вы можете выбрать данные в правильном формате (там также показаны стрелки вверх и вниз для увеличения или уменьшения данных), но если вы откроете эту страницу с помощью FireFox, это поле неверно (2 стрелки не отображаются, а формат даты не указан).

Использование FireBug я могу видеть, что они реализуются с помощью этой HTML разделе:

<p> 
Periodo 
<br> 
da 
    <span class="wpcf7-form-control-wrap date-from"> 
     <input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" value="" name="date-from"> 
    </span> 
a 
    <span class="wpcf7-form-control-wrap date-to"> 
     <input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" value="" name="date-to"> 
    </span> 
</p> 

Как вы можете видеть, что указано в типа = «дата». Почему Chrome показывает это правильно, а Firefox - нет? У меня такая же проблема и с использованием Explorer.

Как исправить эту проблему?

Answer 1

Firefox (и IE) в настоящее время не поддерживает input type="date". https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Browser_compatibility

Вы можете использовать плагин Datepicker на досуге, для тех браузеров, которые не поддерживают родную html5 даты

Answer 2

входа Я была такая же проблема с моим проектом. Вам не нужно делать каких-либо сложных изменений, чтобы заставить его работать.

Просто скопируйте и вставьте код ниже справа над вашим </body> тэгом:

<script type="text/javascript"> 
     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 
      $('input[type=date]').datepicker({ 
        dateFormat : 'yy-mm-dd' 
       }); 
     }) 
    } 
</script> 

Это позволит вам продолжать использовать <input type=date> даже в браузерах, которые не поддерживают HTML5 полностью.

Просто помните, что у вас есть хорошие заполнители во всем поле ввода, чтобы пользователь знал формат, чтобы ввести дату вручную, если он захочет.

ТАКЖЕ ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ Формат даты здесь «yy-mm-dd» i.e будет выглядеть так в 1999-12-03. Если вы хотите изменить его, сделайте его «dd-mm-yy», но для приложений баз данных я предлагаю оставить его как есть.