Existe alguma maneira de alterar o tipo de entrada = formato "data"?

766

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

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

Tural Ali
fonte
4
O Google criou uma FAQ para o Chrome: developers.google.com/web/updates/2012/08/… Portanto, o formato é baseado na configuração de localidade do sistema operacional.
Endy Tjahjono
Eu perco meu tempo tentando fazer isso dd/mm/yyyy. basta usar outra biblioteca como moment ou jQuery datepicker
Ali Al Amine

Respostas:

608

É impossível mudar o formato

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

Formato do fio

A especificação de entrada data HTML 5 refere-se à especificação RFC 3339 , que especifica um formato integral, data igual a: yyyy-mm-dd. Consulte a seção 5.6 da especificação RFC 3339 para obter mais detalhes.

Esse formato é usado pelo valueatributo HTML e pela propriedade DOM e é aquele usado ao fazer um envio de formulário comum.

Formato de apresentação

Os navegadores são irrestritos na forma como apresentam uma entrada de data. No momento em que escrevia, Chrome, Edge, Firefox e Opera tinham suporte a data (veja aqui ). Todos exibem um seletor de datas e formatam o texto no campo de entrada.

Dispositivos de mesa

Para Chrome, Firefox e Opera, a formatação do texto do campo de entrada é baseada na configuração de idioma do navegador. Para o Edge, ele se baseia na configuração de idioma do Windows. Infelizmente, todos os navegadores ignoram a formatação da data configurada no sistema operacional. Para mim, esse é um comportamento muito estranho e algo a considerar ao usar esse tipo de entrada. Por exemplo, os usuários holandeses que têm seu sistema operacional ou conjunto linguagem navegador para en-usserá exibido 01/30/2019em vez do formato que eles estão acostumados a: 30-01-2019.

Internet Explorer 9, 10 e 11 exibem um campo de entrada de texto com o formato de conexão.

Dispositivos móveis

Especificamente para o Chrome no Android, a formatação é baseada no idioma de exibição do Android. Eu suspeito que o mesmo se aplica a outros navegadores, embora não tenha sido capaz de verificar isso.

David Walschots
fonte
Eu esperava um carimbo de data / hora JS, e não o formato de fio. E uma maneira de alterar o formato da apresentação, é muito difícil torná-lo consistente.
Allan Kimmer Jensen
7
@AllanKimmerJensen embora eu entenda seus pensamentos. Acredito que a decisão de usar o formato especificado na RFC3339 seja correta, pois não cria um acoplamento entre HTML e JavaScript. Quanto ao seu segundo ponto, considero que, do ponto de vista da usabilidade, faria sentido para o usuário ver o calendário de acordo com suas preferências regionais.
David Walschots
10
Se o aplicativo for pt_BR, espero uma entrada pt_BR. minhas configurações do sistema não importam. O HTML5 precisa de uma maneira de impor a localidade.
Iurisilvio
5
Eu uso a localidade em espanhol para configurações de data / moeda, pois estou na Espanha, mas meu primeiro idioma é inglês e estou acostumado a um layout de teclado nos EUA, então uso o teclado em inglês / EUA. Meus clientes são europeus de língua francesa .... Gostaria de sugerir ao Chrome etc. para parar de exibir datas no formato EUA mm-dd-aaaa!
Luke H
6
que componente inútil, quem diabos criou essas especificações?
boh
144

Desde que essa pergunta foi feita, muitas coisas aconteceram no mundo da web e uma das mais empolgantes é o desembarque de componentes da web . Agora você pode resolver esse problema de maneira elegante com um elemento HTML5 personalizado projetado para atender às suas necessidades. Se você deseja substituir / alterar o funcionamento de qualquer tag html, basta criar o seu brincando com o shadow dom .

A boa notícia é que já existe um grande número de clichês disponíveis, portanto você provavelmente não precisará encontrar uma solução do zero. Basta verificar o que as pessoas estão construindo e obter idéias a partir daí.

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

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

ou você pode obter seletores de data criativos e pop-up com o estilo que desejar , com a formatação e os locais desejados, retornos de chamada e sua longa lista de opções (você tem toda uma API personalizada à sua disposição!)

Compatível com padrões, sem hacks.

Verifique duas vezes o novamente os polyfills disponíveis , quais navegadores / versões eles suportam e se ele cobre uma porcentagem suficiente de sua base de usuários ... É 2018, então é provável que certamente abranja a maioria dos usuários.

Espero que ajude!

joseldn
fonte
mas algum desses é localizável? ou seja, altere os nomes dos meses para outros idiomas. E eles trabalham em computadores e dispositivos móveis?
Sam Hasler
Claro, eles são localizáveis. Você pode tirar proveito do código de idioma do sistema (ex .: is.gd/QSkwAY ) ou fornecer seus arquivos i18n dentro do componente da web (ex: is.gd/Ru9U82 ). Quanto aos navegadores móveis, eles são suportados usando polyfills, embora ainda não sejam 100%… Verifique o link dos navegadores / versões que publiquei. Mais uma vez, isso é uma vantagem. Se você olha para o futuro, é uma ótima solução.
joseldn
Desculpe, eu não tinha visto seu último comentário. Isso: jcrowther.io/2015/05/11/i18n-and-web-components parece bastante útil e deve ser incluído na resposta.
Sam Hasler
Fico feliz que você ache útil. Vou atualizar a resposta com tudo.
joseldn
@SDude Parece que os links que você indicou que deveriam incluir ainda não estão incluídos.
Mark Amery
79

Como mencionado anteriormente, oficialmente não é possível alterar o formato. No entanto, é possível estilizar o campo, portanto (com uma pequena ajuda do JS) ele exibe a data no formato que desejamos. Algumas das possibilidades de manipular a entrada de data são perdidas dessa maneira, mas se o desejo de forçar o formato for maior, essa solução pode ser uma maneira. Os campos de data permanecem apenas assim:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

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

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")
input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Funciona muito bem no Chrome para desktop e no Safari no iOS (especialmente desejável, pois os manipuladores de data nativos em telas sensíveis ao toque são imbatíveis no IMHO). Não procurou outras pessoas, mas não espere falhar em nenhum Webkit.

pmucha
fonte
1
Isso não funciona, você muda para MMMM YYYY DD, apenas as DDalterações. -1 para isso, desculpe
Can O 'Spam
3
@SamSwift - você clicou em "Executar" depois de alterar o valor? ;)
pmucha 11/09/2015
9
Não ele não é. Você não entende como isso funciona: você brinca com JS e deveria com HTML. Você alterou o formato de entrada da momentfunção e este não é o caminho a seguir. Você deveria ter mudado data-date-format="DD-YYYY-MM"e obteria 09-2015-08, que é o resultado certo.
Pmcha
3
Não funciona nem no Safari, Edge, Opera - que inutilizá-lo
MaxZoom
2
Quebrado no Firefox
Alexander Lallier
51

É importante distinguir dois formatos diferentes :

  • O "formato de fio" RFC 3339 / ISO 8601: AAAA-MM-DD. De acordo com a especificação HTML5, este é o formato que deve ser usado para o valor da entrada no envio do formulário ou quando solicitado pela API DOM. É local e região independente.
  • O formato exibido pelo controle da interface do usuário e aceito como entrada do usuário. Os fornecedores de navegadores são incentivados 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 / aa".

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

John
fonte
1
O valueatributo corresponde ao formato da ligação ou o que é exibido ao usuário?
Flimm
2
@ Limite o valueatributo sempre corresponde ao formato da ligação.
David Walschots 02/03/19
14

Acredito que o navegador usará o formato de data local. Não pense que é possível mudar. Obviamente, você pode usar um selecionador de data personalizado.

Michael Mior
fonte
1
formato de data local significa o formato de data padrão do telefone ou formato de data da localização?
Govindarao Kondala 11/10
2
Depende do navegador móvel que você está usando. Mas suspeito que será o padrão do telefone.
Michael Mior 11/11
2
Formato "local" significa com base na localização geográfica, que é possivelmente a pior maneira de determinar um formato de data. Um americano que viaja para a Europa espera que seu smartphone comece a exibir a hora no formato 24 horas e datas como aaaa-mm-dd ou dd / mm / aaaa? Ou vice-versa para um europeu nos EUA?
RobG
10

O Google Chrome em sua última versão beta finalmente usa a entrada type=datee 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 diferentes formatos.

Turamarth
fonte
18
O formato DD-MM-AAAA que você mencionou é provavelmente o formato de calendário local. Não é sensato (e até onde eu vejo, impossível dentro dos padrões atuais do HTML5) forçar um formato específico nos visitantes de um site, porque eles podem ser usados ​​em um formato de calendário diferente daquele que você impõe a eles.
David Walschots
3
Você está se referindo ao formato da apresentação, porque se você tentar ler o input.val (), o google chrome (v35) retornará a data no formato aaaa-mm-dd, independentemente do formato da apresentação;)
Tilt
3
@DavidWalschots se apenas os americanos perceberem o quão imprudente é forçar o formato mdy retardado no resto do mundo.
user275801
@ user275801 Embora eu concorde que esse M-D-Yseja um formato estranho. Não vi americanos forçando isso a outros. :-)
David Walschots
2
O @DavidWalschots, a maioria dos softwares e sistemas operacionais que já vi, exige que você "desative" o formato mdy americano. Nesse sentido, é de fato "forçado". Na verdade, meu Linux possui todas as configurações regionais da Austrália, mas meu navegador (um navegador americano, se é que pode ser chamado assim) ainda se encarrega de exibir todas as datas no formato mdy e, neste caso, não consigo " excluir".
user275801
5

Tente isso se precisar de uma solução rápida Para fazer o aaaa-mm-dd ir "dd- Sep -2016"

1) Crie perto da sua entrada uma classe de amplitude (aja como rótulo)

2) Atualize o rótulo sempre que sua data for alterada pelo usuário ou quando precisar carregar dados.

O Works para celulares do navegador da Webkit e eventos de ponteiros para o IE11 + requerem 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;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>

Miguel
fonte
2
Isso não responde à pergunta e requer duas bibliotecas, nenhuma das quais é marcada ou solicitada. Também não permite a entrada manual da data.
RobG
não foi solicitado que fosse alterado, apenas mostre o formato ... você pode fazer isso como uma visualização e usar a entrada com eventos de alteração para atualizar o formato de qualquer maneira.
Miguel
4

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

Código HTML:

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

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

Resultado:

insira a descrição da imagem aqui

Ashish Bhatt
fonte
3

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

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

Você pode digitar localeum 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_BRpelo seu código de idioma) para criar seu próprio código de idioma personalizado e formatar suas datas conforme desejar.

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

Você pode ver o formato da data atual real usando date:

$ date +%x
01-06-2015

Mas como LC_TIMEe d_fmtparece ser rejeitado pelo chrome (e acho que é um bug no webkit ou no chrome), infelizmente não funciona . : '(

Portanto, infelizmente a resposta, se LANGa variável de ambiente SE não resolver o seu problema, ainda não há como.

tonelada
fonte
+1 Ótimo! usando: LANG=ja_JP.UTF-8 chromium-browserfez o truque para mim. Também funciona com Vivaldi e acho que em outros navegadores também. Obrigado!
Lepe
2

Os navegadores obtêm o formato de entrada de data no 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 a partir de agora para alterar o estilo do controle de data, não é possível implementar o mesmo nos navegadores.

No entanto, esse comportamento de obter o formato da data nas configurações do sistema é melhor e eu sugiro fortemente que não devemos substituí-lo. O motivo é que os usuários verão o formato da entrada de data igual ao configurado no sistema / dispositivo e com o qual se sentem confortáveis ​​ou coincidem com o código de idioma.

Lembre-se, este é apenas o formato da interface do usuário na tela que os usuários veem. No seu javascript / back-end, você sempre pode manter o formato desejado.

Consulte a página do desenvolvedor do Google sobre o mesmo.

Rahul R.
fonte
@ downvoters, melhor deixar um comentário sobre -1, para melhorar as respostas atuais e futuras.
Rahul R.
2

Não é possível alterar os navegadores de kit da Web usando o computador do usuário ou o formato de data padrão do celular. Mas se você pode usar o jquery e a interface do usuário do jquery, existe um seletor de datas que é projetável e pode ser mostrado em qualquer formato que o desenvolvedor desejar. o link para o seletor de datas da interface do usuário do jquery está nesta página http://jqueryui.com/datepicker/, você pode encontrar demo, além de código e documentação ou link da documentação

Edit: -Eu acho que o chrome usa configurações de idioma que são, por padrão, iguais às configurações do sistema, mas o usuário pode alterá-las, mas o desenvolvedor não pode forçar os usuários a fazer isso, então você precisa usar outras soluções js, como eu digo, para pesquisar na web com consultas como seletores de data javascript ou seletor de datas jquery

Ravinder Payal
fonte
2

Eu encontrei uma maneira de mudar o formato, é uma maneira complicada, eu apenas mudei a aparência dos campos de entrada de data usando apenas um código CSS.

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}
<input type="date" value="2019-12-07">

safi eddine
fonte
0

Uma vez que a postagem está ativa há 2 meses. então pensei em dar minha opinião também.

No meu caso, recebo a data de um leitor de cartão que vem no formato dd / mm / aaaa.

o que eu faço. Por exemplo

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }
<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

o que o código faz:

  1. divide a data que eu recebo como dd / mm / aaaa (usando split ()) com base em "/" e cria uma matriz,
  2. em seguida, inverta a matriz (usando reverse ()), pois a entrada de data suporta o inverso do que recebo.
  3. em seguida, junta-se (usando join ()) à matriz em uma string de acordo com o formato exigido pelo campo de entrada

Tudo isso é feito em uma única linha.

Eu pensei que isso vai ajudar alguém, então eu escrevi isso.

Hezbullah Shah
fonte
Isso não aborda a pergunta; você está analisando um formato personalizado aqui, não alterando o formato <input>usado para mostrar o valor.
Mark Amery
isso é apenas uma
solução alternativa
0

Pesquisei esse problema há 2 anos e minhas pesquisas no Google me levam novamente a esta pergunta. Não perca seu tempo tentando lidar com isso com JavaScript puro. Eu perco meu tempo tentando fazer isso dd/mm/yyyy. Não há soluções completas que se encaixam em todos os navegadores. Portanto, recomendo usar o jQuery datepicker ou dizer ao seu cliente para trabalhar com o formato de data padrão

Ali Al Amine
fonte
-1

Eu sei que é um post antigo, mas ele vem como primeira sugestão na pesquisa do Google, resposta curta não, resposta recomendada ao usuário um piker de data personalizado, a resposta correta que eu uso é usar uma caixa de texto para simular a entrada de data e fazer o formato que você quiser , aqui está o código

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1- observe que esse método funciona apenas para navegadores compatíveis com o tipo de data.

2- a primeira função no código JS é para o navegador que não suporta o tipo de data e define a aparência para uma entrada de texto normal.

3- se você usar este código para várias entradas de data em sua página, altere o ID "xTime" da entrada de texto na chamada de função e na entrada em si para outra coisa e, é claro, use o nome da entrada desejada para o enviar formulário.

4-na segunda função, você pode usar qualquer formato que desejar, em vez do dia + "/" + mês + "/" + ano, por exemplo ano + "/" + mês + "/" + dia e, na entrada de texto, use um espaço reservado ou valor como aaaa / mm / dd para o usuário quando a página é carregada.

sombrio
fonte