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>
<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>

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:

HTML:

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

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/

Code

$(document).ready(function() {
    $("#dp").datepicker({
        onSelect: function(dateText, inst) {
            alert(dateText);
        },
    });

    $('#datep').click(function() {
        $('#dp').datepicker('show');
    });



});?

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/

HTML:

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

JAVASCRIPT:

$('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.