jquery ui - type - ¿Cómo puedo desactivar la nueva entrada de fecha Chrome HTML5?

input type date safari

Question

La actualización reciente (V 20.x) de Chrome ha roto uno de mis formularios con el nuevo tipo de entrada de fecha y hora incorporado. Llamaré a jQuery UI datepicker en un campo de fecha y solía funcionar perfectamente antes de la actualización. Después de la actualización, Chrome anula mi marcador de posición y hace que el widget de jQuery UI no se pueda utilizar.

¿Alguna idea de cómo puedo evitar que Chrome se estropee con mis campos de entrada sin cambiar su tipo?

Answer 1

Esto funciona para mí:

;
(function ($) {
$(document).ready(function (event) {
$(document).on(''click input'', ''input[type="date"], input[type="text"].date-picker'', function (e) {
var $this = $(this);
$this.prop(''type'', ''text'').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: ''yy-mm-dd'',
showWeek: true,
firstDay: 1
});
setTimeout(function() {
$this.datepicker(''show'');
}, 1);
});
});
})(jQuery, jQuery.ui);

Answer 2

Estoy completamente de acuerdo con TJ.

Si está realizando algún tipo de edición, prellenado o configuración dinámica de valores de fecha, también deberá saber que a partir del 3/3/13 Chrome solo respeta el formato de fecha estándar ISO (aaaa-mm-dd). ) Mostrará las fechas para el usuario en formato local (''mm / dd / aa'' para los EE. UU.) Pero ignorará cualquier valor establecido en el HTML que no sea el formato estándar ISO.

Para convertir en carga de página, puede usar el sniffer de agente de usuario de TJ y hacer esto:

if (navigator.userAgent.indexOf(''Chrome/2'') != -1) {
$(''input[type=date]'').each(function(){
var d = trim(this.getAttribute(''value''));
if (d){
d = new Date(d);
var dStr = d.toISOString().split(''T'')[0];
this.value = dStr;
}
});
}

Si, por ejemplo, optas por deshabilitar el marcador de fecha nativo y usar jQuery''s, también necesitarás configurar el formato de fecha para que coincida con el campo de fecha de Chrome, o no mostrará la entrada que el jqueri jQuery le está enviando:

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

¡Agregue esas dos cosas a la primera opción en la respuesta de TJ y tiene el marcador de fechas de jQuery trabajando en Chrome sin errores!

Depender de fechadores nativos es idealmente la mejor solución. Pero cuando necesite algo que admita fechas de bloqueo, rangos de fechas o simplemente desee que se vea más bonito, esto funcionará.

Answer 3

Para quitar la flecha y los botones de centrifugado:

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}

Todavía puede activar el calendario presionando Alt + flecha abajo (marcada en Windows 10).

Para deshabilitar, debes agregar un poco de JavaScript:

dateInput.addEventListener(''keydown'', function(event) {
if (event.keyIdentifier == "Down") {
event.preventDefault()
}
}, false);

Answer 4

Tienes un par de opciones diferentes.

Puede detectar que el usuario está usando Chrome olfateando la cadena de agente de usuario y evitando los eventos de clic.

if (navigator.userAgent.indexOf(''Chrome'') != -1) {
$(''input[type=date]'').on(''click'', function(event) {
event.preventDefault();
});
}

El rastreo de agente de usuario es una mala idea , pero funcionará.

El enfoque ideal en mi mente es detectar si el navegador admite un marcador de fecha nativo, si lo usa, si no utiliza la interfaz de usuario de jQuery.

if (!Modernizr.inputtypes[''date'']) {
$(''input[type=date]'').datepicker({
// Consistent format with the HTML5 picker
dateFormat: ''yy-mm-dd''
});
}​

Ejemplo - http://jsfiddle.net/tj_vantoll/8Wn34/

Por supuesto, dado que Chrome admite un selector de fecha nativo, el usuario lo verá en lugar de jQuery UI. Pero al menos no tendría un choque de funcionalidad y la interfaz de usuario sería utilizable para el usuario final.

Esto me intrigó, así que escribí algo sobre el uso del marcador de jQuery UI junto con el control nativo - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/ .

Editar

Si está interesado, recientemente di una charla sobre el uso de los widgets de jQuery UI junto con los controles de formulario HTML5.

• Slides
• Video