Como obter o tipo de entrada HTML 5 = "date" trabalhando no Firefox e / ou IE 10

Acho estranho que input type="date"ainda não seja suportado no Firefox depois de todo esse tempo. Na verdade, não acho que eles tenham adicionado muito (se houver) dos novos tipos do HTML 5 a um elemento de entrada. Não é surpresa que ele não seja suportado no IE10. Então, minha pergunta é ...

Como obter type="date"um inputelemento que funcione sem adicionar outro arquivo .js (ou seja, o jQueryUIDatePicker Widget) apenas para obter um calendário / data apenas para os navegadores IE e Firefox? Existe algo lá fora que possa ser aplicado em algum lugar (CDN, talvez?) Que fará essa funcionalidade funcionar por padrão no Firefox e / ou nos navegadores IE? Tentar direcionar os navegadores IE 8+ e para o Firefox, não importa, a versão mais recente (28.0) ficará boa.

ATUALIZAÇÃO: Firefox 57+ suporta tipo de entrada = data

Você pode experimentar webshims , que está disponível no cdn +, apenas carrega o polyfill, se necessário.

Aqui está uma demonstração com a 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" />

Caso a configuração padrão não seja satisfatória, existem várias maneiras de configurá- la. Aqui você encontra o configurador do datepicker .

Nota: Embora possa haver novas versões de correções para webshim no futuro. Não haverá mais lançamentos importantes. Isso inclui suporte para o jQuery 3.0 ou qualquer novo recurso.

Está no Firefox desde a versão 51 (26 de janeiro de 2017), mas não está ativado por padrão (ainda)

Para ativá-lo:

about: config

dom.forms.datetime -> definido como true

https://developer.mozilla.org/pt-BR/Firefox/Experimental_features

Existe uma maneira simples de se livrar dessa restrição usando o componente datePicker fornecido pelo jQuery.

1. Incluir bibliotecas jQuery e jQuery UI (ainda estou usando uma antiga)

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

2. Use o seguinte recorte

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

Consulte DatePicker da interface do usuário do jQuery - Altere o formato da data, se necessário.

O tipo = "data" não é uma especificação real neste momento. É um conceito que o Google criou e está em suas especificações whatwg (não oficiais) e é apenas parcialmente suportado pelo Chrome.

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

Eu não confiaria nesse tipo de entrada neste momento. Seria bom ter, mas não prevejo que este seja realmente o suficiente. O motivo número 1 é que sobrecarrega o navegador para determinar a melhor interface do usuário para uma entrada um pouco complicada. Pense nisso de uma perspectiva responsiva: como um fornecedor saberia o que funcionaria melhor com sua interface do usuário com 400 pixels, 800 pixels e 1200 pixels de largura?

Aqui está um exemplo completo com a data formatada em AAAA-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" />

Embora isso não permita que você obtenha uma interface do usuário do datepicker, o Mozilla permite o uso de padrão, então você pode pelo menos obter a validação de data com algo como isto:

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))'

Por fim, concordo com o @SuperUberDuper, pois o Mozilla está muito atrasado ao incluir isso nativamente.

Esta é apenas uma sugestão que segue a resposta de Dax. (Eu o colocaria em um comentário nessa resposta, mas ainda não tenho reputação suficiente para comentar sobre outras perguntas).

Os IDs devem ser exclusivos para todos os campos. Portanto, se você tiver vários campos de data em seu formulário (ou formulários), poderá usar o elemento de classe em vez do ID:

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

e sua entrada como:

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

Agora, sempre que precisar do seletor de datas, basta adicionar essa classe. PS: Eu sei, você ainda precisa usar o js :(, mas pelo menos está definido para todo o seu site. Meus 2 centavos ...

A versão mais recente do firefox, o firefox 57 (Quantum), suporta a data e outros recursos, foi lançada em 14 de novembro de 2017. Você pode baixá-lo clicando neste link

Obrigado Alexander, encontrei uma maneira de modificar o formato para en lang. (Não sabia qual idioma usa esse formato)

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

 $.webshims.activeLang('en');

Às vezes, você não deseja usar o Datepicker http://jqueryui.com/datepicker/ no seu projeto porque:

• Você não quer usar jquery
• Conflito de versões jquery em seu projeto
• A escolha do ano não é conveniente. Por exemplo, você precisa de 120 cliques no botão anterior para mudar para 10 anos atrás.

Por favor, veja meu código de navegador cruzado muito simples para inserir a data. Meu código se aplica apenas se o seu navegador não suportar a entrada de tipo de data

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<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>

Aqui está a solução adequada. Você deve usar o jquery datepicker em qualquer lugar

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

Abaixo está o link para obter o código completo

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

Aqui está a solução perfeita. Você deve usar o datepicker do JQuery para inserir a data do usuário. É muito fácil de usar e possui muitos recursos que a data de entrada HTML não possui.

Clique aqui para copiar o código do dateQuicker JQuery

Eu tive que usar bootstrap-datepicker plugin para fazer o calendário funcionar no Firefox 55 Portable:

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

Compatível com o Bootstrap v2 e v3. Ele vem com uma folha de estilo independente, para que você não precise depender do Bootstrap.

Uso:

<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>