Как я * полностью * удаляю jQuery UI datepicker?

У меня есть текстовое поле даты, к которому я хочу иногда добавлять DatePicker, потому что у меня есть некоторые из моих собственных скриптов обработки текста, которые обрабатывают частичные строки даты. Однако вызов .remove или .destroy оставляет поведение форматирования текста в поле ввода, которое преобразует мою строку "8" в "8/18/2010". Хуже того, если я начну удалять, он уверенно предполагает, что, достигнув "8/18/20", я действительно хотел "8/18/2020".

Какой был бы лучший способ полностью, полностью, make-it-like-it-never-was удалить datepicker с моей страницы? Я также могу использовать его, если он просто игнорирует текст, который я ввожу полностью, но в этом случае я бы предпочел, чтобы он отображался дважды щелчком/изображение как кнопка, не всегда.

изменить:

это все в jqGrid, где "selector" - текстовое поле в столбце даты:

function showPicker(selector) {
    $(selector).datepicker({
        onClose: function() {
            $(selector).datepicker('remove'); 
            // or 'destroy' or $('.datepicker').remove(); or $(this).datepick('remove');
        }
    });
}

Это не позволяет вернуться, но не манипулировать моим текстовым полем. Никакой другой код (который я знаю) не манипулирует этим содержимым поля, просто jqGrid наблюдает за клавишей ввода для отправки данных. Глядя на код сгенерированной страницы, datepicker div еще находится внизу.

edit2: Я получаю то же самое поведение, если я это делаю:

<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<link href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css'; return false;" rel="stylesheet" type="text/css"  />
<script type="text/javascript">
$(document).ready( function(){
 $("#pickle").datepicker({
  onClose: function(){
   $(this).datepicker('remove');
  }
 });
});
</script>
<input type="text" id="pickle" />
</body>
</html>

Это вызывает то же поведение, что и я, но меняю его на "destroy", но не на моей странице. Одд.

Ответы

Ответ 1

Это удаляет .datepicker ПОЛНОСТЬЮ:

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

Документация:
http://docs.jquery.com/UI/Datepicker#method-destroy
также читайте комментарии ниже

Ответ 2

Я решил проблему, удалив классы datepicker, а затем вызвав метод unbind на элемент, привязанный к datepicker. Это, казалось, избавилось от этого!

например:

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

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

а затем:

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

Просто удаление классов по-прежнему позволяет входному элементу вызывать datepicker при нажатии. Возможно, unbind() сам выполнит эту работу, но я вроде как пояс и скобки.

Ответ 3

в зависимости от вашей ситуации, вы можете сделать это на стороне сервера

Пример в asp-like sytax

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

Edit
Как насчет установки dateFormat параметра datepicker? то есть

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

вам может потребоваться

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

Ответ 4

В приложении с одной страницей, даже если содержимое страницы изменяется, jquery ui остается мусором. Поэтому я делаю это в одностраничном приложении.

(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);

используйте это на странице 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);
});