4

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.

Ofer Zelig
  • 17,068
  • 9
  • 59
  • 93
cristi _b
  • 1,783
  • 2
  • 28
  • 43
  • 2
    In the subject, you implied you want the `showOn` option to work, but in the list of what you want to achieve, you didn't mention it... Please state more clearly what you're trying to achieve and what the problems are. – William Niu Nov 17 '11 at 13:37
  • i'll add more details in the content – cristi _b Nov 17 '11 at 16:17

1 Answers1

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.

Synexis
  • 1,255
  • 14
  • 14