Date picker with jQuery UI

Date picker with jQuery UI

dte1dte1 Posts: 2Questions: 2Answers: 0

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.

Answers

  • allanallan Posts: 65,206Questions: 1Answers: 10,804 Site admin

    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

  • allanallan Posts: 65,206Questions: 1Answers: 10,804 Site admin

    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

Sign In or Register to comment.