html5 - para - input type date value




Cómo obtener HTML 5 tipo de entrada="fecha" que funciona en Firefox y/o IE 10 (8)

Me parece extraño que input type="date" aún no sea compatible con Firefox después de todo este tiempo. De hecho, no creo que hayan agregado mucho (si alguno) de los nuevos tipos de HTML 5 en un elemento de entrada. No me sorprende que no sea compatible con IE10. Entonces, mi pregunta es ...

¿Cómo obtener type="date" en un elemento de input que funciona sin agregar, sin embargo, otro archivo .js (es decir, jQueryUI DatePicker Widget) solo para obtener un calendario / fecha solo para IE y Firefox Browsers? ¿Hay algo que se pueda aplicar en algún lugar (¿quizás CDN?) Que hará que esta funcionalidad funcione de manera predeterminada en Firefox y / o en los navegadores de IE. Intentar apuntar a los navegadores IE 8+ y Firefox, no importa, la versión más reciente (28.0) estará bien.

ACTUALIZACIÓN: Firefox 57+ admite el tipo de entrada = fecha


A veces no quieres utilizar Datepicker http://jqueryui.com/datepicker/ en tu proyecto porque:

  • No quieres usar jquery
  • Conflicto de versiones de jquery en tu proyecto
  • La elección del año no es conveniente. Por ejemplo, necesita 120 clics en el botón anterior para cambiar a hace 10 años.

Por favor, consulte mi código de navegador cruzado muy simple para la entrada de fecha. Mi código se aplica solo si su navegador no admite la entrada de tipo de fecha

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>



El tipo = "fecha" no es una especificación real en este punto. Es un concepto que se le ocurrió a Google y está en sus especificaciones whatwg (no oficiales) y solo es parcialmente compatible con Chrome.

http://caniuse.com/#search=date

No confiaría en este tipo de entrada en este punto. Sería bueno tenerlo, pero no preveo que este lo logre. El motivo n. ° 1 es que impone demasiada carga al navegador para determinar la mejor interfaz de usuario para una entrada algo complicada. Piénselo desde una perspectiva receptiva, ¿cómo sabría alguno de los proveedores qué funcionará mejor con su UI, digamos a 400 píxeles, 800 píxeles y 1200 píxeles de ancho?



Gracias Alexander, encontré la forma de modificar el formato para en lang. (No sabía qué idioma usa ese formato)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');

Hay una manera simple de deshacerse de esta restricción mediante el uso del componente datePicker proporcionado por jQuery.

  1. Incluya las bibliotecas jQuery y jQuery UI (todavía estoy usando una antigua)

    • src = "js / jquery-1.7.2.js"
    • src = "js / jquery-ui-1.7.2.js"
  2. Use el siguiente recorte

    $(function() {
         $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
    });
    

Ver jQuery UI DatePicker - Cambiar formato de fecha si es necesario.


Puedes probar webshims , que está disponible en cdn + solo carga el polyfill, si es necesario.

Aquí hay una demostración con CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

En caso de que la configuración predeterminada no satisfaga, hay muchas formas de configurarla . Aquí encontrará el configurador datepicker .

Nota: Si bien puede haber nuevas versiones de corrección de errores para webshim en el futuro. Ya no habrá mayores lanzamientos. Esto incluye soporte para jQuery 3.0 o cualquier característica nueva.


Si bien esto no le permite obtener un identificador de fecha ui, Mozilla permite el uso de patrones, por lo que al menos puede obtener la validación de fecha con algo como esto:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

Finalmente, estoy de acuerdo con @SuperUberDuper en que Mozilla está muy atrás al incluir esto de forma nativa.





firefox