FullCalendar + Bootstrap Modal + jQuery UI DateTimepicker + jEditable

Question

so I've got quiet a mashup/collection going on here...In our app we are using FullCalendar and events load up in Bootstrap Modal, then if user wants to, he/she can click on the field and it'll become editable with help of jEditable, and a new custom "type" that I've created for Timepicker field.

Code below is what creates a new input type for the timepicker editable field

$.editable.addInputType('timepicker',
{
    element : function(settings, original)
        {
            var input = $('<input id="timeToEdit">');
            input.attr('autocomplete','off');
            var hidden = $('<input type="hidden" id="editedEventTime" />');
            $(this).append(hidden);
            $(this).append(input);
            return(hidden);
        },
    plugin : function(settings, original)
        {
            var form = this;
            settings.onblur = 'ignore';
            $(this).find('#timeToEdit').timepicker(
                {
                    alwaysSetTime: true,
                    timeOnly: true,
                    timeFormat: "h:mm TT",
                    altField: "#editedEventTime",
                    altFieldTimeOnly: true,
                    altTimeFormat: "HH:mm:00",
                    stepHour: 1,
                    stepMinute: 15,
                    onSelect: function(dateText) {},
                    onClose: function(dateText)
                        {
                            original.reset.apply(form, [settings, original]);
                        },
                });
        }
});

This is the code that let's me add that timepicker on click to editable field:

$('.eventEditStartTime').editable('phpfiletotalktodb.php', {
    type : "timepicker",
    submit : "<span class='btn btn-mini btn-success'><i class='icon-ok'></i></span>",
    cancel    : "<span class='btn btn-mini btn-danger'><i class='icon-remove'></i></span>",
    tooltip     : "Edit start of the event",
    indicator : "Saving...",
    callback    : function(value, settings) {
    $('#fullCalendar').fullCalendar('refetchEvents');
            }
        });

The problem that I'm having is that if user clicks on the field to edit, but doesn't pick anything, and clicks off the screen and modal window disappears, and then user click on that event again to edit it, it won't make that field editable again.

One possible cause that I could think of is that when user clicks on the event, it shows up and then user click on the time field to edit it, dropdown shows up but the field is empty, even though the value is in "hidden" field, maybe that's what causing it to render un-editable, but i'm not sure how to bypass that.

Thank you in advance for help and looking into this.