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 in place editing, which is working fine. However, I have a date control input that I would like to have appear as a calendar, which is where the fun starts.

I've found a Comment in the this blog by Calle Kabo (the page is a little mashed unfortunately) that details a way to do this:

$.editable.addInputType("datepicker", {
        element:  function(settings, original) {
            var input = $("<input type=\"text\" name=\"value\" />");
            $(this).append(input);
            return(input);
        },
        plugin:  function(settings, original) {
            var form = this;
            $("input", this).filter(":text").datepicker({
                onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }
            });
        }
    });

However, I can't get the above to work - no errors, but no effect either. I've tried placing it within the jQuery document ready function and also outside of it - no joy.

My UI Datepicker class is date-picker and my Jeditable class is ajaxedit, I'm sure the above inaction is due to the need to reference them somehow in the code, but I don't know how. Also, the Jeditable control is one of many element ids, if that has a bearing.

Any ideas from those more in the know?

Answer 1

Hi BrynJ!

I had the same problem. Searching inside the sourcecode of http://www.appelsiini.net/projects/jeditable/custom.html brought me to the solution.

There is a "jquery.jeditable.datepicker.js". Putted this in my code an added a new function "datepicker" (also in the source).

I don't know how your script works but in my case the function additionally needs:

id : 'elementid',

name : 'edit'

to store the data in the database.

hth :)

dabbeljuh

Answer 2

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 = $('<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'
});

Answer 3

Here is my solution. I use custom date format and on datepicker close, I reset the input form and apply cssdecoration (my jeditable improvement). Working with jQuery UI 1.5.2

$.editable.addInputType('datepicker', {
element : function(settings, original) {
    var input = $('<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({
        firstDay: 1,
        dateFormat: 'dd/mm/yy',
        closeText: 'X',
        onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); },
        onClose: function(dateText) {
            original.reset.apply(form, [settings, original]);
            $(original).addClass( settings.cssdecoration );
            },
    });
}});

Answer 4

Here is my solution, but isn't a complete jeditable input type.

$.editable.addInputType('date', {
    element : function(settings, original) {
        var input = $('<input type="text" readonly="readonly" name="value" size="10 />');
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
        var form = this;
        settings.onblur = 'cancel';
        $(this).find('input').datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); },
            onClose: function(dateText) { $(this).hide(); $(form).trigger("submit");}
        });            
    },
    submit  : function(settings, original) { },
    reset   : function(settings, original) { }
});

Answer 5

$.editable.addInputType('datepicker', {

element : function(settings, original) {

    var input = $('<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'

});

I tried this way!This worked fine for the current month the calender pops up. BUT when i click to go next month within the calender window, this submits the previous date. I could not pick the dates other then the current month. Can somebody help me how do i fix this??

Answer 6

onblur : ignore