html5 - insertar - input type date value

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

Question

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

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

Answer 1

Como se dijo, <input type=date ... > no está completamente implementado en la mayoría de los navegadores, por lo que vamos a hablar de webkit como los navegadores (chrome).

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

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

Por ejemplo: usando:

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/ (cambie pt_BR según su configuración regional) para crear su propia configuración regional personalizada y dar formato a las fechas que 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 actual usando la date :

$ date +%x
01-06-2015

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

Entonces, desafortunadamente, la respuesta es si la variable de entorno IF LANG no resuelve su problema, aún no hay manera.

Answer 2

Como se mencionó anteriormente, oficialmente no es posible cambiar el formato. Sin embargo, es posible aplicar un estilo al campo, por lo que (con un poco de ayuda de JS) muestra la fecha en el 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 forma. A los campos de fecha solo queda 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 bien en Chrome para escritorio y Safari en iOS (especialmente deseable, ya que los manipuladores de fecha nativos en pantallas táctiles son IMHO imbatibles). No revisé para otros, pero no esperes fallar en ningún Webkit.

Answer 3

Creo que el navegador utilizará el formato de fecha local. No pienses que es posible cambiar. Por supuesto, puede utilizar un selector de fecha personalizado.

Answer 4

Desde que se hizo esta pregunta, han ocurrido algunas cosas en el ámbito web, y una de las más interesantes 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 compile la suya jugando con el dom de la sombra .

La buena noticia es que ya hay una gran cantidad de referencias disponibles, por lo que es muy probable que no necesite una solución desde cero. Solo check lo que la gente está construyendo y obtén ideas de allí.

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

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

o puede obtener un selector de fecha completo creativo y emergente 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 a su disposición una API totalmente personalizada!)

Cumple con las normas, no hacks.

Vuelva a verificar los polifills disponibles , qué browsers/versions son compatibles y si cubre un porcentaje 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!

Answer 5

Después de haber leído muchas discusiones, preparé 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:

Answer 6

Después de muchos obstáculos, se me ocurrió una solución que permite cambiar el formato. Hay algunas advertencias, pero se pueden utilizar si desea que se muestre constantemente "Jan" o "01". Funciona en Chrome en Windows y Mac solo porque Firefox aún no admite el selector de fechas nativo.

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

Answer 7

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

Por lo tanto, puede cambiarlo cambiando el formato en su servidor de implementación en la barra de tareas.

Answer 8

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

Answer 9

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

Edición: encuentro que Chrome usa la configuración de idioma que por defecto es igual a la configuración del sistema, pero el usuario puede cambiarla, pero el desarrollador no puede obligar a los usuarios a hacerlo, así que tiene que usar otras soluciones js como le digo que puede buscar en la web con una consulta como javascript recolectores de fecha o jQuery seleccionador de fecha

Answer 10

Sé que es una publicación antigua, pero viene como primera sugerencia en la búsqueda de google, respuesta corta no, respuesta recomendada para el usuario un piker de fecha personalizado, la respuesta correcta que utilizo es usar un cuadro de texto para simular la entrada de la fecha y hacer el formato que desee , aqui esta el codigo

<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 va a utilizar este código para múltiples entradas de fecha en su página, cambie la ID "xTime" de la entrada de texto tanto en la llamada de función como la entrada en sí a otra cosa y, por supuesto, use el nombre de la entrada que desea para el formulario enviar

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

Answer 11

Es importante distinguir dos formatos diferentes :

• El "formato del cable" RFC 3339 / ISO 8601: YYYY-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 recomienda a los proveedores de navegadores 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 de Idioma y texto, Chrome 20 usa el formato "m / d / aa".

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

Answer 12

Es imposible cambiar el formato.

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

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

Formato de presentación Los navegadores no tienen restricciones en la forma en que presentan una entrada de fecha. En el momento de escribir Chrome, Edge, Firefox y Opera tienen soporte de fecha (ver here ). 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 en 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 diagonales de manera inconsistente ( 30/01/2018 ) donde, por ejemplo, los guiones 30-01-2018 ( 30-01-2018 ) son esperados por la configuración regional formato de calendario.

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

Answer 13

Intente esto si necesita una solución rápida Para hacer que yyyy-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.

Los trabajos para móviles de navegador webkit y eventos punteros para IE11 + requieren 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>

Answer 14

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 especificaciones a partir de ahora para cambiar el estilo del 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 debemos intentar anularlo. El motivo es que los usuarios verán el formato de entrada de fecha igual que lo 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 interfaz de usuario en la pantalla que ven los usuarios, en su javascript / backend siempre puede mantener el formato deseado.

Consulte la página de desarrolladores de google en la misma.

Answer 15

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>