jQuery Datepicker onchangeイベントの問題


239

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

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


これは質問に直接答えるように見えたので、私はstackoverflow.com/a/30132949/293792を使用することになりました
twobob

回答:


370

日付ピッカーのonSelectイベントを使用できます。

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

ライブの例

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


もちろん、必要にchange応じて、イベントをinput炎上させることができます。

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

これはchangeinputjQueryを介して接続されたすべてのハンドラーの基になる部分で起動します。しかし、再び、それは常にそれ起動します。実際の変更でのみ発火したい場合は、以前の値を(おそらくを介してdata)保存して比較する必要があります。

ライブの例


1
@ user760092:私はこの回答を投稿してから出て行き、文字通り私が去っていったときに、「ご存知のように、changeハンドラーをトリガーできます」と思ったので、それで回答を更新しました。:-)
TJクロウダー

1
私はこれをすべてのシナリオで機能させるために円を描いて回りましたが、これでうまくいきました!とても有難い!
Chris Nevill 2013年

7
なぜ彼らは実際にそれらのイベントを行わなかったのですか?
Jay K

1
これは「選択」用であり、「変更」用ではありません。日付を選択してから再度選択すると、このイベントが発生します。一部の開発者は、データが「ダーティ」であり、保存する必要があるかどうかを知るために、日付が初期状態からいつ変更されたかを知りたい場合があります。このため、私はあなたに反対票を投じています。
AndroidDev 2014年

4
@AndroidDev:私はそれを明確にしました。(あなたはもちろん、持っている可能性があり、サイトの目標は持っている良い答えを、それを達成するために敬意編集が奨励されています。)これは、日付ピッカーではなく、答えに設計上の欠陥です。(それがすべきことは、日付を変更する場合に限り、入力に対して何らかの変更イベントを発生させることですが、それはしません。)
TJ Crowder

67

TJ Crowderの回答(https://stackoverflow.com/a/6471992/481154)は非常に優れており、依然として正確です。onSelect関数内でのchangeイベントのトリガーは、取得するのと同じくらい簡単です。

ただし、datepickerオブジェクト(lastVal)には、自分で値を保存する必要なく、実際の変更時にのみ変更イベント条件付きでトリガーできる、優れたプロパティがあります。

$('#dateInput').datepicker({
     onSelect: function(d,i){
          if(d !== i.lastVal){
              $(this).change();
          }
     }
});

次に、通常のように変更イベントを処理します。

$('#dateInput').change(function(){
     //Change code!
});

最近誰かがこれをテストしましたか?私にはうまくいきません。i.lastValはundefinedを返し、利用可能なプロパティの1つではないようです。
BK

私はこれをまったく問題なく実装しただけです。魅力のように機能します。
DevSlick 2014年

これはもう機能しません、lastvalはもはや定義されていません
luke_mclachlan

4
@luke_mclachlan lastValは;-)
Alexander Derck

lastVal少なくとも私のテストでは、datepickerオブジェクトには存在しません。したがって、このソリューションは常に変更をトリガーします。
ニコラス


11

これは、日付が変更された場合にのみイベントをトリガーするソリューションが必要だったために作成しました。

それは簡単な解決策です。ダイアログボックスが閉じるたびに、データが変更されたかどうかをテストします。含まれている場合は、カスタムイベントをトリガーして、格納されている値をリセットします。

$('.datetime').datepicker({
    onClose: function(dateText,datePickerInstance) {
        var oldValue = $(this).data('oldValue') || "";
        if (dateText !== oldValue) {
            $(this).data('oldValue',dateText);
            $(this).trigger('dateupdated');
        }
    }
});

これで、そのカスタムイベントのハンドラーをフックできます...

$('body').on('dateupdated','.datetime', function(e) {
    // do something
});

私はこれをノックアウトで使用していますが、ユーザーがピッカーで日付を選択せず​​に日付を削除または手動で変更したときにイベントをトリガーできませんでした。非常に役立ちます。
トニー

jQueryの日付ピッカーフィールドに関する私の問題は、ここに投稿された問題とまったく同じではありません。複数回発生する変更イベントについてです。私はいくつかの解決策を試しましたが、これが私の状況で実際に機能する唯一の解決策です。
Patee Gutee 16

私はこのソリューションと多かれ少なかれ同じことをしました、そしてそれが間違いなく最もうまくいくと思います。私は別の回答で投稿します...

10
$('#inputfield').change(function() { 
    dosomething();
});

14
これでうまくいくと思いましたが、残念ながらうまくいきませんでした。キーボードを使用してフィールドが変更された場合にのみトリガーされ、日付ピッカーから選択した場合にはトリガーされません。迷惑です。
Simon East

1
jQuery UI docsから:「このウィジェットはその要素の値をプログラムで操作するため、要素の値が変更されたときにネイティブの変更イベントが発生しない場合があります。」
Sam Kauffman、2014年

面白いことに、私はそれとはになっています。キーボードで入力を手動で変更しても、イベントはトリガーされません。しかし、ウィジェットを使用してフィールドの値を変更すると、changeイベントが発生します。奇数。
レナン

これは、キーボードで変更したり、日付ピッカーウィジェットで変更したりすると正常に機能します。
サミー

どういうわけか、これは複数回呼び出されます。
NMathur 2017

9

私はbootstrap-datepickerを使用していますが、上記の解決策はどれもうまくいきませんでした。この答えは私を助けました...

日付を手動で編集したり日付をクリアしたりすると、ブートストラップの日付ピッカー変更日付イベントが発生しません

これが私が適用したものです:

 $('.date-picker').datepicker({
     endDate: new Date(),
     autoclose: true,
 }).on('changeDate', function(ev){
        //my work here
    });

これが他の人の役に立つことを願っています。


4

jQueryUi 1.9では、追加のデータ値とbeforeShow関数とonSelect関数の組み合わせを使用してそれを機能させることができました。

$( ".datepicker" ).datepicker({
    beforeShow: function( el ){
        // set the current value before showing the widget
        $(this).data('previous', $(el).val() );
    },

    onSelect: function( newText ){
        // compare the new value to the previous one
        if( $(this).data('previous') != newText ){
            // do whatever has to be done, e.g. log it to console
            console.log( 'changed to: ' + newText );
        }
    }
});

私のために働く:)


4

私はこれが古い質問であることを知っています。しかし、jQuery $(this).change()イベントを取得してonSelectを正しく起動できませんでした。だから私はバニラjsを介して変更イベントを発生させるために次のアプローチをしました。

$('.date').datepicker({
     showOn: 'focus',
     dateFormat: 'mm-dd-yy',
     changeMonth: true,
     changeYear: true,
     onSelect: function() {
         var event;
         if(typeof window.Event == "function"){
             event = new Event('change');
             this.dispatchEvent(event);
         }   else {
             event = document.createEvent('HTMLEvents');
             event.initEvent('change', false, false);
             this.dispatchEvent(event);
         }
     }
});

このスニペットのエラー「「$」は未定義」ええとああ。
Michael12345

onSelectイベントでchangeイベントを送出していますが、日付がクリックされるたびにselectが起動するため、望ましい効果ではありませんが、必ずしも日付が実際に変更されたわけではありません。つまり、ユーザーが同じ日付をクリックした可能性があります。二回。
ジャック

@ジャックあなたは正しいです。String dateTextをthis.valueと比較して、異なる場合にのみこれを起動できると思います。
tstrand66 2018年

@ Michael12345意味がわかります スニペットではなくなるように変更しました。謝罪いたします。
tstrand66



1

マニュアルは言う:

apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked

そう:

$('#daterange').daterangepicker({
  locale: { cancelLabel: 'Clear' }  
});

$('#daterange').on('apply.daterangepicker', function() {
  alert('worked!');
});

私のために働く。


1

私の解決策:

var $dateInput = $('#dateInput');

$dateInput.datepicker({
    onSelect: function(f,d,i){
        if(d !== i.lastVal){
            $dateInput.trigger("change");
        }
    }
}).data('datepicker');

$dateInput.on("change", function () {
   //your code
});


0

以下のDatePicker選択値変更イベントコード

/* HTML Part */
<p>Date: <input type="text" id="datepicker"></p>

/* jQuery Part */
$("#datepicker").change(function() {
                selectedDate= $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
                alert(selectedDate);        
            });

0

あなたがwdcalendarを使用している場合、これはあなたを助けるでしょう

 $("#PatientBirthday").datepicker({ 
        picker: "<button class='calpick'></button>",
        onReturn:function(d){
          var today = new Date();
          var birthDate = d;
          var age = today.getFullYear() - birthDate.getFullYear();
          var m = today.getMonth() - birthDate.getMonth();
          if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
          }

          $('#ageshow')[0].innerHTML="Age: "+age;
          $("#PatientBirthday").val((d.getMonth() + 1) + '/' + d.getDate() + '/' +  d.getFullYear());
        }
      }); 

リターンのイベントは私のために働く

この助けを願っています


0

あなたの問題は、日付ピッカーの設定方法にあると思います。入力を切断しないでください... altFieldを使用しないでください。代わりに、onSelectが発生したときに値を明示的に設定します。これにより、各対話を制御できます。ユーザーテキストフィールドと日付ピッカー。

注:onSelectは予期しないさまざまな対話で呼び出される可能性があるため、.change()ではなく.change()でルーチンを呼び出す必要がある場合があります。

疑似コード:

$('#date').datepicker({
    //altField: , //do not use
    onSelect: function(date){
        $('#date').val(date); //Set my textbox value
        //Do your search routine
    },
}).change(function(){
    //Or do it here...
});

$('#date').change(function(){
    var thisDate = $(this).val();
    if(isValidDate(thisDate)){
        $('#date').datepicker('setDate', thisDate); //Set my datepicker value
        //Do your search routine
    });
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.