JQuery UI datepicker activado desde el enlace de texto

Estoy tratando de configurar mi menú css para que uno de los enlaces de texto active un selector de fecha para abrir. He reducido todo al código de abajo. El problema que estoy experimentando es que el código siguiente no funciona, pero cuando quito las etiquetas ul, li, comienza a funcionar.

Estoy usando 1.8.0 JQuery y 1.8.23 JQuery UI.

<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#dp").datepicker({
        onSelect: function(dateText, inst) {
            alert(dateText);
        },
    });

    $("#datep").click(function() {
        $("#dp").datepicker("show");
    });
});
</script>
</head>
<body>
<ul>
    <li><a href="#" id="datep">Test</a><input type="hidden" id="dp" /></li>
</ul>
</body>
</html>

Algunas cosas raras que he notado. Si muevo la entrada debajo de la UL, funciona, pero obtendré un error después de unos pocos clics, pero si agrego un div vacío debajo de esa entrada, entonces comenzará a funcionar normalmente, parece.

Cualquier ayuda es muy apreciada.

Respuestas a la pregunta(3)

Su respuesta a la pregunta