Как мне * полностью * удалить указатель даты jQuery UI? - PullRequest
Новая
       4

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

60 голосов
/ 19 августа 2010

У меня есть текстовое поле даты, к которому я хочу только иногда присоединять DatePicker, потому что у меня есть некоторые из моих собственных сценариев обработки текста, которые обрабатывают частичные строки даты.Однако, вызов .remove или .destroy оставляет поведение форматирования текста в поле ввода, что преобразует мою строку «8» в «18.08.2010».Еще хуже, если я начну удалять, то будет твердо предполагать, что, как только я достигну «18.08.20», я на самом деле хотел «18.08.2020».

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

edit:

это все внутри jqGrid, где «селектор» представляет собой текстовое поле в столбце даты: 

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

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

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 ]

116 голосов
/ 04 ноября 2011

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

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

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

7 голосов
/ 22 ноября 2011

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

например: 

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

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

и затем: 

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

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

3 голосов
/ 19 августа 2010

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

Пример. в asp-like синтаксисе 

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

Редактировать
Как насчет установки dateFormat средства выбора даты? т.е. 

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

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

$( ".selector" ).datepicker({ dateFormat: '...' });
0 голосов
/ 25 августа 2017

В одностраничном приложении, даже если содержимое страницы меняется, пользовательский интерфейс 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);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...