web-dev-qa-db-ja.com

Bootstrap変更の日付ピッカーが3回発火

こんにちは、私は単にbootstrap日付ピッカーの日付を取得しようとしましたが、3回起動するようです。注：これはjquery日付ピッカーではなく、bootstrap日付ピッカー。

この日付ピッカーの使用： https://github.com/eternicode/bootstrap-datepicker 、古いeyecon.roではありません。

 $(".date-picker").on("change", function(e) {
      contents = $(this).val();
      id = $(this).attr('id');
      console.log("onchange contents: " + contents);
      console.log("onchange id: " + id);

 });

HTML：

<input id="start_date" type="text" data-date-format="yyyy-mm-dd" class="date-picker form-control" />

変更以外のいくつかのオプションを使用しました。

$('.date-picker').datepicker().change(function(){};

しかし、これは日付ピッカーを閉じません。これに対する簡単な解決策があることを期待しています。 THX

javascriptjquerytwitter-bootstrapdatepicker
21
Hard Fitness

問題は解決しませんが、datepickerを使用してajaxポストを介して送信していたため、3つの変更イベントで問題が発生しました-3番目のイベントは常に失敗しました。ドキュメントでchangeDateイベントを使用するように指示されている場合でも、入力タグのchangeイベントを3回発生させるのは適切ではないようです。値は3回変化していません。

問題を回避するための簡単な「デバウンス」関数を作成しました。この問題は修正されません。これは、ウィジェットの複数の変更イベント（setValue（行508）_setDate :(行1048）およびsetValue（行508）（バージョン1.3.0））から発生するためです。

 var lastJQueryTS = 0 ;// this is a global variable.
 ....
 // in the change event handler...
    var send = true;
if (typeof(event) == 'object'){
    if (event.timeStamp - lastJQueryTS < 300){
        send = false;
    }
    lastJQueryTS = event.timeStamp;
}
if (send){
    post_values(this);
}

これは非常に単純で、jqueryの「イベント」を見つけ、300ミリ秒のウィンドウ内の値が無視されるようにします。私のテストでは、これはすべて30ミリ秒程度で発生しました。

8
pgee70

「changeDate」イベントを使用する必要があります。例えば：

var datePicker = $('.date-picker').datePicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});

このイベントの詳細については、ドキュメント ここ を参照してください。

36
seeARMS

一部の人がすでに述べたように、これを使用してください：

$('#calendar').on("changeDate", function() {

});

コツは、changeDateの代わりにchangeを使用することです。

3
Juan Martínez

changeイベントを確認するときに、実際のユーザー操作からの変更である場合、変更イベントにはoriginalEventの値が含まれているようです。

イベントしない JSを介して入力が変更された場合、この値が含まれます：$obj.val('1990-03-07').change()およびbootstrap-datepickerと同じ

設定方法は次のとおりです。

一般的な初期設定

// General selector for date inputs
var $obj = $('input[type="date"]');

$obj.datepicker({
    // options here, not important for this example
});

扱う bootstrap-datepicker特定の変更

$obj.datepicker().on('changeDate', function (event) {
    handleInputDateAndTimeChange(event);
});

次に、ユーザー操作の変更に対処します

$('input[type="date"], input[type="time"]').change(function (event) {
    // This checks if change was initiated by user input and NOT JS
    if(event.originalEvent !== undefined) {
        handleInputDateAndTimeChange(event);
    }
});

そして最後に、これがhandleInputDateAndTimeChange関数です

function handleInputDateAndTimeChange(event) {
    var $input = $(event.target);

    // Do what you want with $input object here...
}
2
Feng Huo

上記の回答に似ていますが、関数の名前を変更していない限り、datepickerを使用する必要があります。

var datePicker = $('.date-picker').datepicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});

これは私にとっては機能しますが、私の場合を除き、JQueryとの競合を避けるために、関数の名前をdatepickerBootstrapに変更しました。したがって、次のようになります。

var datePicker = $('.date-picker').datepickerBootstrap().on('changeDate', function(ev) {
    // On change functionality
});
1
user1315637

＃pgee70からの回答を試しましたが、うまくいきません。これが私の解決策です、その助けを願っています

var send=true;

 $('.input-group.date').datepicker({
     todayBtn: "linked",
     keyboardNavigation: false,
     forceParse: false,
     language: 'es-ES',
     weekStart: 1,
     format: 'dd/mm/yyyy',
     enableOnReadonly:false,
     calendarWeeks: true,
     autoclose: true,
     todayHighlight:true
 }).on("changeDate", function(e) {
     if(send){
        modificarFechaAplicacionCliente($("#input_filtro_fecha_cliente").val());
        send=false;
     }

     setTimeout(function(){send=true;},200);
 });

それは素晴らしいソリューションではありませんが、うまくいきます。

1
Hictus

少し煩わしい..私のコードは：

var c=0;var send=false;
    $(document).ready(function() {
        jQuery( ".ed" ).datepicker({ 
            format: "yyyy-mm-dd",
            autoclose:!0
        }).on('change',function() {
            if(c==2){
                c=0;
                send=true;
            }else{
                c++;
                send=false;
            }                
        });

    });
0
Noviana Alvi

グローバル変数のカウントを取得し、0に等しいかどうかを確認して、関数を実行します。

var count=0;
     $( "#Id" ).datepicker({ minDate: 0}).on('change',function (){
            if(count==0) 
           validity();//any function
           count=1;
         });
     validity(){ count=0;}
0
ABIRAMAN
var LastController =['id','value']; //global variable...
 function datepeakerchange(e){ 

 if ((LastController[0] != e.target.id && LastController[1] != e.target.value) || (LastController[0] == e.target.id && LastController[1] != e.target.value)) {

            LastController[0] = e.target.id;
            LastController[1] = e.target.value;


    write your code....


    }
}
0
user12078979

Changeの代わりにchangeDate関数を使用してください。

0
Neeraj Rawat