2011-10-07 4 views
5

Sto visualizzando una finestra di dialogo dell'interfaccia utente jQuery che contiene un controllo jQuery UI datepicker. Il problema è che il primo campo del modulo nella finestra di dialogo è il datepicker e quindi riceve lo stato attivo quando si apre la finestra, che a sua volta fa sì che la finestra di datepicker si apra automaticamente. Non voglio che ciò accada.jQuery UI DatePicker Apri finestra di dialogo Apri

Ho provato a chiamare

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

in funzione quindi aprire la finestra di dialogo e anche dopo il codice che rende la finestra aperta, ma non funziona come quando si raggiunge quel codice, la finestra datepicker ISN 'ancora aperto.

Come posso fare in modo che la finestra di DatePicker non si apra quando viene visualizzata la finestra di dialogo ma è ancora aperta quando l'utente fa clic sull'input?

+0

possibile duplicato di [Come sfocare il primo modulo di input nella finestra di apertura] (http://stackoverflow.com/questions/5418138/how-to-blur-the-first-form-input-at -the-dialog-opening) – Teepeemm

risposta

7

è possibile utilizzare l'icona di trigger: http://jqueryui.com/demos/datepicker/#icon-trigger

E, se necessario, impedire all'utente di digitare una data.

Ho creato un violino di una finestra di dialogo con un DatePicker e non è stato possibile duplicare il problema in FF o Chrome. Capito che accada in 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"); 
    } 
}); 

in base alla risposta precedente: How to blur the first form input at the dialog opening

+0

Non so se questo è un problema di jsfiddle ma se lo metti in una pagina normalmente renderizzata accade anche in Chrome. –

+0

@NickOlsen È il dialogo che mette a fuoco il primo elemento. C'è un ticket nel team di jquery ui da risolvere. Nel frattempo, ho aggiornato la mia risposta e il mio violino. –

+0

Questo è un po 'fastidioso. Ma immagino che non puoi lamentarti troppo quando è gratis!:) –

0

Quando si definisce la finestra di dialogo, è possibile specificare l'elemento per ricevere lo stato attivo su Aperto. Impostare il focus su un elemento diverso nella finestra di

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

Si potrebbe anche mettere la vostra chiamata per nascondere il DatePicker nel codice evento open.

+0

Ho provato entrambe le idee come menzionato nella descrizione e non ha funzionato. Inserisco un breakpoint sulla funzione open e la finestra datepicker non è aperta in quel punto. Si apre dopo l'esecuzione della funzione di apertura. –

6

è possibile disattivare il DatePicker quando la finestra non è aperta.

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

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

Vedere questo in azione: http://jsfiddle.net/william/Rf37h/1/.

+0

Ho provato, ma non funzionante, puoi fornire il codice sorgente completo? –

+0

L'origine completa è nel sito Web demo: http://jsfiddle.net/william/Rf37h/1/. –

+0

Lo vedo, ma quando si chiama da un file separato, non funziona. Dobbiamo includere solo jquery1.6.3? –

0

provare questo codice una riga

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

Aggiungere un elemento nascosto prima che cercherà di messa a fuoco automatica a.

Ciò manterrà il tuo datapicker di essere concentrato su quando si apre la finestra di dialogo.

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