java - Bootstrap(en realidad JQuery) DatePicker no se oculta en el desenfoque en Wicket modal

twitter-bootstrap (2)

La idea es mover el div creado por datepicker.

Use api.jqueryui.com/datepicker/#option-beforeShow . Puede ver un ejemplo de cómo se usa en un caso de uso ligeramente diferente: cómo agregar una clase personalizada a mi JQuery UI Datepicker

Cuando agrega un elemento al DOM que ya estaba dentro del DOM, se elimina del lugar original, en otras palabras, si usa $("#dst").append("#src") , entonces se mueve el elemento src a dst.

Actualización: creo que hay una forma más sencilla: proporcione el ID del div que desea que use. De esta manera usted puede tener este div dentro de su diálogo modal.

$("#button").on(''click'', function(){ $("#datepicker").datepicker(); });

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <button id="button">choose date</button> <div id="datepicker"></div> <div>footer</div>

Tengo un DateTextField wicket DateTextField en un panel dentro de modal. Cuando se muestra datepicker desde el clic, se adjunta datepicker a la página raíz, no al modal.

Eso causa un problema: sin agregar un índice z al selector de fecha, no puedo verlo encima de modal.

Cuando me borro del selector, debería cerrarse. De alguna manera, debido a que el selector no es hijo de modal, al hacer clic fuera del selector de fecha solo se cierra, si se hace clic fuera del modal. Dentro de lo modal no pasa nada.

Puedo modificar esto por cierre automático, pero cuando ingresas y usas manualmente Retroceso para borrar el valor, no hay forma de cerrar el selector de fecha haciendo clic en algún lugar dentro del modal.

Algunos html para que quede claro:

<html> <panel> <modal> <input>datefield is here</input> </modal> <panel> <datepicker comes here> </html>

¿Cómo obtener el selector de fecha adjunto al modal, o de alguna otra manera solucionar el problema de desenfoque dentro del modal?

He intentado adjuntar al panel un evento de clic que oculta el selector de fecha, pero oculta el selector de fecha inmediatamente cuando se abre.

Editar:

Hacer clic en modal no hace nada, aunque html se mueve artificialmente allí y se coloca correctamente en el árbol DOM. Sin embargo, gracias a @Gavriel por la idea de mover cosas entre elementos DOM.

Edit2:

Código para reproducir la situación:

class MyPanel extends Panel { DateTextField field = new DateTextField("foo"); (...) add(field); } class MyPage extends WebPage { (...) ModalWindow modal = new ModalWindow("modal"); modal.add(new MyPanel()); (...) } html for the panel, containing the dateTextField <html> .. <input wicket:id="foo"></input> .. </html>

Como se ve en el fragmento, el código java genera la parte jQuery.

Edit3:

Hablo de esta criatura:

[SourceTextField sources] https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/master/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/DateTextField.java

Edit4:

Hmm ... Agregué en Javascript un detector de eventos de desenfoque dentro de la entrada en modal y ese desenfoque incluso no funcionó. Así que resulta que la verdadera pregunta en cuestión es cómo conseguir un trabajo de borrado en el modo modal. Porque eso es lo que se rompe !!

Edit5:

Lo siento, no puedo dar el violín. Desde Edit3 ves las fuentes que utilizo para el selector y lo que realmente llamo es esta función:

protected CharSequence createScript(final DateTextFieldConfig config) { return $(this).chain("datepicker", config).get(); }

que está dentro de la clase java, así que no es JavaScript en absoluto, aunque la sintaxis se ve muy similar. Para mi comprensión, los violines no llevan código java dentro de ellos. Wicket necesita la parte de Java, lo siento.

Para los que preguntan por el violín, encontré una situación similar en este violín: http://jsfiddle.net/VytfY/227/ - funciona al 100% bien, tecnologías similares que menciono aquí, no tengo ningún problema para mi problema.

Última edición:

$(''html'').on(''click'',function(e){ if(e.target.className.indexOf(''datepicker'') == -1 && e.target.className != ''next'' && e.target.className != ''prev'' && e.target.className != ''year'' && e.target.className != ''month''){ if ($(''.datepicker'').get(0) != undefined){ $(''.datepicker'').get(0).remove(); } } });

Gracias @Mathew que hiciste mi día, arriba es lo que terminó siendo. Agregué al elemento de entrada una clase datepickerContainer para que hacer clic en él no oculte el selector.

Gracias gente, esto se hace!

Una más: para IE, usa:

var canvas = $(''.datepicker'').get(0); canvas.parentNode.removeChild(canvas);

En lugar de remove directamente. Remove aún no es compatible, incluso IE11.

$("#button").on(''click'', function(){ var dt=$("#datepicker").show(); dt.datepicker().on(''change'', function (ev) { $(dt).hide(); }); $(''html'').on(''click'',function(e){ if(e.target.id !=''button''){ $(dt).hide(); } }); });