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

Estoy trabajando con elementos HTML5 en mi página web. Por defecto, la entrada type="date"muestra la fecha como YYYY-MM-DD.

La pregunta es, ¿es posible cambiar su formato a algo como DD-MM-YYYY:?

Es imposible cambiar el formato.

Tenemos que diferenciar entre el formato over the wire y el formato de presentación del navegador.

Formato de alambre

La especificación de entrada de fecha HTML5 se refiere a la especificación RFC 3339 , que especifica un formato de fecha completa igual a: yyyy-mm-dd. Consulte la sección 5.6 de la especificación RFC 3339 para obtener más detalles.

Este formato es usado por el valueatributo HTML y la propiedad DOM y es el que se usa cuando se envía un formulario ordinario.

Formato de presentación

Los navegadores no tienen restricciones en cómo presentan una entrada de fecha. Al momento de escribir, Chrome, Edge, Firefox y Opera tienen soporte para fechas (ver aquí ). Todos muestran un selector de fecha y formatean el texto en el campo de entrada.

Dispositivos de escritorio

Para Chrome, Firefox y Opera, el formato del texto del campo de entrada se basa en la configuración de idioma del navegador. Para Edge, se basa en la configuración de idioma de Windows. Lamentablemente, todos los navegadores web ignoran el formato de fecha configurado en el sistema operativo. Para mí, este es un comportamiento muy extraño y algo a tener en cuenta al usar este tipo de entrada. Por ejemplo, los usuarios holandeses que tienen su sistema operativo o el conjunto de idioma del navegador a en-usserán mostrados 01/30/2019en lugar del formato que están acostumbrados a: 30-01-2019.

Internet Explorer 9, 10 y 11 muestran un campo de entrada de texto con el formato de conexión.

Dispositivos móviles

Específicamente para Chrome en Android, el formato se basa en el idioma de visualización de Android. Sospecho que lo mismo es cierto para otros navegadores, aunque no he podido verificar esto.

Desde que se hizo esta pregunta, han sucedido varias cosas en el ámbito web, y una de las más emocionantes es el aterrizaje de componentes web . Ahora puede resolver este problema con elegancia con un elemento HTML5 personalizado diseñado para satisfacer sus necesidades. Si desea anular / cambiar el funcionamiento de cualquier etiqueta html, simplemente construya la suya jugando con la sombra dom .

La buena noticia es que ya hay muchas repeticiones disponibles, por lo que lo más probable es que no necesite encontrar una solución desde cero. Simplemente verifique lo que la gente está construyendo y obtenga ideas a partir de ahí.

Puede comenzar con una solución simple (y funcional) como entrada de fecha y hora para polímero que le permite usar una etiqueta como esta:

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

o puede obtener selectores de fecha completos creativos y emergentes con el estilo que desee , con el formato y las configuraciones regionales que desee, las devoluciones de llamada y su larga lista de opciones (¡tiene una API personalizada completa a su disposición!)

Cumple con los estándares, no hacks.

Vuelva a verificar los polyfills disponibles , los navegadores / versiones que admiten, y si cubre suficiente% de su base de usuarios ... Es 2018, por lo que es probable que cubra a la mayoría de sus usuarios.

¡Espero eso ayude!

Como se mencionó anteriormente, oficialmente no es posible cambiar el formato. Sin embargo, es posible diseñar el campo, por lo que (con un poco de ayuda de JS) muestra la fecha en el formato que deseamos. Algunas de las posibilidades de manipular la entrada de fecha se pierden de esta manera, pero si el deseo de forzar el formato es mayor, esta solución podría ser una forma. Los campos de fecha solo se quedan así:

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

El resto es un poco de CSS y 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 bien en Chrome para escritorio y Safari en iOS (especialmente deseable, ya que los manipuladores de fecha nativos en pantallas táctiles son inmejorables en mi humilde opinión). No buscó otros, pero no espere fallar en ningún Webkit.

Es importante distinguir dos formatos diferentes :

• El "formato de cable" RFC 3339 / ISO 8601: AAAA-MM-DD. De acuerdo con la especificación HTML5, este es el formato que debe usarse para el valor de la entrada al enviar el formulario o cuando se solicita a través de la API DOM. Es local e independiente de la región.
• El formato mostrado por el control de la interfaz de usuario y aceptado como entrada del usuario. Se alienta a los proveedores de navegadores a seguir la selección de preferencias del usuario. Por ejemplo, en Mac OS con la región "Estados Unidos" seleccionada en el panel de preferencias Idioma y texto, Chrome 20 usa el formato "m / d / aa".

La especificación HTML5 no incluye ningún medio para anular o especificar manualmente ninguno de los formatos.

Creo que el navegador usará el formato de fecha local. No pienses que es posible cambiar. Por supuesto, podría usar un selector de fecha personalizado.

Google Chrome en su última versión beta finalmente usa la entrada type=date, y el formato es DD-MM-YYYY.

Entonces debe haber una manera de forzar un formato específico. Estoy desarrollando una página web HTML5 y las búsquedas de fechas ahora fallan con diferentes formatos.

Pruebe esto si necesita una solución rápida Para hacer aaaa-mm-dd vaya "dd- Sep -2016"

1) Cree cerca de su entrada una clase de intervalo (actúe como etiqueta)

2) Actualice la etiqueta cada vez que el usuario cambie su fecha o cuando necesite cargar datos.

Funciona para móviles de navegador webkit y eventos de puntero para IE11 + requiere jQuery y 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>

Después de haber leído muchas discusiones, he preparado una solución simple pero no quiero usar mucho Jquery y CSS, solo algunos 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;
}

Salida:

Como se dijo, el <input type=date ... >no está completamente implementado en la mayoría de los navegadores, así que hablemos de webkit como los navegadores (Chrome).

Usando Linux, puede cambiarlo cambiando la variable de entorno LANG, LC_TIMEparece que no funciona (al menos para mí).

Puede escribir localeuna terminal para ver sus valores actuales. Creo que el mismo concepto se puede aplicar a iOS.

por ejemplo: Usar:

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

La fecha se muestra como mm/dd/yyyy

Utilizando:

LANG=pt_BR /opt/google/chrome/chrome

La fecha se muestra como dd/mm/yyyy

Puede usar http://lh.2xlibre.net/locale/pt_BR/ (cambiar pt_BRsegún su configuración regional) para crear su propia configuración regional personalizada y formatear sus fechas como desee.

Una buena referencia más avanzada sobre cómo cambiar la fecha predeterminada del sistema es: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ y https: // askubuntu. com / preguntas / 21316 / cómo-puedo-personalizar-un-sistema-local

Puede ver su formato de fecha actual real usando date:

$ date +%x
01-06-2015

Pero como LC_TIMEy d_fmtparece ser rechazado por Chrome (y creo que es un error en webkit o Chrome), lamentablemente no funciona . : '(

Entonces, desafortunadamente la respuesta, si LANGla variable de entorno IF no resuelve su problema, todavía no hay manera.

Los navegadores obtienen el formato de entrada de fecha del formato de fecha del sistema del usuario.

(Probado en navegadores compatibles, Chrome, Edge).

Como a partir de ahora no hay un estándar definido por las especificaciones para cambiar el estilo del control de fecha, no es posible implementarlo en los navegadores.

Sin embargo, este comportamiento de obtener el formato de fecha de la configuración del sistema es mejor y sugiero encarecidamente que no intentemos anularlo. La razón es que los usuarios verán el formato de entrada de fecha igual al que han configurado en el sistema / dispositivo y con el que se sienten cómodos o coinciden con su ubicación.

Recuerde, este es solo el formato de UI en la pantalla que los usuarios ven, en su javascript / backend siempre puede mantener el formato deseado.

Consulte la página de desarrolladores de Google en el mismo.

No es posible cambiar los navegadores de kit web usando el formato de fecha predeterminado de la computadora o los móviles del usuario. Pero si puede usar jquery y jquery UI, hay un selector de fecha que puede designarse y puede mostrarse en cualquier formato que el desarrollador desee. el enlace al selector de fechas de la interfaz de usuario jquery se encuentra en esta página http://jqueryui.com/datepicker/ puede encontrar la demostración, así como el código y el enlace de documentación o documentación

Editar: -Creo que Chrome usa configuraciones de idioma que son por defecto iguales a las configuraciones del sistema, pero el usuario puede cambiarlas, pero el desarrollador no puede obligar a los usuarios a hacerlo, por lo que debe usar otras soluciones js como le digo que puede buscar en la web con consultas como javascript date-pickers o jquery date-picker

Encontré una forma de cambiar el formato, es una forma complicada, simplemente cambié la apariencia de los campos de entrada de fecha usando solo un 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">

Dado que la publicación está activa hace 2 meses. así que pensé dar mi opinión también.

En mi caso, recibo la fecha de un lector de tarjetas que viene en formato dd / mm / aaaa.

lo que hago. P.ej

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();">

qué hace el código:

1. divide la fecha que obtengo como dd / mm / aaaa (usando split ()) en base a "/" y crea una matriz,
2. luego invierte la matriz (usando reverse ()) ya que la entrada de fecha admite el reverso de lo que obtengo.
3. luego une (usando join ()) la matriz a una cadena de acuerdo con el formato requerido por el campo de entrada

Todo esto se hace en una sola línea.

Pensé que esto ayudaría a alguien, así que escribí esto.

Busqué este problema hace 2 años, y mis búsquedas en Google me llevan nuevamente a esta pregunta. No pierdas tu tiempo tratando de manejar esto con JavaScript puro. Pierdo el tiempo intentando hacerlo dd/mm/yyyy. No hay soluciones completas que se adapten a todos los navegadores. Por lo tanto, recomiendo usar jQuery datepicker o decirle a su cliente que trabaje con el formato de fecha predeterminado

Sé que es una publicación antigua, pero viene como primera sugerencia en la búsqueda de Google, respuesta corta no, respuesta recomendada al usuario, un marcador de fecha personalizado, la respuesta correcta que uso es usar un cuadro de texto para simular la entrada de fecha y hacer el 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 el navegador que admite 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 usará este código para múltiples entradas de fecha en su página, cambie la ID "xTime" de la entrada de texto en la llamada de función y la entrada en sí misma a otra cosa y, por supuesto, use 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 el ingreso de texto use un marcador de posición o valor como aaaa / mm / dd para el usuario cuando se carga la página.