How do I *completely* remove a jQuery UI datepicker?

Question

I\'ve got a date text field I wish to only sometimes attach a DatePicker to, because I have some of my own text-handling scripts which handle partial date strings.

Answer 1

I solved the problem by removing the datepicker classes and then calling the unbind method on the element tied to the datepicker. That seemed to get rid of it!

eg:

$('#myelement').datepicker();

/////////datepicker attached to myelement//////

and then:

$('#myelement').removeClass('calendarclass');
$('#myelement').removeClass('hasDatepicker');
$('#myelement').unbind();

Just removing the classes still let the input element invoke the datepicker when clicked in. possibly unbind() by itself would do the job, but I'm kind of a belt-and-braces chap.

Answer 2

In single page application, even if the contents of the page change, jquery ui remains garbage. So I do like this in single page application.

(function($) {

    if ($.ui !== null && typeof $.ui !== typeof undefined) {
        /**
         * dialog fix
         */
        var $oDialog = $.fn.dialog
        $.fn.dialog = function(mth, dialogOpts) {
            if (mth !== null && typeof mth === 'string') {
                if (mth === 'clean') {
                    var id = $(this).attr('id');   // you must set id
                    if (id !== null && typeof id !== typeof undefined) {
                        // garbage jquery ui elements remove
                        $('[aria-describedby="' + id + '"]', document).each(function() {
                            if ($(this).dialog('instance')) {
                                $(this).dialog('destroy');
                            }
                            $(this).remove();
                        });
                    }
                    return this;
                } else if (mth === 'open' && dialogOpts !== null && typeof dialogOpts === 'object') {
                    if ($oDialog.apply(this, ['instance'])) {
                        $oDialog.apply(this, ['option', dialogOpts]);
                        return $oDialog.apply(this, ['open']);
                    } else {
                        return $oDialog.apply(this, dialogOpts);
                    }
                }
            }

            return $oDialog.apply(this, arguments);
        };
    }
})(jQuery);

use like this in page script

// target layer in my page
var $xlsDiv = $('#xlsUpFormDiv');

$xlsDiv.dialog('clean');    // clean garbage dialog

var dialogOpts = {
    autoOpen: false,
    closeOnEscape: true,
    height: 800,
    width: 600,
    modal: true,
    buttons: ...,
    close: function() {
        $xlsForm.reset();
    }
};

// initialize original jquery ui
$xlsDiv.dialog(dialogOpts);

// open button click
$('#btnViewXlsUpForm').on("click", function() {
    $xlsDiv.dialog('open', dialogOpts);
});

Answer 3

This removes .datepicker COMPLETELY:

$( selector ).datepicker( "destroy" );
$( selector ).removeClass("hasDatepicker").removeAttr('id');

Documentation:
http://docs.jquery.com/UI/Datepicker#method-destroy
also read the comments below

Answer 4

depending on your situation, you could do it server side

Ex. in asp-like sytax

<% if( showDatePicker ) {%>
    $('#dp-div').DatePicker(); // or whatever
<% } %>

Edit
How about setting the dateFormat of the datepicker? ie

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

you might be wanting

$( ".selector" ).datepicker({ dateFormat: '...' });