Question

I am trying to get date from Jquery ui date-picker by dropping some events on the calendar cell.

as soon i drop some events on the calendar, it should show an alert displaying the date on which i have dropped the event.

$(".ui-datepicker-calendar tbody tr td").droppable({
    drop: function (event, ui) {
        // $("#datepicker").datepicker._selectDay('#datepicker',2,2012, this);
        alert('Event added <show dropped date>#####');
    }
});

Can anybody help me out?

Answer 1

If you instantiate the droppable on drag start, you could simply fire a click event on drop.

The dropped date will then be accessible through the usual getDate method.

$(".event").draggable({
    start: function () {
        $(".ui-datepicker-calendar td").droppable({
            drop: function() {
                $(this).click();
                var theDate = $(".datepicker").datepicker("getDate");
                alert( "Event Created on " + theDate.toDateString() );
            }
        });
    }
});

I did have a bit of trouble getting the draggable itself to act nice with such small drop zones, so I had to position the cursor using cursorAt. Check out this jsFiddle to see.