¿Hay alguna forma de cambiar el formato input type="date"?

Desde que se hizo esta pregunta han sucedido bastantes cosas en el ámbito web, y una de las más emocionantes es el aterrizaje de componentes web. Ahora puede resolver este problema elegantemente 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 el shadow dom .

La buena noticia es que ya hay una gran cantidad de repeticiones disponibles, por lo que lo más probable es que no necesite encuentre una solución desde cero. Simplemente compruebe lo que la gente está construyendo y obtenga ideas de allí.

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

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

O puede obtener seleccionadores de fecha completos creativos y emergentes con el estilo que desee, con el formato y las configuraciones regionales que desee, devoluciones de llamada y su larga lista de opciones (tiene toda una API personalizada en su ¡eliminación!)

Cumple con los estándares, sin hacks.

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

Espero que 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 un formato que deseemos. 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. Los campos de una fecha solo se mantienen 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 de fecha nativos en las pantallas táctiles son imbatibles en MI humilde opinión). No comprobé otros, pero no esperes fallar en ningún Webkit.

Es importante distinguir dos formatos diferentes:

• El "formato de alambre" RFC 3339/ISO 8601: AAAA-MM-DD. De acuerdo con 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 la API DOM. Es local y región independiente.
• El formato mostrado por el control de interfaz de usuario y aceptado como entrada de usuario. Se recomienda a los proveedores de navegadores que sigan la selección de preferencias del usuario. Para ejemplo, en Mac OS con la región "Estados Unidos" seleccionada en el panel de preferencias de idioma y texto, Chrome 20 utiliza el formato "m / d / yy".

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

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

Después de muchos obstáculos, se me ocurrió una solución que permite cambiar el formato. Hay algunas advertencias, pero es utilizable si desea que 'Jan' o '01' se muestre de manera consistente. 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 en absoluto.

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

SASS:

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

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

Así que 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.

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

1) Crea cerca de tu entrada una clase span (actúa 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>

Como se ha dicho, 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 entornoLANG, LC_TIME no parece funcionar (al menos para mí).

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

Eg: Usando:

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

La fecha se muestra como mm/dd/yyyy

Usando:

LANG=pt_BR /opt/google/chrome/chrome

La fecha se muestra como dd/mm/yyyy

Puedes usar http://lh.2xlibre.net/locale/pt_BR / (cambie pt_BR por 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/questions/21316/how-can-i-customize-a-system-locale

Usted puede ver que la corriente real formato de fecha 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), tristemente no funciona. :'(

Así que, desafortunadamente, la respuesta, es SI la variable de entorno LANG no resuelve su problema, todavía no hay manera.

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

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

Editar: - Me parece que Chrome utiliza la configuración de idioma que son por defecto igual a la configuración del sistema, pero el usuario puede cambiarlos, pero el desarrollador no puede forzar a los usuarios a hacerlo, por lo que tiene que utilizar otras soluciones js como le digo que puede buscar en la web con consulta como javascript fecha-selectores o jquery fecha-selector

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

(Probado en navegadores compatibles, Chrome, Edge.)

Como no hay un estándar definido por las especificaciones a partir de ahora para cambiar el estilo de control de fecha, no es posible implementar el mismo 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 sobrescribirlo. La razón es, los usuarios verán el el formato de entrada de fecha es el mismo que han configurado en el sistema / dispositivo y con el que se sienten cómodos o coincide con su configuración regional.

Recuerde, este es solo el formato de interfaz de usuario 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.

Sé que es un post antiguo, pero viene como primera sugerencia en la búsqueda de Google, respuesta corta no, usuario de respuesta recomendada una fecha personalizada piker, la respuesta correcta que uso es el uso de un cuadro de texto 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 un texto normal entrada.

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

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

function dmy() {
  var mydate = document.getElementById('dat').value;
  //alert(mydate);
  var yf = mydate.split("-")[0];
  var mf = mydate.split("-")[1];
  var df = mydate.split("-")[2];

  var b = localStorage.getItem("b");
  if (!b) {
    b = [];
  } else {
    b = JSON.parse(b);

  }
  b.push({
    df: df,
    mf: mf,
    yf: yf
  });

  localStorage.setItem("b", JSON.stringify(b));
}

function showdate() {
  var sdate = JSON.parse(localStorage.getItem('b'));
  var a = '';
  if (sdate != null) {
    for (var i = 0; i < sdate.length; i++) {
      a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '<br>';

    }
  } else {
    a = 'No DATA';
  }
  document.getElementById('conversion').innerHTML = a;
}

<form onsubmit=dmy()>
  <input type="date" name="dat" id="dat">
  <input type="submit" value="submit">
</form>
<input type="button" value="convert" onclick=showdate()>
<div id="conversion"></div>

El formato del selector de fecha HTML5 depende del formato del formato de fecha y hora de la máquina del servidor.

Así que puede cambiarlo cambiando el formato en su servidor de implementación en la barra de tareas..