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

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

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

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!

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.

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

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.

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.

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>

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:

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.

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.

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

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

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.

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

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.