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 experien

Solution 1:

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

HTML:

<ul><li><ahref="#"id="datep">Test</a><inputtype="hidden"id="dp" /><div></div></li></ul>​

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

Solution 2:

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

This will help for hidden textbox:

• http://forum.jquery.com/topic/attaching-datepicker-to-an-icon-for-a-hidden-input-field

• Open JQuery Datepicker by clicking on an image w/ no input field

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

Solution 3:

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:

<spanclass="some-datepicker-class"><ahref="(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:

<ahref="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.