web-dev-qa-db-ja.com

jQuery UI datepickerを*完全に*削除するにはどうすればよいですか？

一部の日付文字列を処理する独自のテキスト処理スクリプトがあるため、DatePickerを添付するだけの日付テキストフィールドがありますsometimes。ただし、.removeまたは.destroyを呼び出すと、入力フィールドでテキストの書式設定の動作が残り、「8」文字列が「8/18/2010」に変換されます。さらに悪いことに、削除を開始すると、「8/18/20」に到達すると、私は実際にが「8/18/2020」を望んだと断固として仮定します。

ページから日付ピッカーを完全に完全に削除するには、どうすればよいでしょうか？常に完全に入力するテキストを無視する場合にも使用できますが、その場合は、常にではなく、ダブルクリック/ボタンとしてのイメージに表示することを望みます。

編集：

これはすべてjqGrid内にあり、「セレクタ」は日付列のテキストボックスです。

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

これは、それが戻ってくることを防ぎますが、私のテキストフィールドを操作することはできません。他のコード（私が知っている）はそのフィールドのコンテンツを操作せず、jqGridはデータを送信するためにEnterキーを監視します。ページの生成されたコードを見ると、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>

それは私が見ているものと同じ動作を引き起こしますが、「破壊」に変更すると動作しますhereですが、私のページではそうではありません。奇数。

jquery-uidatepicker
60
Groxx

これにより、.datepicker完全に：

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

ドキュメンテーション：
http://docs.jquery.com/UI/Datepicker#method-destroy
以下のコメントもお読みください

118
Omar

Datepickerクラスを削除し、datepickerに関連付けられた要素でunbindメソッドを呼び出すことで問題を解決しました。それはそれを取り除くように見えた！

例えば：

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

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

その後：

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

クラスを削除するだけで、クリックされたときにinput要素がdatepickerを起動できるようになります。おそらくunbind()自体が仕事をするかもしれませんが、私はベルトとブレースのようなものです。

8
Peter Rose

状況に応じて、サーバー側で行うことができます

Ex。asp-like sytaxの場合

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

編集
datepickerの dateFormat の設定はどうですか？すなわち

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

あなたが望むかもしれません

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

単一ページのアプリケーションでは、ページのコンテンツが変更されても、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);

ページスクリプトでこのように使用します

// 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
HS Shin