Adding jQuery UI datepicker to in-place-editor

[GoogleCodeExporter]

Here is what I did to get this working. There may be a better way.

1. Define a delegates for the control:
<code>
delegate: {
   didOpenEditInPlace: function(a,b) {
      $(a).find('input').datepicker({
         changeMonth: true,
         changeYear: true,
         onClose: function(dateText, inst) { 
            a.data('control').saveContent();
         }
      });
      return true;
   },
   shouldCloseEditInPlace: function(a,b,c){
      // should not close when focus goes to date picker
      return false;
   },
}
</code>
2. Change the plugin: (attached is the updated. search for datepicker)
  a. Modify init to save the edit control in the dom object
   function InlineEditor(settings, dom) {
      //..... new line at the end of the function
      dom.data('control',this);
   };
  b. new handler.. Something else may need to be added. But this works for me.
    saveContent: function(){
        var enteredText = this.dom.find(':input').val();
        enteredText = this.triggerDelegateCall('willCloseEditInPlace', enteredText);

        this.showSaving(enteredText);

        if (this.settings.callback)
            this.handleSubmitToCallback(enteredText);
        else
            this.handleSubmitToServer(enteredText);
    },

Original issue reported on code.google.com by jpxavier...@gmail.com on 22 Apr 2011 at 5:23

Attachments:

• jquery.editinplace.js

[GoogleCodeExporter]

Small change in the delegate to get it working in Firefox:
Add .focus() at the end of datepicker :
            didOpenEditInPlace: function(a,b) {
                $(a).find('input').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    onClose: function(dateText, inst) { 
                        a.data('control').saveContent();
                    }
                }).focus();
                return true;
            },

Original comment by jpxavier...@gmail.com on 22 Apr 2011 at 5:25

[GoogleCodeExporter]

Hi jpay , 
where should this code be added to call the datepicker? in demo.js or 
editinplace.js ?
delegate: {
   didOpenEditInPlace: function(a,b) {
      $(a).find('input').datepicker({
         changeMonth: true,
         changeYear: true,
         onClose: function(dateText, inst) { 
            a.data('control').saveContent();
         }
      });
      return true;
   },
   shouldCloseEditInPlace: function(a,b,c){
      // should not close when focus goes to date picker
      return false;
   },
}
</c

Original comment by hmb...@gmail.com on 19 Oct 2011 at 9:00

[GoogleCodeExporter]

yes, that change will be in your code wherever you are setting up the edit in 
place control. changes to the plugin are in #2.
this has been a while ago and I don't recall where i used it.

Original comment by jpxavier...@gmail.com on 19 Oct 2011 at 11:23