JQuery UI datepicker triggered from text link

I'm trying to setup my css menu so that one of the text links triggers a datepicker calandar to open. I have stripped everything down to the code below. The problem I am experiencing is that the code below does not work but when I remove the ul, li tags it starts working.

I am using 1.8.0 JQuery and 1.8.23 JQuery UI.

<!DOCTYPE html>
<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() {
        onSelect: function(dateText, inst) {

    $("#datep").click(function() {
    <li><a href="#" id="datep">Test</a><input type="hidden" id="dp" /></li>

Some weird things I have noticed. If I move the input under the ul it works kind of but will get an error after a few clicks on and off but if I add empty div under that input then it will start working normally it seems.

Any help is greatly appreciated.

So this is a bug. You'll have to add a block-level element right after the hidden input:


    <li><a href="#" id="datep">Test</a>
        <input type="hidden" id="dp" />

Example: http://jsfiddle.net/andrewwhitaker/LE2CG/1/

Another version with hidden text: http://jsfiddle.net/sKXJt/ Working Demo http://jsfiddle.net/BhqmY/

This will help for hidden textbox:

Hope it will help the cause :) I am not sure about the downvote :) anyhoo see the version with the hidden text here: http://jsfiddle.net/sKXJt/


$(document).ready(function() {
        onSelect: function(dateText, inst) {

    $('#datep').click(function() {


working image

enter image description here

Since I'm using this throughout my project, I created a compact jQuery plug-in to do this, and decided to share.

JSFiddle: https://jsfiddle.net/yahermann/xyjhyqma/


<span class="some-datepicker-class">
  <a href="(some link)" data-date-param="(some date param)">(some initial date)</a>


$('span.some-datepicker-class').datepicker_link();  // see jsfiddle for options

The default onSelect handler takes an optional link & date parameter set in the initial HTML. If both are provided, then upon selecting a new date, the plugin will load the provided link and include the selected date as a value to the provided parameter. Example:

<a href="http://example.com" data-date-param="mydate">2018-05-05</a>

The initial date 2018-05-05 will be displayed. Upon selecting a new date, the plugin will load the following page: http://example.com?mydate=(new_date)

If this functionality is not desired, just set href="#" and/or provide your own onSelect callback instead.