html5 - para - Cómo obtener HTML 5 tipo de entrada="fecha" que funciona en Firefox y/o IE 10
input type date set value javascript (12)
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>
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
Aquí está la solución perfecta. Debe usar JQuery datepicker para ingresar la fecha del usuario. Es muy fácil de usar y tiene muchas características que la fecha de entrada HTML no tiene.
Aquí hay un ejemplo completo con la fecha formateada en AAAA-MM-DD
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions(''forms-ext'', {types: ''date''});
webshims.polyfill(''forms forms-ext'');
$.webshims.formcfg = {
en: {
dFormat: ''-'',
dateSigns: ''-'',
patterns: {
d: "yy-mm-dd"
}
}
};
</script>
<input type="date" />
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?
Está en Firefox desde la versión 51 (26 de enero de 2017), pero no está activado por defecto (todavía)
Para activarlo:
sobre: config
dom.forms.datetime -> set to true
https://developer.mozilla.org/en-US/Firefox/Experimental_features
Esta es solo una sugerencia que sigue la respuesta de Dax. (Lo pondré en un comentario en esa respuesta, pero aún no tengo suficiente reputación para comentar las preguntas de los demás).
Id debe ser único para cada campo, por lo tanto, si tiene varios campos de fecha en su formulario (o formularios), puede usar el elemento de clase en lugar del ID:
$(function() { $( ".datepicker" ).datepicker({ dateFormat: ''yy-mm-dd'' }); });
y su aporte como:
<input type="text" class="datepicker" name="your-name" />
Ahora, cada vez que necesita el selector de fechas, simplemente agregue esa clase. PD. Lo sé, todavía tienes que usar el js :(, pero al menos estás configurado para todo tu sitio. Mis 2 centavos ...
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.
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"
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.
La versión más reciente de firefox, firefox 57 (Quantum), admite la fecha y otras características, se publicó el 14 de noviembre de 2017. Puede descargarla haciendo clic en este enlace
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>