Date picker with jQuery UI

dte1

Hi, am I the only one experiencing an error with the date picker?

Example: https://editor.datatables.net/examples/dates/dates.html

When I select "DataTables" as the framework, everything works fine.
However, when I select "jQuery UI" as the framework, the direct selection of a month or year in the date picker no longer works. The selection box flashes briefly and then disappears immediately.

This issue occurs with the Firefox browser (143.0.3).
Chrome (140.0.7339.208) doesn’t seem to be affected.

allan

No you aren't the only one - I'm seeing that as well. Thanks for letting me know - I'll post back when I've got a fix.

Allan

allan

Could you try the following in place of the dataTables.jqueryui.js file from the download package please - it should fix the issue:

/*! jQuery UI integration for DataTables' Editor
 * © SpryMedia Ltd - datatables.net/license
 */

var doingClose = false;

/*
 * Set the default display controller to be our foundation control 
 */
DataTable.Editor.defaults.display = "jqueryui";

/*
 * Change the default classes from Editor to be classes for Bootstrap
 */
var buttonClass = "btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
$.extend( true, DataTable.Editor.classes, {
    form: {
        button:  buttonClass,
        buttonInternal:  buttonClass,
        buttonSubmit: buttonClass
    }
} );

var dialouge;

/*
 * jQuery UI display controller - this is effectively a proxy to the jQuery UI
 * modal control.
 */
DataTable.Editor.display.jqueryui = $.extend( true, {}, DataTable.Editor.models.displayController, {
    init: function () {
        if (! dialouge) {
            dialouge = $('<div class="DTED"></div>')
                .css('display', 'none')
                .appendTo('body')
                .dialog( $.extend( true, DataTable.Editor.display.jqueryui.modalOptions, {
                    autoOpen: false,
                    buttons: { "A": function () {} }, // fake button so the button container is created
                    closeOnEscape: false // allow editor's escape function to run
                } ) );

            dialouge.data("uiDialog")._focusTabbable = function(){}; 
        }

        return DataTable.Editor.display.jqueryui;
    },

    open: function ( dte, append, callback ) {
        dialouge
            .children()
            .detach();

        dialouge
            .append( append )
            .dialog( 'open' );

        $(dte.dom.formError).appendTo(
            dialouge.parent().find('div.ui-dialog-buttonpane')
        );

        dialouge.parent().find('.ui-dialog-title').html( dte.dom.header.innerHTML );
        dialouge.parent().addClass('DTED');

        // Modify the Editor buttons to be jQuery UI suitable
        var buttons = $(dte.dom.buttons)
            .children()
            .addClass( 'ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' )
            .each( function () {
                $(this).wrapInner( '<span class="ui-button-text"></span>' );
            } );

        // Move the buttons into the jQuery UI button set
        dialouge.parent().find('div.ui-dialog-buttonset')
            .children()
            .detach();

        dialouge.parent().find('div.ui-dialog-buttonset')
            .append( buttons.parent() );

        dialouge
            .parent()
            .find('button.ui-dialog-titlebar-close')
            .off('click')
            .on('click', function () {
                if ( ! doingClose ) {
                    dte.close('icon');
                }
            });

        // Need to know when the dialogue is closed using its own trigger
        // so we can reset the form
        $(dialouge)
            .off( 'dialogclose.dte-ju' )
            .on( 'dialogclose.dte-ju', function () {
                if ( ! doingClose ) {
                    dte.close();
                }
            } );

        if ( callback ) {
            callback();
        }
    },

    close: function ( dte, callback ) {
        if ( dialouge ) {
            // Don't want to trigger a close() call from dialogclose!
            doingClose = true;
            dialouge.dialog( 'close' );
            doingClose = false;
        }

        if ( callback ) {
            callback();
        }
    },

    node: function () {
        return dialouge.parent()[0];
    }
} );


DataTable.Editor.display.jqueryui.modalOptions = {
    width: 600,
    modal: true
};

Allan

dte1

Hello Allan, sorry for the late reply!
As far as I can tell, your fix works.
The select boxes now remain visible. I haven’t noticed any side effects, though I also wasn’t quite sure what exactly to look for
Thanks a lot for your quick work!

Ilja

allan

Hi Ilja,

The problem was with the focus capture. jQuery UI tries to keep the focus inside the dialouge box, which is a good idea, but the date picker is added to the document outside of it.

So what I did was to disable jQuery UI's focus capture, and use Editor's, which does account for the picker.

Allan

dte1

Hi Allan,

Is it possible that the same (or at least a similar) issue occurs when I use inline editing for tag fields? Clicking on 'Add' expands the selection list. As soon as I select an entry from the list, the tag editor disappears without saving the new value.

Ilja

allan

Hi Ilja,

I don't think so as there is no jQuery UI focus capture when doing inline editing.

Are you able to give me a link to a page showing the issue so I can check it out please?

Thanks,
Allan