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


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

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


550
2017-09-10 13:33


origen


Respuestas:


Es imposible cambiar el formato

Tenemos que diferenciar entre el formato por cable y el formato de presentación del navegador.

Formato de cable los Especificación de entrada de fecha HTML5 se refiere a Especificación RFC3339, que especifica un formato de fecha completa igual a: aaaa-mm-dd. Ver sección 5.6 de la especificación RFC3339 para más detalles.

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

El formato del texto del campo de entrada solo se realiza correctamente dentro de Chrome. Edge, Firefox y Opera muestran la fecha con el día, el mes y el año en el orden correcto para la configuración regional, pero usan barras de forma incoherente (30/01/2018) donde, por ejemplo, guiones (30-01-2018) se esperan según el formato de calendario de la configuración regional.

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


483
2018-03-01 15:59



Desde que se formuló esta respuesta, algunas cosas han sucedido en el ámbito web, y una de las más emocionantes es el aterrizaje de componentes web. Ahora puedes resolver este problema elegantemente con un elemento HTML5 personalizado diseñado para satisfacer sus necesidades. Si desea sobrescribir / cambiar el funcionamiento de cualquier etiqueta html solo cree la suya jugando con sombra dom.

La buena noticia es que ya hay muchos estándares disponibles, por lo que es probable que no tenga que encontrar una solución desde el principio. Sólo comprobar lo que la gente está construyendo y obtener ideas de allí.

Puede comenzar con una solución simple (y funcional) como date-util para el polímero que le permite usar una etiqueta como esta:

<date-util format="dd/MM/yyyy"></date-util>

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

Cumple con los estándares, sin cortes. 

Solo hay una trampa, aunque casi estámos allí, esta sigue siendo una solución con visión de futuro: IE 10 y los viejos amigos no admitirán la etiqueta personalizada, así que revise la polyfills disponibles, qué navegadores / versiones son compatibles, y si cubren el suficiente% de su base de usuarios ... En unos pocos meses seguramente cubrirá a la mayoría de sus usuarios, ya que todos los principales proveedores de navegadores están a bordo y entusiasmados con la especificación, y la implementación de 360 ​​está realmente cerca.

¡Espero eso ayude!


103
2017-08-21 22:01



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 manera. Un campo de fecha solo es 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/

Funciona muy bien en Chrome para escritorio, y Safari en iOS (especialmente deseable, ya que los manipuladores nativos de fecha en pantallas táctiles son imbatibles en mi humilde opinión). No revisó a los demás, pero no espera fallar en ningún Webkit.


59
2017-07-01 13:14



Es importante distinguir dos formatos diferentes:

  • El "formato de cable" RFC 3339 / ISO 8601: AAAA-MM-DD. Según la especificación HTML5, este es el formato que se debe usar para el valor de la entrada al enviar el formulario o cuando se solicita a través de DOM API. Es local y regional independiente.
  • El formato mostrado por el control de la interfaz de usuario y aceptado como entrada del usuario. Se recomienda a los vendedores del navegador que sigan 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 de sobrescribir o especificar manualmente cualquier formato.


43
2017-07-09 18:11



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.


13
2017-09-10 13:39



Después de muchos obstáculos, se me ocurrió una solución que permite cambiar el formato. Hay algunas advertencias, pero se puede usar si desea que 'Jan' o '01' se muestren constantemente. Funciona en Chrome en Windows y Mac solo debido al hecho de que Firefox todavía no es compatible con los selectores de fecha nativos.

https://github.com/northamerican/custom-input-date-format

JS:

function updateDateInputs() { 
    $('input').each(function() {
        var $date = $(this),
            date = $date.val().split('-'),
            format = ['year', 'month', 'day'];
        $.each(format, function(i, v) {
            $date.attr('data-' + v, +date[i]);
        });
    });
}

HABLAR CON DESCARO A:

$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
    $i: index($months, $month);

    input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
        content: "#{$month}";
    }
}

10
2017-08-15 01:27



Google Chrome en su última versión beta finalmente usa la entrada type=datey 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 fecha ahora fallan con diferentes formatos.


8
2018-06-16 15:30



Tratar esto si necesitas un solución rápida Para hacer aaaa-mm-dd ir "dd-Sep -2016"

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

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

Funciona para los móviles del navegador webkit y puntero-eventos 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>


4
2018-06-22 17:32



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

Usando Linux, puede cambiarlo cambiando la variable de entorno LANG, LC_TIME no parece funcionar (al menos para mí).

Puedes escribir locale en una terminal para ver tus valores actuales. Creo que el mismo concepto se puede aplicar a IOS.

p.ej: Utilizando:

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

Puedes usar http://lh.2xlibre.net/locale/pt_BR/ (cambio pt_BR según su configuración regional) para crear su configuración regional personalizada y formatear las 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/questions/21316/how-can-i-customize-a-system-locale

Puedes ver tu formato de fecha actual usando date:

$ date +%x
01-06-2015

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

Entonces, desafortunadamente la respuesta es IF LANG variable de entorno no resuelve tu problema, no hay manera todavía.


3
2018-06-01 13:28



Después de haber leído muchas discusiones, he preparado una solución simple, pero no quiero usar muchos 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:

enter image description here


2
2017-09-02 07:40



No es posible cambiar los navegadores del kit web utilizando la computadora del usuario o el formato de fecha predeterminado de los dispositivos móviles. Pero si puede usar jquery y jquery ui, hay un selector de fechas que es identificable y se puede mostrar en cualquier formato según lo desee el desarrollador. el enlace al selector de fecha jquery ui es en esta página http://jqueryui.com/datepicker/ puedes encontrar una demo, así como un código y documentación o enlace de documentación Si alguien quiere más ayuda, puede conectarme a la mejor red social http://www.funnenjoy.com 

Editar: -Me parece que Chrome usa configuraciones de idioma que por defecto son iguales a las configuraciones del sistema pero el usuario puede cambiarlas pero el desarrollador no puede obligar a los usuarios a hacerlo así que tienes que usar otras soluciones js como yo te digo puedes buscar en la web con consultas como javascript selector de fecha o selector de fecha jquery


1
2018-06-04 07:55