¿Cómo configurar el formato de fecha en la etiqueta de entrada de fecha HTML?

105

Me pregunto si es posible establecer el formato de fecha en la <input type="date"></input>etiqueta html ... Actualmente es aaaa-mm-dd, mientras que lo necesito en el formato dd-mm-aaaa.

— Piotr
fuente

3

¿No es un posible duplicado de Especificar el valor de salida de un tipo de entrada HTML5 = fecha? ? Yo diría, esta cuestión aquí es mejor que el pedido mayor, pero eso más viejo uno tiene una respuesta bastante buena.

— Arsen7

Posible duplicado de ¿Hay alguna forma de cambiar el tipo de entrada = formato de "fecha"?

— Vaibhav Mule

La configuración de mi país es holandesa y en Chrome muestra DD-MM-YYYY. Parece que depende de la configuración de Windows del cliente que utiliza el sitio web.

— dark_passages

11

Tu no

En primer lugar, su pregunta es ambigua: ¿se refiere al formato en el que se muestra al usuario o al formato en el que se transmite al servidor web?

Si se refiere al formato en el que se muestra al usuario, entonces esto depende de la interfaz del usuario final, no de nada que especifique en el HTML. Por lo general, esperaría que se basara en el formato de fecha que se establece en la configuración regional del sistema operativo. No tiene sentido intentar anularlo con su propio formato preferido, ya que el formato en el que se muestra es (en términos generales) el correcto para la configuración regional del usuario y el formato en el que el usuario está acostumbrado a escribir / comprender las fechas.

Si te refieres al formato en el que se transmite al servidor, estás intentando solucionar el problema incorrecto. Lo que debe hacer es programar el código del lado del servidor para aceptar fechas en formato aaaa-mm-dd.

— Stewart
fuente

Lamentablemente, su segundo comentario no es del todo cierto en el mundo real. Algunos navegadores, como Chrome y Opera, al menos respetan el orden de las entidades, aunque nada más que eso. Por ejemplo, la configuración regional de mi sistema operativo especifica que, como fecha corta, el primer día de agosto de este año debería ser el 1 / 8-2016 , pero incluso Chrome y Opera muestran el 01/08/2016 . Otros navegadores, como Safari y Firefox (al menos en OS X) ignoran la configuración del sistema operativo por completo y siempre muestran 2016-08-16 sin importar qué. En un sitio donde los usuarios pueden establecer sus propias preferencias de fecha, ciertamente tiene sentido anular esto.

— Janus Bahs Jacquet

(Ignore la nota sobre Firefox y Safari ... Estoy cansado. Ninguno de los navegadores admite el tipo de fecha en absoluto, por lo que solo muestra el formato subyacente del valor, que en el caso de mi código actual es AAAA-MM-DD .)

— Janus Bahs Jacquet

¿La mayoría de las personas que se preguntan cómo cambiar el formato de fecha de visualización / entrada quieren permitir que los usuarios establezcan sus propias preferencias o imponer sus propios formatos de fecha preferidos en el mundo? Esto último es algo que nadie debería estar haciendo, como he dicho, pero se podría discutir de cualquier manera si lo primero es apropiado. Pero sería un entorno de presentación, por lo que fuera del alcance de HTML.

— Stewart

El problema es que es un entorno de presentación que no se puede configurar . La configuración de presentación en general pertenece a CSS, pero no hay forma de cambiar esto en CSS (o en cualquier otro lugar). Además, incluso la especificación HTML en sí misma no está libre de configuraciones de presentación. Por ejemplo, la sección sobre input[type=password]dice que “el agente de usuario debe ocultar el valor para que otras personas además del usuario no puedan verlo”, que es tanto una presentación como decir que el agente de usuario debe presentar la fecha de una manera determinada.

— Janus Bahs Jacquet

1

Algunos dirían que es bueno que no se pueda configurar, ya que evita que los webmasters impongan sus propios formatos de fecha preferidos en el mundo. Pero las entradas de contraseña me han hecho pensar. En muchos lugares, la especificación HTML ofrece recomendaciones de presentación, que son esencialmente recomendaciones para hojas de estilo predeterminadas del navegador. La diferencia aquí es que no parece haber una propiedad CSS para este aspecto de presentación en particular.

— Stewart

11

Encontré la misma pregunta o pregunta relacionada en stackoverflow

¿Hay alguna forma de cambiar el tipo de entrada = formato de "fecha"?

Encontré una solución simple, no se puede dar formato de partículas pero se puede personalizar así.

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

Salida:

— ashish bhatt
fuente

Aún mejor: use css para colocar un control de fecha transparente sobre la entrada regular

— George Mauer

Gracias por su respuesta, si tiene algún enlace o código para esto, necesito actualizar

— ashish bhatt

Esta es una gran opción.

— Dillon Burnett

Creo que está preguntando si es posible con HTML (según la pregunta), no con CSS ni con Javascript.

— Shizukura

6

Si está usando jQuery, aquí hay un método simple y agradable

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

O está la vieja forma tradicional:

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

— sean.boyer
fuente

4

¿Por qué no usar el control de fecha html5 tal como está, con otros atributos que le permiten funcionar bien en navegadores que admiten el tipo de fecha y aún funciona en otros navegadores como Firefox que aún no admite el tipo de fecha?

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

— Paul IE

8

El requisito claramente era, cito: "Lo necesito en el formato dd-mm-aaaa". ¿Cómo ayuda esto?

— Harijs Krūtainis

1

no funciona con Firefox. Este HTML muestra una entrada con marcador de posición mm / dd / aaaa. Tanto mi Windows como mi Firefox están configurados con holandés como primer idioma. La configuración regional de Windows muestra una fecha corta: 30-11-2018.

— Roland

1

Creo que sí, en HTML no hay sintaxis para el formato DD-MM-AAAA. Consulte esta página http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Algo te ayudará. De lo contrario, use el selector de fechas de JavaScript.

— Rathika Jeganathan
fuente

1

No lo sé con certeza, pero creo que se supone que debe ser manejado por el navegador según la configuración de fecha / hora del usuario. Intente configurar su computadora para que muestre las fechas en ese formato.

— Error de sintaxis
fuente

1

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

— Dheeraj Rao
fuente

3

Gracias por este fragmento de código, que puede proporcionar ayuda inmediata. Una explicación adecuada mejoraría enormemente su valor educativo al mostrar por qué es una buena solución al problema y lo haría más útil para futuros lectores con preguntas similares, pero no idénticas. Por favor, editar su respuesta para agregar explicación y dar una indicación de lo que se aplican limitaciones y supuestos.

— Toby Speight

1

Investigué mucho y no creo que se pueda forzar el formato del <input type="date">. El navegador selecciona el formato local y, según la configuración del usuario, si el idioma del usuario es inglés, la fecha se mostrará en formato inglés (mm / dd / aaaa).

En mi opinión, la mejor solución es utilizar un complemento para controlar la pantalla.

Jquery DatePicker parece una buena opción ya que puedes forzar la localización , el formato de fecha ...

— Fifi
fuente

1

Se me ocurrió una respuesta ligeramente diferente a cualquier cosa anterior que haya leído.

Mi solución usa un poco de JavaScript y una entrada html.

La fecha aceptada por una entrada da como resultado una cadena formateada como 'aaaa-mm-dd'. Podemos dividirlo y colocarlo correctamente como una nueva Fecha ().

Aquí está 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>

Aquí está JS básico:

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

Puede formatear la fecha de la forma que desee. Puede crear una nueva Fecha () y obtener toda la información de allí ... o simplemente usar 'userDate []' para construir su cadena.

Tenga en cuenta que algunas formas en que se ingresa una fecha en 'nueva Fecha ()' producen un resultado inesperado. (es decir, un día atrás)

— thielr7
fuente

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
fuente

2

Cuando publica código HTML aquí, es muy importante que lo formatee como código. Si no lo hace, está formateado como parte de la página y su respuesta no parece una respuesta. Si no sabe cómo formatear, hay una buena guía al respecto en el centro de ayuda

— Zoe

0

La respuesta directa corta es no o no está lista para usar, pero se me ocurrió un método para usar un cuadro de texto y un código JS puro para simular la entrada de fecha y hacer cualquier formato que desee, aquí está el 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- tenga en cuenta que este método solo funciona para navegadores que admiten el tipo de fecha.

2- la primera función en el código JS es para el navegador que no admite el tipo de fecha y establece el aspecto en una entrada de texto normal.

3- si va a utilizar este código para múltiples entradas de fecha en su página, cambie el ID "xTime" de la entrada de texto tanto en la llamada de función como en la entrada en sí a otra cosa y, por supuesto, utilice el nombre de la entrada que desea para el enviar formulario.

4-en la segunda función, puede usar cualquier formato que desee en lugar de día + "/" + mes + "/" + año, por ejemplo, año + "/" + mes + "/" + día y en la entrada de texto use un marcador de posición o valor como aaaa / mm / dd para el usuario cuando se carga la página.

— sombreado
fuente

0

Para formatear en mm-dd-aaaa

aa = fecha.split ("-")

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

— Abilash Raghu
fuente

-1

Implementación limpia sin dependencias. 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
fuente

-2

Esta es la solucion:

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

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

con suerte, esto resolverá el problema :)

— Muhammad Waqas
fuente

1

Su solución no utiliza la entrada HTML del tipo de fecha, por lo que realmente no responde la pregunta.

— Vincent

no es necesario establecer su tipo hasta la fecha. para datepicker funcionará sin fecha. Pruébelo, con suerte resolverá su problema.

— Muhammad Waqas

-3

El formato del valor de la fecha es 'YYYY-MM-DD'. Ver el siguiente ejemplo

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

Todo lo que necesita es formatear la fecha en php, asp, ruby o lo que sea para tener ese formato.

— Charmi
fuente