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

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

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

edit:

это все в jqGrid, где 'селектор' - это текстовое поле в столбце дата:

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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" 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>

это вызывает идентичное поведение к тому, что я вижу, но изменение его на "уничтожить" работает здесь но не на моей странице. Странный.

4 56
datepicker jquery-ui-sortable

4 ответа:

Это удаляет .datepicker полностью: 

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

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

110

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

например:

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

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

и затем:

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

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

7

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

Ex. в asp-подобном sytax

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

Edit
Как насчет установки dateFormat из datepicker? т. е.

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

возможно, вы хотите

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

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

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

используйте это в скрипте страницы

// 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);
});
0