Dates (with jQuery UI datepicker) + inline editing

Mytko

Hi.
I have problem Editor. I am using jquery UI datepicker and inline editing. My example is based on this example https://editor.datatables.net/examples/simple/dates.html
To the example i add inline editing:

 $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
      editor.inline( this );
 } );

Problem is, that when i open datepicker and go on next months, edited field loses focus. When i try to go next month a I get: Missing instance data for this datepicker.

Can you please give me some advice how to solve this problem?

thanks

allan

Interesting one! It looks like this is caused by a failure to read $().data() properties in jQuery UI. It doesn't happen in inline or bubble editing modes, so it is specific to inline editing.

This is going to require a bit of debugging - let me get back to you on this one tomorrow morning.

Allan

allan

Hi,

I should have realised what was going on a little bit quicker... :-). With the blurOnBackground option enabled (which it is by default for inline editing) clicking in the date picker causes the form to be blurred as jQuery UI attaches it to the body.

So there are a few options:

1. Disable blurOnBackground
2. Use bubble() editing rather than inline
3. Add the following which uses the preBlur event to stop the blur:

editor.on('preBlur', function () {
  if ( $('#ui-datepicker-div').length ) {
    return false;
  }
} );

Regards,
Allan

Mytko

Thank you very much, i'll try it next week.

Regards,
Martin

vedran.blazevic

Dear Allan,

I am also trying to implement inline editing with date picker and encountered the same issue.
I will try your proposed solution this week.

In addition to this I wanted to ask whether it's possible to set configuration options for the date picker. For instance I would like to show the button panel and use the drop downs for year and month.

Thanks in advance.

Best regards,

Vedran

allan

In addition to this I wanted to ask whether it's possible to set configuration options for the date picker

Certainly - the date type has an opts option which can be specified to pass the options directly to jQuery UI date picker. The last example on the date page shows how that might be done.

Allan

vedran.blazevic

Oh, I didn't see that.
Thanks, I will try it.

Best regards,

Vedran

vedran.blazevic

Works like a charm.

Dear Allan, thanks a lot.

Best regards,

Vedran

vedran.blazevic

I forgot to add that this:

editor.on('preBlur', function () {
  if ( $('#ui-datepicker-div').length ) {
    return false;
  }
} );

worked as well, therefore I think this thread can be marked as answered.

P.S.: I tried to highlight the code but it doesn't seem to work. I used this "```js"