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

767

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

Tural Ali
fuente
44
Google ha creado un FAQ para Chrome: developers.google.com/web/updates/2012/08/… Por lo tanto, el formato se basa en la configuración regional del sistema operativo.
Endy Tjahjono
Pierdo el tiempo intentando hacerlo dd/mm/yyyy. simplemente use otra biblioteca como moment o jQuery datepicker
Ali Al Amine

Respuestas:

608

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.

David Walschots
fuente
Hubiera esperado una marca de tiempo JS, y no el formato de cable. Y una forma de cambiar el formato de presentación, es bastante difícil de hacer coherente.
Allan Kimmer Jensen
77
@AllanKimmerJensen, aunque entiendo tus pensamientos. Creo que la decisión de usar el formato especificado en RFC3339 es correcta, ya que no crea un acoplamiento entre HTML y JavaScript. En cuanto a su segundo punto, creo que desde una perspectiva de usabilidad, tendría sentido que el usuario vea el calendario de acuerdo con sus preferencias regionales.
David Walschots
10
Si la aplicación es pt_BR, espero una entrada pt_BR. La configuración de mi sistema no importa. HTML5 necesita alguna forma de aplicar la configuración regional.
iurisilvio
55
Utilizo el idioma español para la configuración de fecha / moneda, ya que estoy en España, pero mi primer idioma es el inglés y estoy acostumbrado a un diseño de teclado de EE. UU., Así que uso el teclado de inglés / EE. UU. Mis clientes son europeos de habla francesa ... ¡Ojalá pudiera insinuar que Chrome, etc., dejara de mostrar fechas en formato USA mm-dd-aaaa!
Luke H
77
qué componente inútil, a quién diablos se le ocurren estas especificaciones?
Boh
144

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!

joseldn
fuente
pero, ¿alguno de esos es localizable? es decir, cambiar los nombres de los meses a idiomas distintos del inglés. ¿Y funcionan en computadoras de escritorio y dispositivos móviles?
Sam Hasler
Claro, son localizables. Puede aprovechar la configuración regional del sistema (es decir: is.gd/QSkwAY ) o proporcionar sus archivos i18n dentro del componente web (es decir: is.gd/Ru9U82 ). En cuanto a los navegadores móviles, son compatibles con polyfills, aunque no 100% (todavía) ... Verifique el enlace de navegadores / versiones que publiqué. De nuevo, esto es un borde sangriento. Si mira hacia el futuro, es una gran solución.
joseldn
Lo siento, no había visto tu último comentario. Esto: jcrowther.io/2015/05/11/i18n-and-web-components parece bastante útil y debe incluirse en la respuesta.
Sam Hasler
Me alegra que lo encuentres útil. Actualizaré la respuesta con todo.
joseldn
@SDude Parece que los enlaces que indicó que creía que valía la pena incluir aún no están incluidos.
Mark Amery
79

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.

pmucha
fuente
1
Esto no funciona, cambia a MMMM YYYY DD, solo los DDcambios. -1 por esto, lo siento
Can O 'Spam
3
@SamSwift: ¿ha hecho clic en "Ejecutar" después de cambiar el valor? ;)
pmucha
99
No, no lo es. No entiendes cómo funciona: juegas con JS y deberías hacerlo con HTML. Ha cambiado el formato de entrada de la momentfunción y no es el camino a seguir. Debería haber cambiado data-date-format="DD-YYYY-MM"y luego obtendría 09-2015-08, que es el resultado correcto.
pmucha
3
Tampoco funciona en Safari, Edge, Opera, lo que lo hace inutilizable
MaxZoom
2
Roto en Firefox
Alexander Lallier
51

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.

Juan
fuente
1
¿El valueatributo coincide con el formato de conexión o lo que se muestra al usuario?
Flimm
2
@Flimm el valueatributo siempre coincide con el formato del cable.
David Walschots
14

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.

Michael Mior
fuente
1
formato de fecha local significa nuestro formato de fecha predeterminado del teléfono o formato de fecha de ubicación?
Govindarao Kondala
2
Depende de qué navegador móvil estés usando. Pero sospecho que será el valor predeterminado del teléfono.
Michael Mior
2
El formato "local" se basa en la ubicación geográfica, que es posiblemente la peor forma de determinar un formato de fecha. ¿Esperaría un estadounidense que viaja a Europa que su teléfono inteligente comience a mostrar la hora en formato de 24 horas y las fechas como aaaa-mm-dd o dd / mm / aaaa? ¿O viceversa para un europeo en los Estados Unidos?
RobG
10

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.

Turamarth
fuente
18
El formato DD-MM-AAAA que menciona es probablemente su formato de calendario local. No es aconsejable (y por lo que puedo ver, imposible dentro de los estándares HTML5 actuales) forzar un formato específico en los visitantes de un sitio web, porque podrían usarse en un formato de calendario diferente al que usted les impone.
David Walschots
3
Se está refiriendo al formato de presentación, porque si intenta leer input.val (), google chrome (v35) devuelve la fecha en formato aaaa-mm-dd, sea cual sea el formato de presentación;)
Tilt
3
@DavidWalschots si solo los estadounidenses se dieran cuenta de lo imprudente que es forzar el formato mdy retrasado en el resto del mundo.
user275801
@ user275801 Si bien estoy de acuerdo en que M-D-Yes un formato extraño. No he visto a estadounidenses forzarlo a otros. :-)
David Walschots
2
@DavidWalschots, la mayoría de los sistemas operativos y de software que he visto requiere que usted "opte por no participar" del formato estadounidense mdy. En ese sentido, de hecho es "forzado". De hecho, mi Linux tiene todas las configuraciones regionales para Australia, pero mi navegador (un navegador americano, si se puede llamar así) todavía se encarga de mostrar todas las fechas en formato mdy, y en este caso no puedo " optar por no".
user275801
5

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>

Miguel
fuente
2
Esto no responde la pregunta y requiere 2 bibliotecas, ninguna de las cuales está etiquetada o solicitada. Tampoco permite la entrada manual de la fecha.
RobG
no se le pidió que cambiara, solo muestre el formato ... puede hacer esto como una vista previa y usar la entrada con eventos de cambio para actualizar el formato de todos modos.
Miguel
4

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:

ingrese la descripción de la imagen aquí

Ashish Bhatt
fuente
3

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.

tonelada
fuente
+1 ¡Genial! usando: LANG=ja_JP.UTF-8 chromium-browserhizo el truco para mí. También funciona con Vivaldi y supongo que también en otros navegadores. ¡Gracias!
lepe
2

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.

Rahul R.
fuente
@downvoters, mejor dejar un comentario sobre -1, para mejorar las respuestas actuales y futuras.
Rahul R.
2

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

Ravinder Payal
fuente
2

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

safi eddine
fuente
0

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.

Hezbullah Shah
fuente
Esto no responde a la pregunta formulada; está analizando un formato personalizado aquí, sin cambiar el formato que <input>utiliza para mostrar el valor.
Mark Amery
esto es solo una
solución
0

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

Ali Al Amine
fuente
-1

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.

sombreado
fuente