web-dev-qa-db-ja.com

要素に既にjQuery datepickerがあるかどうかをテストします

多くの入力要素を持つフォームがあります。いくつかはjQuery UIのdatepickerが添付された日付フィールドです：

$("#someElement").mask("9?9/99/9999").datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' });

次に、この関数にバインドされたキーコマンドがあります：

function openCalendar() {
    var selection = document.activeElement;

    // { Need to test here if datepicker has already been initialized 
        $(selection).datepicker("show");
    // }
}

これは、既に日付ピッカーが設定されている要素に最適です。ただし、他のフィールドはjavascriptエラーをスローします。 datepickerがそのフィールドで既に初期化されているかどうかを確認するためのテストの最良の方法を考えています。

javascriptjqueryjquery-uidatepicker
39
macca1

私はこれを見逃したとは信じられません。 ui.datepicker.jsの108行目：

_/* Class name added to elements to indicate already configured with a date picker. */
markerClassName: 'hasDatepicker',
_

したがって、hasClass('hasDatepicker')をテストする必要があります。これは最も簡単な方法のようです。さらに、次のステートメントは、datepickerが現在開いているかどうかを確認します（興味のある人向け）。

_if ($("#ui-datepicker-div").is(":visible") && $("#ui-datepicker-div").html() != "") {
    // datepicker is open. you need the second condition because it starts off as visible but empty
}
_
68
macca1

1）日付ピッカーを開こうとしたときにコードがエラーをスローした場合、コードをtry..catchに入れることができます

2）日付ピッカーを初期化するときに、入力フィールドにいくつかのデータを設定できます

$("#someElement").data("datepicker-initialized", true);

3）datepickerプラグインによって保存されたデータを使用できます

if($("#someElement").data("datepicker") != null){
   // datepicker initialized
}

または

if($.data($('#someElement').get(0), 'datepicker')){
   // datepicker initialized
}

4）datepickerは関数_getInstを内部的に使用します

if($.datepicker._getInst($('#someElement')[0]) != null){}

この方法は、例3とほぼ同じです。

より良い解決策が見つかりませんでした。

12
Rafael

基本的な解決策の1つは、datepickerの添付時に属性を設定し、それをテストすることです。

$("#someElement").mask("9?9/99/9999")
.datepicker({showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' })
.attr("data-calendar", "true");

その後、次のことができます：

if ($(selection).attr("data-calendar") == "true")
    $(selection).datepicker("show");

もっと直接的な方法はありますか？

1
macca1

別のケースがありました。私のスクリプトは、datepickerを含む最後のテーブル要素をコピーしています。

コピーされた要素には「hasDatepicker」というマークがあるため、jqueryは機能しません。

新しい要素でdatepickerをアクティブにするには、このようにクラス名を削除して開始します。

 $("#yournewelementid").attr("class","your-class-name"); 
 $("#yournewelementid").datepicker();
0
Ahmad

セクションがdatepickerのdom要素である場合は、既に初期化されているかどうかを確認し、そうでない場合は最初にdatepickerとして初期化し（プロパティを追加できます）、表示します！

    // If already initialized        
    if ( typeof selection !== 'undefined' && selection.length > 0)
         $(selection).datepicker('show');
    // otherwise initialize first and show
    else 
         $(selection).datepicker().datepicker('show');
0
Zhelyo Hristov