2010-04-05 23 views
33

Tengo un formulario con muchos elementos de entrada. Algunos son campos de fecha con un selector de fechas jQuery UI alraedy adjunta:Prueba si el elemento ya tiene jQuery datepicker

$("#someElement").mask("9?9/99/9999").datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' }); 

entonces tengo un comando de teclado con destino a esta función:

function openCalendar() { 
    var selection = document.activeElement; 

    // { Need to test here if datepicker has already been initialized 
     $(selection).datepicker("show"); 
    // } 
} 

Esto funciona muy bien para los elementos que ya tienen el selector de fechas en ellos. Sin embargo, cualquier otro campo generará un error de javascript. Me pregunto cuál es la mejor manera de probar si Datepicker ya se ha inicializado en ese campo.

Respuesta

62

Wow no puedo creer que me haya perdido esta. Línea 108 de ui.datepicker.js:

/* Class name added to elements to indicate already configured with a date picker. */ 
markerClassName: 'hasDatepicker', 

Así que sólo hay que probar para hasClass('hasDatepicker'). Esta parece ser la forma más directa. Por otra parte, esta declaración comprueba si el planificador de evento es abierto actualmente (para cualquiera que esté interesado):

if ($("#ui-datepicker-div").is(":visible") && $("#ui-datepicker-div").html() != "") { 
    // datepicker is open. you need the second condition because it starts off as visible but empty 
} 
+7

Para verificar si jQuery UI autocompletar está inicializado, lo he usado: '$ ('# myinput'). Is (': data (autocomplete)')'. Supongo que esto también funciona para datepicker. –

+0

El hecho de que la clase de marcador exista no siempre significa que el marcador de fecha está en el nodo. En Datatables cuando cambia a la vista de la tarjeta, el datepicker se elimina del nodo, ¡pero la clase permanece! Por lo tanto, debe agregar la verificación adicional como se indicó anteriormente Y eliminar la clase si necesita reencaminar ya que datepicker utiliza internamente la clase como un proxy para evitar enlaces múltiples. – Jeff

1

Una solución básica es la de establecer un atributo en el momento de la fijación selector de fechas y luego se comprueba que:

$("#someElement").mask("9?9/99/9999") 
.datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' }) 
.attr("data-calendar", "true"); 

entonces se podría hacer:

if ($(selection).attr("data-calendar") == "true") 
    $(selection).datepicker("show"); 

¿Existe una manera más directa?

+0

me gusta este enfoque, pero me gustaría utilizar 'addClass ("datos de calendario")', que luego permitirá utilizar un selector simple como esto : '$ (". data-calendar "). datepicker (" mostrar ");'. – Travis

9

1) Si el código produce un error al intentar abrir el selector de fecha, puede poner el código en try..catch

2) Puede establecer algunos datos al campo de entrada en la inicialización del selector de fecha

$("#someElement").data("datepicker-initialized", true); 

3) Se pueden utilizar los datos almacenados por el selector de fechas complemento

if($("#someElement").data("datepicker") != null){ 
    // datepicker initialized 
} 

o

if($.data($('#someElement').get(0), 'datepicker')){ 
    // datepicker initialized 
} 

4) selector de fechas internamente utiliza una función _getInst

if($.datepicker._getInst($('#someElement')[0]) != null){} 

el método tiene casi el mismo que el ejemplo 3.

No se pudo encontrar ninguna solución mejor.

+0

Gracias! Eso me ayudó mucho. –

+0

'if ($ (" # someElement "). Data (" datepicker ")! == null)' no es exactamente correcto, debido a 'data()' que devuelve 'undefined', no' null'. Sin embargo, una comparación '! =' Menos estricta funciona. –

+0

Comprobé jQuery 1.5, que fue la última versión en abril de 2010, para asegurarme de que devuelve 'undefined' o' null'. Devolvió 'undefined'. Actualicé mi respuesta. Gracias por el comentario. – Rafael

0

Tengo otro caso. Mi script está copiando los últimos elementos de la tabla, incluido datepicker.

El jquery no funcionará porque el elemento copiado tiene la marca que dice "hasDatepicker".

Para activar Datepicker en un nuevo elemento, elimine ese nombre de clase y lo inicie, así.

$("#yournewelementid").attr("class","your-class-name"); 
$("#yournewelementid").datepicker();  
-2

Esta fue mi solución :)

if(typeof jQuery.fn.datepicker !== "undefined") 
+0

Esto es una prueba si en la ventana actual está disponible datepicker, no si está en la entrada. – Gh61

Cuestiones relacionadas