Bootstrap Datepicker 更改触发 3 次

Question

您好，我一直在尝试获取引导日期选择器的日期并且已经能够，但它似乎触发了 3 次。注意：这不是 jquery 日期选择器，而是引导日期选择器。

使用这个日期选择器：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(){};

但这不会关闭日期选择器，希望有一个简单的解决方案。谢谢

Answer 1

您应该使用“changeDate”事件。例如：

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

请查看文档here 了解有关此活动的更多信息。

Answer 2

它不能解决问题，但我使用 datepicker 通过 ajax 帖子发送，所以 3 个更改事件导致我出现问题 - 第 3 个事件总是失败。即使文档说要使用 changeDate 事件，我似乎也不应该触发输入标签的更改事件 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);
}

这很简单，只需找到 j​​query 'event'，并确保忽略 300 毫秒窗口中的值。在我的测试中，这一切都发生在 30 毫秒左右。

Answer 3

正如一些人已经提到的，使用这个：

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

});

诀窍是使用changeDate 而不是change。

Answer 4

似乎在检查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...
}

Answer 5

类似于上面的答案，但你应该使用 datepicker 除非你重命名了函数：

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

这对我有用，除了在我的情况下，我将函数重命名为 datepickerBootstrap 以避免与 JQuery 的冲突。那么它会变成：

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

Answer 6

已修复找到您的固定 js datepicker 文件HERE

阅读修复说明HERE

Answer 7

我尝试了#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);
 });

这不是一个完美的解决方案，但它很有效。

Answer 8

当 bootstrap-datepicker 与调用函数 3 次的 jQuery OnChange 事件一起使用时，我遇到了同样的问题。这是我的代码

@Html.TextBoxFor(x => x.CmpStartDate, "{0:dd-MMM-yyyy}", new { @size = "30", @class = "form-control search-date", @placeholder = "Start date" })

@Html.TextBoxFor(x => x.CmpEndDate, "{0:dd-MMM-yyyy}", new { @size = "30", @class = "form-control search-date", @placeholder = "End date" })  


<script>
$('#CmpStartDate,#CmpEndDate').datepicker({
      autoclose: true,
      todayHighlight: true,
      minViewMode: 3,
      format: "dd-M-yyyy"
});

$(".search-date").on("change", function () {
     cmpStartDate = $("#CmpStartDate").val();
     cmpEndDate = $("#CmpEndDate").val();
     SearchThisDateRecords(cmpStartDate,cmpEndDate);
});

function SearchThisDateRecords(cmpStartDate,cmpEndDate) {
console.log("Call search method");
}
</script>

我们只需要调用这个函数一次，而不是多次，所以你可以使用下面的逻辑来解决这个问题

<script>
    $('#CmpStartDate,#CmpEndDate').datepicker({
          autoclose: true,
          todayHighlight: true,
          minViewMode: 3,
          format: "dd-M-yyyy"
    });

    var i = 0;

    $(".search-date").on("change", function () {
         cmpStartDate = $("#CmpStartDate").val();
         cmpEndDate = $("#CmpEndDate").val();
         SearchThisDateRecords(cmpStartDate,cmpEndDate);

         i++;
         console.log(i);
         if (i == 3) {
             SearchThisDateRecords(cmpStartDate,cmpEndDate);
         }
    });
    function SearchThisDateRecords(cmpStartDate,cmpEndDate) {
         i =0; //Reset i value
         console.log("Call search method");
    }
</script>

Answer 9

获取全局变量计数并检查是否等于 0 然后执行您的函数。

var count=0;
     $( "#Id" ).datepicker({ minDate: 0}).on('change',function (){
            if(count==0) 
           validity();//any function
           count=1;
         });
     validity(){ count=0;}

Answer 10

有点烦.. 我的代码是：

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;
            }                
        });

    });

Answer 11

请使用 changeDate 函数代替 change 。

Answer 12

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....


    }
}

Answer 13

var pickerFireCount = 0;

function checkSelectedDateIsHollyday(rId) {
  pickerFireCount++;
  if (pickerFireCount == 3) {
    if (!selectedDateIsHolyday(rId)) {
      showInfoMessage('The date you selected is a holiday.');
      pickerFireCount = 0;
    }
  }
}