Estoy usando jQueryUI datepicker en una entrada y, de forma predeterminada, jQueryUI agrega #ui-datepicker-div al body del documento.
La entrada en cuestión está en un div "emergente" en la pantalla, lo que significa que cualquier clic fuera de ese div cerrará el "emergente".
Debido a que jQueryUI está agregando el selector de fechas al cuerpo, cuando hago clic en el selector de fechas, la "ventana emergente" desaparece ... así que intenté moverlo a la ventana emergente usando la respuesta (actualmente) no aceptada en esta pregunta ...
$("#myInput").datepicker({ ... beforeShow: function() { $("#ui-datepicker-div").appendTo($("#myPopupDiv")); } }); El problema es que jQueryUI luego establece el estilo CSS top e left en el #ui-datepicker-div en función de una posición relativa al cuerpo... pero necesito que sea relativo al div "emergente".
Intenté establecer position:relative to #myPopupDiv . Y también intenté configurar top y a left como parte de beforeShow , pero esos valores se sobrescriben inmediatamente.
¿Hay alguna forma de hacer que se coloque correctamente?
Consulte el siguiente ejemplo simple, donde la entrada es de 50 px/100 px, pero el selector de fecha ahora aparece en 100 px/200 px...
$("input").datepicker({ beforeShow: function() { $("#ui-datepicker-div").appendTo($("#myPopup")); } }); #myPopup { position:absolute; top:50px; left:100px; } <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div id="myPopup"> <input> </div>La posición del singleton se puede establecer con $.datepicker._pos = [x, y] .
Sin embargo, cada vez que aparece el cuadro de diálogo del selector de fecha, establece _pos en null y, por lo tanto, vuelve a calcular la posición en el uso posterior.
En su caso, lo siguiente establecería la posición cada vez antes de abrir.
$("input").datepicker({ beforeShow: function() { $.datepicker._pos = [20, 0]; $("#ui-datepicker-div").appendTo($("#myPopupDP")); } });