JQuery DateTimePicker attached to Link

Question

I am using the JQuery DateTime Picker addon http://trentrichardson.com/examples/timepicker and when I set it up as shown in various examples using an input, it works fine. I would however like to have the popup display when a link is clicked and popup an alert with the chosen date/time when they select "Done".

I have tried the following...

    <script>
    $(function ()
    {
        $('#dtpicker').datetimepicker(
        {
            addSliderAccess: true,
            sliderAccessArgs: { touchonly: false }
        });
    });
    </script>

<a href="#" id="dtpicker">(+) Add Null Route</a>

Is it possible to add this to a link rather than a button? Is there any way for me to actually take the date/time that was picked and do something with it when the "Done" button is selected?

Answer 1

Why don't you use <input id="dtpicker" value="" type="button"/> but being type="button" ? And try to use css at the button to get this look like as a link.Type "button" is working look here : http://jsfiddle.net/bLh26hwo/

Styling an input to look like a link:

http://jsfiddle.net/yhtrxjus/

The solution for the second part: Built-in onClose event:

$('#slider_example').datetimepicker({
...
    onClose: function (dateText, inst) {
        alert('ok');
    },
});

Alternative:Add click() eventto the done button like this:

$(".ui-datepicker-close").click(function() {
  alert( "Handler for .click() called." );
});