☰

jQuery UI Datepicker onchange イベントの問題 質問する

tag-icon • tag-icon jquery datepicker jquery-ui-datepicker
jQuery UI Datepicker onchange イベントの問題 質問する

フィールドを変更すると検索ルーチンが呼び出される JS コードがあります。問題は、Datepicker が入力フィールドを更新したときに発生する jQuery イベントが見つからないことです。

何らかの理由で、Datepicker がフィールドを更新しても変更イベントが呼び出されません。カレンダーがポップアップするとフォーカスが変更されるため、これも使用できません。何かアイデアはありますか?

ベストアンサー1

datepicker のonSelectイベントを使用できます。

$(".date").datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
});

実際の例:

$(".date")
.datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
})
.on("change", function() {
    console.log("Got change event from field");
});
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

残念ながら、onSelect日付が変更されていなくても、日付が選択されるたびに が起動します。これは、日付ピッカーの設計上の欠陥です。日付ピッカーは常に起動しonSelect(何も変更されていなくても)、変更時に基になる入力でイベントは起動しません。(この例のコードを見れば、変更をリッスンしていますが、発生していません。) おそらく、変更があったときに入力でイベント (通常のchangeイベント、または日付ピッカー固有のイベント) が起動されるはずです。

もちろん、お好みであれば、火changeの上でイベントを開催することもできますinput。

$(".date").datepicker({
    onSelect: function() {
        $(this).change();
    }
});

changeこれは、jQuery 経由で接続されたすべてのハンドラーの基になる で実行されますinput 。ただし、繰り返しますが、常に実行されます。実際の変更時にのみ実行したい場合は、以前の値を (おそらく 経由で) 保存して比較する必要がありますdata。

実際の例:

$(".date")
.datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
        $(this).change();
    }
})
.on("change", function() {
    console.log("Got change event from field");
});
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

おすすめ記事