¿Cómo puedo saber si un navegador es compatible con <input type = 'date'>

82

Posible duplicado:
detección de tipo HTML5 e inicialización de complementos

<input type=date>

Debería crear una entrada con un selector de fechas proporcionado por el agente de usuario (opcional), pero aún no es ampliamente compatible, por lo que estamos usando un selector de fechas de jQuery UI. ¿Cómo podemos permitir que los navegadores utilicen su propio selector de fechas y recurran a la interfaz de usuario de jQuery solo si el navegador no tiene tal cosa?

En la actualidad, creo que solo Opera tiene un selector de fechas incorporado, pero una prueba para Opera obviamente sería mala. ¿Hay alguna forma de detectar esta característica (si es que se puede de forma portátil)?

DédaloOtoño
fuente
1
La detección de compatibilidad con fechas se complica por el hecho de que diferentes navegadores admiten fechas en diferentes niveles. Algunos ofrecen un buen selector de fechas de calendario. Otros simplemente validan que parece una fecha.
rjmunro
2
Exactamente por qué hice la pregunta. Quería saber si el navegador tiene un selector de fecha, no si afirma comprender las entradas de fecha. No es AFAICT un duplicado, y las respuestas a continuación no ayudan. Simplemente nunca llegué a actualizar o impugnar. Solo fui <input class=datepicker>y siempre uso jquery ui datepicker (a la antigua).
DaedalusFall
1
Cabe señalar que en los navegadores de escritorio, la interfaz de usuario de entrada de fecha a menudo deja algo que desear. Incluso si lo admiten, es posible que no desee utilizarlo. Este problema no parece afectar a los navegadores móviles.
rich remer

Respuestas:

132

El siguiente método comprueba si la mayoría de los navegadores admiten algún tipo de entrada:

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

Pero, como Simonox mencionó en los comentarios, algunos navegadores (como los navegadores de valores de Android) fingen que admiten algún tipo (como fecha), pero no ofrecen una interfaz de usuario para las entradas de fecha. Así que simonox mejoró la implementación utilizando el truco de establecer un valor ilegal en el campo de fecha. Si el navegador desinfecta esta entrada, ¡también podría ofrecer un selector de fechas!

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}
Italo Borssatto
fuente
8
No funciona en el androide de navegador, que devuelve verdadero, pero no tiene soporte para selector de fechas
Björn Andersson
33
Solicitar el atributo type no funciona en todos los navegadores de Android. Fingen que son compatibles con inputType = date, pero no ofrecen una interfaz de usuario para las entradas de fecha. Esta detección de características funcionó para mí: function () {var el = document.createElement ('input'), notADateValue = 'not-a-date'; el.setAttribute ('tipo', 'fecha'); el.setAttribute ('valor', notADateValue); return! (el.value === notADateValue); } El truco consiste en establecer un valor ilegal en un campo de fecha. Si el navegador desinfecta esta entrada, también podría ofrecer un selector de fechas.
Simonox
@simonox: una muy buena solución. Gracias por eso
Bartłomiej Zalewski
3
¿Quiere decir '! ===' = '! =='? :)
Matty Balaam
1
@MattyBalaam Obviamente, fue un error de sintaxis. Lo arreglé :)
Ionică Bizău