2011-10-07 27 views
5

Estoy mostrando una ventana de diálogo de jQuery UI que contiene un control jQuery UI datepicker en él. El problema es que el primer campo de formulario en la ventana de diálogo es el selector de fecha y, por lo tanto, recibe el foco cuando se abre la ventana, lo que a su vez hace que la ventana del selector de fecha se abra automáticamente. No quiero que esto ocurra.jQuery UI DatePicker Abrir en la ventana de diálogo Abrir

He intentado llamar

$('#Date').datepicker('hide') 

en función a continuación, abra la ventana de diálogo y también después del código que hace que el diálogo abierto, pero no funciona como cuando se llega a ese código, la ventana de selector de fecha ISN todavía está abierto

¿Cómo puedo hacer para que la ventana de datepicker no se abra cuando se abre la ventana de diálogo pero todavía lo tiene abierto cuando el usuario hace clic en la entrada?

+0

posible duplicado de [Cómo desenfocar la primera entrada de un formulario en la apertura de diálogo] (http://stackoverflow.com/questions/5418138/how-to-blur-the-first-form-input-at -the-dialog-opening) – Teepeemm

Respuesta

7

podría utilizar el icono de disparo: http://jqueryui.com/demos/datepicker/#icon-trigger

Y, si es necesario, impedir que el usuario escriba en una fecha.

Creé un violín de un diálogo con un selector de fecha y no pude duplicar el problema en FF o Chrome. Tengo que suceder en IE.

http://jsfiddle.net/458bM/2/

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

$(".datepicker").datepicker("disable"); 

$("#dialog").dialog({ 
width: 400, 
modal: true, 
open: function(event, ui) { 
    $(".datepicker").datepicker("enable"); 
    } 
}); 

Con base en la respuesta anterior: How to blur the first form input at the dialog opening

+0

No sé si se trata de un problema jsfiddle, pero si lo pones en una página normalmente renderizada, también ocurre en Chrome. –

+0

@NickOlsen Es el diálogo que pone el foco en el primer elemento. Hay un boleto en el equipo de jquery ui para arreglarlo. Mientras tanto, actualicé mi respuesta y violín. –

+0

Eso es algo molesto. Pero supongo que no puedes quejarte mucho cuando es gratis.:) –

0

Cuando define su cuadro de diálogo puede especificar el elemento para recibir el foco en abierto. Establecer el foco a un elemento diferente en el cuadro de diálogo

$('#myDialog').dialog({ 
    open: function (event, ui) 
     { 
      $('#myInputBox').focus(); 
     } 
}); 

También puede poner su llamada para ocultar el selector de fechas en el código de evento abierta.

+0

Intenté ambas ideas como se menciona en la descripción y no funcionó. Pongo un punto de interrupción en la función de abrir y la ventana del selector de fecha no está abierta en ese punto. Se abre después de que se ejecuta la función de abrir. –

6

puede desactivar el selector de fechas cuando el diálogo no está abierto.

$('#datepicker').datepicker({ 
    ... 
    disabled: true 
}); 

$('#dialog').dialog({ 
    open: function(event, ui) { 
     $('#datepicker').datepicker('enable'); 
    }, 
    close: function(event, ui) { 
     $('#datepicker').datepicker('disable'); 
    }, 
    ... 
}); 

Consulte esto en acción: http://jsfiddle.net/william/Rf37h/1/.

+0

Lo intenté, pero no funcionó, ¿Puedes dar el código fuente completo? –

+0

La fuente completa se encuentra en el sitio web de demostración: http://jsfiddle.net/william/Rf37h/1/. –

+0

Lo veo, pero cuando se llama desde un archivo separado, no funciona. Necesitamos solo incluir jquery1.6.3? –

0

Try Este código de una línea

$(document).ready (function() { 
$('#dialog_modal_body').on("click", ".datepicker", function(){ 
     $("#ui-datepicker-div").css("z-index", "100000"); 
}); 
}); 
0

Añadir un elemento oculto antes de que se tratará de enfocar automáticamente a.

Esto evitará que su selector de fecha se enfoque al abrir el cuadro de diálogo.

<span class="ui-helper-hidden-accessible"><input type="text"/>Prevents autofocus from opening start datepicker on dialog load</span> 
Cuestiones relacionadas