Existe alguma maneira de alterar o tipo de input = formato “data”?

Estou trabalhando com elementos HTML5 na minha página da web. Por padrão, o type="date" input type="date" mostra a data como YYYY-MM-DD .

A questão é, é possível alterar seu formato para algo como: DD-MM-YYYY ?

É impossível mudar o formato

Temos que diferenciar entre o formato over the wire e o formato de apresentação do navegador.

Formato de binding A especificação de input de data HTML5 refere-se à especificação RFC3339 , que especifica um formato de data completa igual a: aaaa-mm-dd. Consulte a seção 5.6 da especificação RFC3339 para mais detalhes.

Formato de apresentação Os navegadores não têm restrições sobre como apresentam uma input de data. No momento da gravação do Chrome, Edge, Firefox e Opera tinham suporte de data (veja aqui ). Todos eles exibem um selecionador de data e formatam o texto no campo de input.

A formatação do texto do campo de input só é feita corretamente no Chrome. Edge, Firefox e Opera exibem a data com o dia, mês e ano na ordem correta para a localidade, mas usam inconsistentemente barras ( 30/01/2018 ) onde, por exemplo, os traços ( 30-01-2018 ) são esperados pelo locale formato de calendar.

O Internet Explorer 9, 10 e 11 exibe um campo de input de texto com o formato de conexão.

Como essa pergunta foi feita, algumas coisas aconteceram no reino da web, e uma das mais interessantes é o pouso de componentes da web . Agora você pode resolver esse problema elegantemente com um elemento HTML5 personalizado projetado para atender às suas necessidades. Se você deseja sobrescrever / alterar o funcionamento de qualquer tag html, basta construir o seu jogando com o dom da sombra .

A boa notícia é que já há muito clichê disponível, então é muito provável que você não precise encontrar uma solução do zero. Basta verificar o que as pessoas estão construindo e obter idéias de lá.

Você pode começar com uma solução simples (e funcional) como input de data e hora para polímero, que permite usar uma tag como esta:

   

ou você pode criar selecionadores de data completos criativos e pop-up como desejar , com a formatação e as localidades desejadas, retornos de chamada e sua longa lista de opções (você tem uma API personalizada inteira à sua disposição!)

Compatível com padrões, sem hacks.

Verifique novamente os polyfills disponíveis , quais navegadores / versões eles suportam e se ele cobre bastante% de sua base de usuários … É 2018, então é provável que cubra a maioria dos usuários.

Espero que ajude!

Como mencionado anteriormente, não é oficialmente possível alterar o formato. No entanto, é possível estilizar o campo, então (com uma pequena ajuda JS) ele exibe a data em um formato que desejamos. Algumas das possibilidades de manipular a input de dados são perdidas dessa maneira, mas se o desejo de forçar o formato for maior, essa solução pode ser um caminho. Um campo de data fica apenas assim:

  

O resto é um pouco de CSS e JS: http://jsfiddle.net/g7mvaosL/

Funciona muito bem no Chrome para desktop, e no Safari no iOS (especialmente desejável, já que manipuladores de data nativos em canvass de toque são IMHO imbatíveis). Não checou outros, mas não espere falhar em nenhum Webkit.

É importante distinguir dois formatos diferentes :

  • O “formato de fio” RFC 3339 / ISO 8601: AAAA-MM-DD. De acordo com a especificação HTML5, esse é o formato que deve ser usado para o valor da input no envio do formulário ou quando solicitado por meio da API do DOM. É local e região independente.
  • O formato exibido pelo controle da interface do usuário e aceito como input do usuário. Os fornecedores de navegadores são encorajados a seguir a seleção de preferências do usuário. Por exemplo, no Mac OS com a região “Estados Unidos” selecionada no painel de preferências Idioma e texto, o Chrome 20 usa o formato “m / d / yy”.

A especificação HTML5 não inclui nenhum meio de replace ou especificar manualmente qualquer formato.

Eu acredito que o navegador usará o formato de data local. Não pense que é possível mudar. Você poderia, claro, usar um selecionador de data personalizado.

Depois de muitos obstáculos, surgiu uma solução que permite alterar o formato. Há algumas advertências, mas é útil se você deseja exibir ‘Jan’ ou ’01’ de forma consistente. Ele funciona no Chrome no Windows e no Mac apenas porque o Firefox ainda não oferece suporte a selecionadores de data nativos.

https://github.com/northamerican/custom-input-date-format

JS:

 function updateDateInputs() { $('input').each(function() { var $date = $(this), date = $date.val().split('-'), format = ['year', 'month', 'day']; $.each(format, function(i, v) { $date.attr('data-' + v, +date[i]); }); }); } 

SASS:

 $months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'; @each $month in $months { $i: index($months, $month); input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { content: "#{$month}"; } } 

O Google Chrome em sua última versão beta finalmente usa o type=date input type=date e o formato é DD-MM-YYYY .

Portanto, deve haver uma maneira de forçar um formato específico. Estou desenvolvendo uma página da Web HTML5 e as pesquisas de data agora falham com formatos diferentes.

Tente isto se você precisar de uma solução rápida Para fazer aaaa-mm-dd, vá em “dd-set -2016”

1) Crie perto de sua input uma class de span (aja como label)

2) Atualize o label toda vez que sua data for alterada pelo usuário ou quando precisar carregar dados.

Funciona para celulares do navegador webkit e events de ponteiro para o IE11 + requer jQuery e Jquery Date

 $("#date_input").on("change", function () { $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val())))); }); 
 #date_input{text-indent: -500px;height:25px; width:200px;} 
     

Como dito, o não está totalmente implementado na maioria dos navegadores, então vamos falar sobre o webkit como navegadores (chrome).

Usando o linux, você pode alterá-lo alterando a variável de ambiente LANG , LC_TIME parece não funcionar (pelo menos para mim).

Você pode digitar locale em um terminal para ver seus valores atuais. Eu acho que o mesmo conceito pode ser aplicado ao IOS.

Por exemplo: usando:

 LANG=en_US.UTF-8 /opt/google/chrome/chrome 

A data é mostrada como mm/dd/yyyy

Usando:

 LANG=pt_BR /opt/google/chrome/chrome 

A data é mostrada como dd/mm/yyyy

Você pode usar http://lh.2xlibre.net/locale/pt_BR/ (altere pt_BR pelo seu local) para criar sua própria localidade personalizada e formatar as datas que desejar.

Uma boa referência mais avançada sobre como alterar a data do sistema padrão é: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ e https: // askubuntu. com / questions / 21316 / como-pode-eu-personalizar-a-system-locale

Você pode ver seu formato atual de data atual usando a date :

 $ date +%x 01-06-2015 

Mas como LC_TIME e d_fmt parecem ser rejeitados pelo chrome (e eu acho que é um bug no webkit ou chrome), infelizmente não funciona . : ‘(

Então, infelizmente a resposta, é variável de ambiente IF LANG não resolve o seu problema, não há como ainda.

Depois de ter lido muitas discussões, eu preparei uma solução simples, mas eu não quero usar muita Jquery e CSS, apenas alguns javascript.

Código HTML:

    

Código CSS:

 #dt { text-indent: -500px; height: 25px; width: 200px; } 

Código Javascript:

 function mydate() { //alert(""); document.getElementById("dt").hidden = false; document.getElementById("ndt").hidden = true; } function mydate1() { d = new Date(document.getElementById("dt").value); dt = d.getDate(); mn = d.getMonth(); mn++; yy = d.getFullYear(); document.getElementById("ndt").value = dt + "/" + mn + "/" + yy document.getElementById("ndt").hidden = false; document.getElementById("dt").hidden = true; } 

Saída:

insira a descrição da imagem aqui

Não é possível alterar os navegadores do kit da web usando o formato de data padrão do computador ou do celular do usuário. Mas se você pode usar jquery e jquery ui, há um selecionador de data que é projetável e pode ser mostrado em qualquer formato que o desenvolvedor desejar. o link para o selecionador de data do jquery ui está nesta página http://jqueryui.com/datepicker/ você pode encontrar demo, bem como código e documentação ou link de documentação Se alguém quiser mais ajuda ele / ela pode me conectar no melhor rede social http://www.funnenjoy.com

Edit: -Encontro que chrome usa configurações de idioma que são por padrão iguais às configurações do sistema, mas o usuário pode alterá-los, mas desenvolvedor não pode forçar os usuários a fazê-lo, então você tem que usar outras soluções js como eu digo que você pode pesquisar na web com consulta como javascript data-pickers ou jquery date-picker

Os navegadores obtêm o formato de input de data do formato de data do sistema do usuário.

(Testado em navegadores suportados, Chrome, Edge.)

Como não há um padrão definido pelas especificações para alterar o estilo do controle de data, não é possível implementá-lo nos navegadores.

No entanto, esse comportamento de obter o formato de data das configurações do sistema é melhor e eu sugiro fortemente, não devemos tentar substituí-lo. A razão é que os usuários verão o formato da input de dados igual ao que configuraram no sistema / dispositivo e com o qual se sentem confortáveis ​​ou correspondem a sua localidade.

Lembre-se, este é apenas o formato da interface do usuário na canvas que os usuários vêem, no seu javascript / backend você pode sempre manter o formato desejado.

Consulte a página de desenvolvedores do Google no mesmo.

 function dmy() { var mydate = document.getElementById('dat').value; //alert(mydate); var yf = mydate.split("-")[0]; var mf = mydate.split("-")[1]; var df = mydate.split("-")[2]; var b = localStorage.getItem("b"); if (!b) { b = []; } else { b = JSON.parse(b); } b.push({ df: df, mf: mf, yf: yf }); localStorage.setItem("b", JSON.stringify(b)); } function showdate() { var sdate = JSON.parse(localStorage.getItem('b')); var a = ''; if (sdate != null) { for (var i = 0; i < sdate.length; i++) { a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '
'; } } else { a = 'No DATA'; } document.getElementById('conversion').innerHTML = a; }
 

O formato do selecionador de data HTML5 depende do formato do formato de data e hora da máquina do servidor.

Assim, você pode alterá-lo alterando o formato no servidor de implantação na barra de tarefas.