使用bootstrap-datepicker检测所选date的更改
我有一个使用bootstrap-datepicker创build的附加dateselect器的input元素。
<div class="well"> <div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd"> <input type="text" id="date-daily"> <span class="add-on"><i class="icon-th"></i></span> </div> </div> <script language="JavaScript" type="text/javascript"> $(document).ready(function() { $('#dp3').datepicker(); $('#date-daily').val('0000-00-00'); $('#date-daily').change(function () { console.log($('#date-daily').val()); }); }); </script> 当用户通过在input元素中直接input来更改date时，我可以使用input元素的onChange事件来获取值，如上所示。 但是，当用户从datepicker更改date（即通过单击日历上的date），onChange处理程序不会被调用。
如何检测通过dateselect器进行的所选date的更改，而不是通过在input元素中键入？
所有其他答案都与jQuery UI datepicker相关，但问题是关于bootstrap-datepicker 。
您可以使用on changeDate事件在相关input上触发更改事件，然后处理从onChange处理程序更改date的两种方法：
改变date
date改变时触发。
例：
$('#dp3').datepicker().on('changeDate', function (ev) { $('#date-daily').change(); }); $('#date-daily').val('0000-00-00'); $('#date-daily').change(function () { console.log($('#date-daily').val()); });
这是一个工作小提琴： http : //jsfiddle.net/IrvinDominin/cUhQJ/
尝试这个：
$("#dp3").on("dp.change", function(e) { alert('hey'); });
$(function() { $('input[name="datetimepicker"]').datetimepicker({ defaultDate: new Date() }).on('dp.change',function(event){ $('#newDateSpan').html("New Date: " + event.date.format('lll')); $('#oldDateSpan').html("Old Date: " + event.oldDate.format('lll')); }); });
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://momentjs.com/downloads/moment.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> <div class="container"> <div class="col-xs-12"> <input name="datetimepicker" /> <p><span id="newDateSpan"></span><br><span id="oldDateSpan"></span></p> </div> </div>
这是我的代码：
$('#date-daily').datepicker().on('changeDate', function(e) { //$('#other-input').val(e.format(0,"dd/mm/yyyy")); //alert(e.date); //alert(e.format(0,"dd/mm/yyyy")); //console.log(e.date); });
只取消你喜欢的那个。 第一个选项更改其他input元素的值。 第二个用datepicker默认格式提醒date。 第三个用你自己的自定义格式提醒date。 最后一个选项输出到日志（默认格式date）。
您可以select使用e.date，e.dates（用于inputdate）或e.format（…）。
这里一些更多的信息
你可以使用onSelect事件
$("#date-daily").datepicker({ onSelect: function(dateText) { alert($('#dp3').val()); } });
当selectdateselect器时调用它。 该函数接收所选date作为文本和dateselect器实例作为参数。 这是指相关的input字段。
看这里
