Question

I have configured datepicker to activate as following

$(function () {
    $(".editable_datepicker").click(function (event) {
        $(this).editable('ajax_save.php',{
            id          : 'id',
            type        : 'datepicker',
            style       : 'margin:0px;width:80%;display:inline',
            onblur      : 'submit',
            tooltip     : ''
        });
    });
});

I’m using this plugin

source : https://github.com/qertoip/jeditable-datepicker/blob/master/src/jquery.jeditable.datepicker.js

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

$.editable.addInputType( 'datepicker', {
    element: function( settings, original ) {
      var form = $( this ),
          input = $( '<input />' );
      input.attr( 'autocomplete','off' );
      form.append( input );
      settings.onblur = 'nothing';
      return input;
    },
    plugin: function( settings, original ) {
        var form = this, input = form.find( "input" );
        settings.onblur = 'nothing';
        input.datepicker( {
        dateFormat:'yy-mm-dd', 
        showOn: "button",
        buttonImage: "img/calendar_icon.gif",
        buttonImageOnly: true, 
        onSelect: function() {
            form.submit();
        },
        onClose: function() {
            setTimeout( function() {
                if ( !input.is( ':focus' ) ) {
                  original.reset( form );
                } else {
                  form.submit();
                }
                }, 150 );
            }
        } );
    }
} );

This plugin successfully works as long as I don’t add the following options in this plugin

    showOn: "button",
    buttonImage: "img/calendar_icon.gif",
    buttonImageOnly: true, 

And I’d like to achieve this (detailed explanation below)

• double click on field, load the input type datepicker
• change data either by editing it or selecting a new date from datepicker
• submit data by selecting a date from the calendar
• if an user activated the editable plugin, onblur:cancel doesn’t work unless I open the calendar (i’d like to cancel editing if users clicks somewhere else)

But i’m stuck. Can you help me?

LATER EDIT

Steps to reproduce the problem

-get jquery, jquery-ui, jeditable and the plugin code attached or from github
-add the quoted scripts in according files
-write an example page as following

<input type='editable_datepicker' value='2011-11-17'>

*when clicking on it, it should open the textbox and a nice calendar icon

if you click on the icon, the calendar appears

you can either submit a date, and send data
or click somewhere else (lose focus) and don’t send data

the problem is here…

if you activate the field (make it editable), you can’t make it disappear (lose focus) unless you activate the calendar

Thanks a lot.

Answer 1

I found a solution that I believe meets your requirements. Rather than try to explain all the differences from the example you provided, it would be much easier to instead show you a standalone example of what I did.

The example uses jquery, jquery-ui, and jeditable. I’m not using jquery.jeditable.datepicker.js, but rather just the addInputType method of $.editable:

$(function () {
    $.editable.addInputType('datepicker', {
        element: function(settings, original) {
            var input = $('<input />');
            input.attr('autocomplete', 'off');
            $(this).append(input);

            // rather than assigning plugin separately, I'm just adding it here
            //     (but doing it this way isn't critical to this solution)
            input.datepicker({
                dateFormat:'yy-mm-dd', 
                showOn: "button",
                buttonImage: "calendar_icon.gif",
                buttonImageOnly: true,
                beforeShow: function() {
                    var editable_datepicker = $(this).parent().parent().get(0);
                    // This is the heart of the solution:
                    editable_datepicker.editing = false;
                },
                onClose: function(a, b) {
                    var form = $(this).parent();
                    form.submit();
                }
            });           
            return input;
        }
    });
});

The key to this solution lies in how the private reset method of $.editable works. It will not reset (cancel) the input if the original parent element’s javascript key “editing” is set to false. I just used .datepicker’s beforeShow to set it as such.

And here’s the remaining code for this example:

$(function() {
    $(".editable_datepicker").editable('ajax_save.php',{
        id          : 'id',
        type        : 'datepicker',
        style       : 'margin:0px;width:80%;display:inline',
        onblur      : 'cancel', // use 'cancel'!
        tooltip     : 'Double click to edit',
        event       : 'dblclick'
    });
});

And the HTML:

<span class='editable_datepicker'>01/01/2012</span>

Hope that helps. Cheers.