Jeditable with jQuery UI Datepicker

Question

I need to have a click to edit element on a page, that will in turn invoke an instance of the jQuery UI Datepicker.

Currently, I\'m using JEditable to provide the i

Answer 1

I took a look at the sourcecode mentioned above, but it seemed to be a bit buggy. I think it might have been designed for an older version of the datepicker, and not the jQuery UI datepicker. I made some modifications to the code, and with changes, it at least appears to be working in Firefox 3, Safari 4, Opera 9.5, and IE6+. Still might need some more testing in other browsers.

Here is the code I used (held in a file named jquery.jeditable.datepicker.js)

$.editable.addInputType('datepicker', {
    element : function(settings, original) {
        var input = $('');
        if (settings.width  != 'none') { input.width(settings.width);  }
        if (settings.height != 'none') { input.height(settings.height); }
        input.attr('autocomplete','off');
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
        /* Workaround for missing parentNode in IE */
        var form = this;
        settings.onblur = 'ignore';
        $(this).find('input').datepicker().bind('click', function() {
            $(this).datepicker('show');
            return false;
        }).bind('dateSelected', function(e, selectedDate, $td) {
            $(form).submit();
        });
    }
});

Example Implementation Code:

$(".datepicker-initiative").editable('inc/ajax/saveInitiative.php', {
     type: 'datepicker',
     tooltip: 'Double-click to edit...',
     event: 'dblclick',
     submit: 'OK',
     cancel: 'Cancel',
     width: '100px'
});