Bootstrap Datepicker 更改触发 3 次
Posted
技术标签:
【中文标题】Bootstrap Datepicker 更改触发 3 次【英文标题】：Bootstrap Datepicker on change firing 3 times 【发布时间】：2014-05-02 02:00:17 【问题描述】：您好，我一直在尝试获取引导日期选择器的日期并且已经能够，但它似乎触发了 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();
但这不会关闭日期选择器，希望有一个简单的解决方案。谢谢
【问题讨论】：
我认为这个问题的错误跟踪器在这里：github.com/eternicode/bootstrap-datepicker/issues/912 【参考方案1】：您应该使用“changeDate”事件。例如：
var datePicker = $('.date-picker').datePicker().on('changeDate', function(ev)
//Functionality to be called whenever the date is changed
);
请查看文档here 了解有关此活动的更多信息。
【讨论】：
我没有使用那个日期选择器，那个版本有一个自动关闭的错误。每当我选择一个日期时，它都不会关闭。使用这个：github.com/eternicode/bootstrap-datepicker 您的版本上似乎也有“changeDate”事件，请查看source code。你试过了吗？ 是的，尝试了与您上面相同的行，日期选择器不会自动关闭。也许这个其他版本的工作方式不同？ 当我创建此活动时，这对我有用：$(document).on('changeDate', function() ); 与我的原始活动分开：var datePicker = $('input#date-picker').datePicker()
这是最好最简单的方法，非常感谢【参考方案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);
这很简单，只需找到 jquery 'event'，并确保忽略 300 毫秒窗口中的值。在我的测试中，这一切都发生在 30 毫秒左右。
【讨论】：
这是一个聪明的技巧，就像你说的那样它不会解决问题，但它肯定会有所帮助。 你有这个修改过的副本吗？我在这里遇到了同样的问题：***.com/questions/25699007/…【参考方案3】：正如一些人已经提到的，使用这个：
$('#calendar').on("changeDate", function()
);
诀窍是使用changeDate 而不是change。
【讨论】：
【参考方案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...
【讨论】：
【参考方案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
);
【讨论】：
【参考方案6】：已修复找到您的固定 js datepicker 文件HERE
阅读修复说明HERE
【讨论】：
【参考方案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);
);
这不是一个完美的解决方案，但它很有效。
【讨论】：
【参考方案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>
【讨论】：
【参考方案9】：获取全局变量计数并检查是否等于 0 然后执行您的函数。
var count=0;
$( "#Id" ).datepicker( minDate: 0).on('change',function ()
if(count==0)
validity();//any function
count=1;
);
validity() count=0;
【讨论】：
【参考方案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;
);
);
【讨论】：
【参考方案11】：请使用 changeDate 函数代替 change 。
【讨论】：
【参考方案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....
【讨论】：
欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。【参考方案13】：var pickerFireCount = 0;
function checkSelectedDateIsHollyday(rId)
pickerFireCount++;
if (pickerFireCount == 3)
if (!selectedDateIsHolyday(rId))
showInfoMessage('The date you selected is a holiday.');
pickerFireCount = 0;
【讨论】：
= $('.date-picker').datepicker().on('changeDate', function is didn't work field in line onchange event above code block was work以上是关于Bootstrap Datepicker 更改触发 3 次的主要内容，如果未能解决你的问题，请参考以下文章
减小 bootstrap-datepicker 字段的大小并更改文本颜色
如何将 jQuery UI DatePicker 图标触发器与 Bootstrap 3 的输入组结合使用
BootStrap DatePicker 日历输入更改不更新日历
Bootstrap 3 datepicker：更改日期显示格式；防止在今天日期之前选择日期