Como definir o formato da data na tag de entrada de data HTML?

105

Gostaria de saber se é possível definir o formato de data na <input type="date"></input>tag html ... Atualmente é aaaa-mm-dd, enquanto eu preciso no formato dd-mm-aaaa.

— Piotr
fonte

3

Não é uma possível duplicata de Especificando a saída do valor de uma entrada HTML5 type = date? ? Eu diria que essa pergunta aqui é melhor do que a mais velha, mas a mais velha tem uma resposta muito boa.

— Arsen7

Possível duplicata de Existe alguma maneira de alterar o formato do tipo de entrada = "data"?

— Vaibhav Mule

Minhas configurações de país são holandesas e, no Chrome, mostra DD-MM-AAAA. Parece que depende das configurações do Windows do cliente usando o site.

— dark_passages

11

Você não.

Em primeiro lugar, a sua pergunta é ambígua - quer dizer o formato em que é apresentado ao utilizador ou o formato em que é transmitido ao servidor web?

Se você se refere ao formato no qual ele é exibido para o usuário, isso depende da interface do usuário final, e não de qualquer coisa especificada no HTML. Normalmente, eu esperaria que fosse baseado no formato de data definido nas configurações de localidade do sistema operacional. Não faz sentido tentar substituí-lo por seu próprio formato preferido, pois o formato em que ele exibe é (em geral) o correto para a localidade do usuário e o formato em que o usuário está acostumado a escrever / entender datas.

Se você se refere ao formato em que é transmitido ao servidor, está tentando consertar o problema errado. O que você precisa fazer é programar o código do lado do servidor para aceitar datas no formato aaaa-mm-dd.

— Stewart
fonte

1

Infelizmente, seu segundo comentário não é totalmente verdadeiro no mundo real. Alguns navegadores, como o Chrome e o Opera, pelo menos respeitam a ordem das entidades, embora nada mais do que isso. Por exemplo, minhas configurações de localidade do sistema operacional especificam que, como uma data abreviada, o primeiro dia de agosto deste ano deve ser 1 / 8-2016 , mas mesmo o Chrome e o Opera mostram 01/08/2016 . Outros navegadores, como Safari e Firefox (pelo menos no OS X) ignoram completamente as configurações do sistema operacional e sempre mostram 2016/08/16, não importa o quê. Em um site onde os usuários podem definir suas próprias preferências de data, certamente faz sentido substituir isso.

— Janus Bahs Jacquet

(Ignore a nota sobre Firefox e Safari ... Estou cansado. Nenhum dos navegadores suporta o tipo de data, então eles estão apenas mostrando o formato subjacente do valor, que no caso do meu código atual é AAAA-MM-DD .)

— Janus Bahs Jacquet

A maioria das pessoas está perguntando como alterar o formato de data de exibição / entrada para permitir que os usuários definam suas próprias preferências ou imponham seus próprios formatos de data preferidos ao mundo? O último é algo que ninguém deveria fazer, como eu disse, mas você pode argumentar de qualquer maneira sobre se o primeiro é apropriado. Mas seria uma configuração de apresentação, portanto, fora do escopo do HTML.

— Stewart

O problema é que é uma configuração de apresentação que não pode ser definida . As configurações de apresentação em geral pertencem ao CSS, mas não há como mudar isso no CSS (ou em qualquer outro lugar). Além disso, até mesmo a especificação HTML em si não está livre de configurações de apresentação. Por exemplo, a seção sobre input[type=password]diz que “o agente do usuário deve ocultar o valor para que outras pessoas que não o usuário não possam vê-lo”, o que é tanto uma apresentação quanto dizer que o agente do usuário deve apresentar a data de uma determinada maneira.

— Janus Bahs Jacquet

1

Alguns diriam que é bom que não possa ser definido, pois evita que os webmasters imponham seus próprios formatos de data preferidos no mundo. Mas as entradas de senha me fizeram pensar. Em muitos lugares, a especificação HTML fornece recomendações de apresentação, que são essencialmente recomendações para folhas de estilo padrão do navegador. A diferença aqui é que não parece haver uma propriedade CSS para este aspecto de apresentação em particular.

— Stewart

11

Encontrei a mesma pergunta ou questão relacionada no stackoverflow

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

Eu encontrei uma solução simples, você não pode dar formato de particulado, mas você pode personalizar assim.

Código HTML:

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

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:

— Ashish Bhatt
fonte

Ainda melhor - use css para posicionar um controle de data transparente sobre a entrada regular

— George Mauer

Obrigado pela sua resposta, se você tiver algum link ou código para isso, preciso atualizar

— ashish bhatt

Esta é uma ótima opção.

— Dillon Burnett

Acho que ele está perguntando se é possível com HTML (com base na pergunta), não CSS nem Javascript.

— Shizukura

6

Se você estiver usando jQuery, aqui está um método simples e agradável

$("#dateField").val(new Date().toISOString().substring(0, 10));

Ou há a velha maneira tradicional:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)

— sean.boyer
fonte

4

Por que não usar o controle de data html5 como está, com outros atributos que permitem que funcione bem em navegadores que suportam o tipo de data e ainda funciona em outros navegadores como o firefox que ainda não suporta o tipo de data

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>

— Paul IE
fonte

— Paul IE

8

O requisito era claramente, passo a citar - "Eu preciso dele no formato dd-mm-aaaa." Como isso ajuda?

— Harijs Krūtainis

1

não funciona com o Firefox. Este html mostra uma entrada com espaço reservado mm / dd / aaaa. Minhas janelas e meu firefox estão configurados com holandês como primeiro idioma. A configuração regional do Windows mostra a data abreviada: 30-11-2018.

— Roland

1

Acho que sim, em HTML não existe sintaxe para o formato DD-MM-AAAA. Consulte esta página http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . De alguma forma vai te ajudar. Caso contrário, use o seletor de data javascript.

— Rathika Jeganathan
fonte

1

Não sei com certeza, mas acho que isso deve ser tratado pelo navegador com base nas configurações de data / hora do usuário. Tente configurar seu computador para exibir datas nesse formato.

— Erro de sintaxe
fonte

1

$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});

— Dheeraj Rao
fonte

3

Obrigado por este trecho de código, que pode fornecer alguma ajuda imediata. Uma explicação adequada melhoraria muito seu valor educacional, mostrando por que essa é uma boa solução para o problema, e a tornaria mais útil para futuros leitores com perguntas semelhantes, mas não idênticas. Por favor edite sua resposta para adicionar explicação, e dar uma indicação do que limitações e premissas se aplicam.

— Toby Speight

1

Fiz muitas pesquisas e acho que não se pode forçar o formato do <input type="date">. O navegador seleciona o formato local e, dependendo das configurações do usuário, se o idioma do usuário for o inglês, a data será exibida no formato inglês (mm / dd / aaaa).

Na minha opinião, a melhor solução é usar um plugin para controlar a exibição.

Jquery DatePicker parece uma boa opção, pois você pode forçar a localização , formato de data ...

— Fifi
fonte

1

Eu vim com uma resposta ligeiramente diferente de qualquer coisa acima que li.

Minha solução usa um pequeno pedaço de JavaScript e uma entrada html.

A Data aceita por uma entrada resulta em uma String formatada como 'aaaa-mm-dd'. Podemos dividi-lo e colocá-lo corretamente como uma nova Data ().

Aqui está o HTML básico:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

Aqui está JS básico:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

Você pode formatar a data da maneira que desejar. Você pode criar um novo Date () e pegar todas as informações de lá ... ou simplesmente usar 'userDate []' para construir sua string.

Lembre-se de que algumas maneiras pelas quais uma data é inserida em 'new Date ()' produz um resultado inesperado. (ou seja, um dia antes)

— thielr7
fonte

1

<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>

— Pala Dattadri
fonte

2

Ao postar código HTML aqui, é muito importante formatá-lo como código. Do contrário, ele é formatado como parte da página e sua resposta não parece uma resposta. Se você não sabe como formatar, há um bom guia sobre isso na

— Central de

0

resposta direta curta é não ou não está fora da caixa, mas eu criei um método para usar uma caixa de texto e código JS puro para simular a entrada de data e fazer qualquer 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 este método só funciona para navegadores que suportam o tipo de data.

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

3- se você for 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 própria entrada para outra coisa e, claro, use o nome da entrada que deseja para o enviar formulário.

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

— sombrio
fonte

0

Para formatação em mm-dd-aaaa

aa = date.split ("-")

data = aa [1] + '-' + aa [2] + '-' + aa [0]

— Abilash Raghu
fonte

-1

Implementação limpa sem dependências. https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css">
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  </style>

  <input class="dateField" id="dateField" type="date"></input>
  <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>

  <script>
    var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

    fakeDateField.addEventListener("click", function() {
      document.getElementById("dateField").focus();
    }, false);

    dateField.addEventListener("focus", function() {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    });

    dateField.addEventListener("blur", function() {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    });

    dateField.addEventListener("change", function() {
      // this method could be replaced by momentJS stuff
      if (dateField.value.length < 1) {
        return;
      }

      var date = new Date(dateField.value);
      var day = date.getUTCDate();
      var month = date.getUTCMonth() + 1; //zero-based month values
      fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
    });

  </script>

— James Perih
fonte

-2

Aqui está a solução:

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

espero que isso resolva o problema :)

— Muhammad Waqas
fonte

1

Sua solução não utiliza o tipo de entrada HTML de data, portanto, não responde realmente à pergunta.

— Vincent

você não precisa definir seu tipo para a data. para datepicker funcionará sem data. Experimente, espero que resolva seu problema.

— Muhammad Waqas de

-3

O formato do valor da data é 'YYYY-MM-DD'. Veja o seguinte exemplo

<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>

Tudo que você precisa é formatar a data em php, asp, ruby ou qualquer outro para ter esse formato.

— Charmi
fonte