DatePicker da interface do usuário da JQuery acionado a partir do link de texto

Eu estou tentando configurar meu menu css para que um dos links de texto dispara um calandar datepicker para abrir. Eu limpei tudo no código abaixo. O problema que estou enfrentando é que o código abaixo não funciona, mas quando eu removo as tags ul, li ele começa a funcionar.

Eu estou usando 1.8.0 JQuery e 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>

Algumas coisas estranhas que eu notei. Se eu mover a entrada sob o ul ele funciona, mas vai receber um erro depois de alguns cliques ligado e desligado, mas se eu adicionar div vazio sob essa entrada, então ele vai começar a funcionar normalmente parece.

Qualquer ajuda é muito apreciada.

questionAnswers(3)

yourAnswerToTheQuestion