web-dev-qa-db-ja.com

Datepicker関数を動的に削除する

ドロップダウンリストで選択した値に応じて、日付ピッカー機能を削除したい。次のコードを試してみますが、テキストボックスにカーソルを置いてもカレンダーが表示されます。提案をお願いします。

$("#ddlSearchType").change(function () {
    if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") {
        $("#txtSearch").datepicker();
    } else {
        $("#txtSearch").datepicker("option", "disabled", true);
    }
});

enter image description here

javascriptjqueryjquery-uijquery-ui-datepicker
37
TTCG

オプションメソッドを使用する代わりに、有効化/無効化メソッドを試すことができます。

_$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");
_

これにより、テキストボックス全体が無効になります。したがって、代わりに datepicker.destroy() を使用できます。

_$(document).ready(function() {
    $("#ddlSearchType").change(function() {
        if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") {
            $("#txtSearch").datepicker();
        }
        else {
            $("#txtSearch").datepicker("destroy");
        }
    }).change();
});
_

ここでデモ 。

82
Salman A

不要な場合はdatepickerのインスタンスを破棄し、必要に応じて新しいインスタンスを作成します。

私はこれがいことを知っていますが、これだけが機能しているようです...

これをチェックアウト

 $("#ddlSearchType").change(function () {
        if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") {
                $("#txtSearch").datepicker();

         }
          else {
                $("#txtSearch").datepicker("destroy");                    
         }
 });
22
Jishnu A P

日付ピッカーをidにバインドするのではなく、クラスにバインドするだけです。日付ピッカーを無効にする場合は、クラスを削除してください...

$("#ddlSearchType").change(function () { 
  if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date")                   { 
    $("#txtSearch").addClass("mydate");
    $(".mydate").datepicker()
  } else { 
    $("#txtSearch").removeClass("mydate");
  } 
});
6
Abdul Kader

さて、私は同じ問題を抱えて「破壊」を試みましたが、それは私にはうまくいきませんでした。それから、私のHTMLは次のように動作しました。

<input placeholder="Select Date" id="MyControlId" class="form-control datepicker" type="text" />

Jqueryそれは私のために働く：

$('#MyControlId').data('datepicker').remove();
2
Avneesh Srivastava

公式の [〜＃〜] api [〜＃〜] を使用するのはどうですか？

APIドキュメントによると：

破棄：日付ピッカー機能を完全に削除します。これにより、要素は初期化前の状態に戻ります。

つかいます：

$("#txtSearch").datepicker("destroy");

入力を通常の動作に復元し、

$("#txtSearch").datepicker(/*options*/);

再びデータピッカーを表示します。

0
user1344654

これは私が使用するソリューションです。より多くの行がありますが、日付ピッカーは一度だけ作成されます。

$('#txtSearch').datepicker({
    constrainInput:false,
    beforeShow: function(){
        var t = $('#ddlSearchType').val();
        if( ['Required Date', 'Submitted Date'].indexOf(t) ) {
            $('#txtSearch').prop('readonly', false);
            return false;
        }
        else $('#txtSearch').prop('readonly', true);
    }
});

DdlSearchTypeの値が「Required Date」または「Submitted Date」でない限り、datepickerは表示されません。

0
johanDior