JQuery UI Datepicker: Making a link trigger datepicker

Question

I am using JQuery's UI datepicker: http://jqueryui.com/demos/datepicker/

implemented here:

http://www.clients.eirestudio.net/old/

I want to use a link as the trigger but I can't get it to work.

Here is my code:

// JQuery UI
$("#datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      maxDate: '0m 0d',
      minDate: new Date(2000, 1 - 1, 1),
      dateFormat: 'dd-mm-yy'
});

<p class="clearfix hidden">
    <input id="" class="input float datepicker" type="input" name="" value="" />
    <a class="calendar ui-icon ui-icon-calendar">Date</a>

    <span class="mid-info">To</span>
    <input id="" class="input datepicker" type="input" name="" value="" />
    <a class="calendar" href="#">Date</a>
</p>

Any ideas?

Answer 1

You could do something like I did in this fiddle

HTML:

<a href="#" id="toggleDP">Toggle</a>

JS:

var $dp = $("<input type='text' />").hide().datepicker({
    onSelect: function(dateText, inst) {
       $("body").append("<div>Selected "+dateText+"</div>");
    }
}).appendTo('body');

$("#toggleDP").button().click(function(e) {
    if ($dp.datepicker('widget').is(':hidden')) {
        $dp.show().datepicker('show').hide();
        $dp.datepicker("widget").position({
            my: "left top",
            at: "right top",
            of: this
        });
    } else {
        $dp.hide();
    }

    //e.preventDefault();
});