使用bootstrap-datepicker检测对选定日期的更改
使用bootstrap-datepicker检测对选定日期的更改
提问于 2013-06-09 19:58:31
我有一个input元素，它带有一个使用bootstrap-datepicker创建的附加datepicker。
<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>当用户通过直接在输入元素中输入来更改日期时，我可以通过输入元素的onChange事件获得值，如下所示。但是，当用户更改datepicker中的日期时(即，通过单击日历上的日期)，不会调用onChange处理程序。
如何检测通过datepicker而不是通过在input元素中键入而对所选日期所做的更改？
回答 5
Stack Overflow用户
发布于 2015-06-18 15:32:29
试试这个：
$("#dp3").on("dp.change", function(e) {
alert('hey');
});Stack Overflow用户
发布于 2016-04-08 14:04:22
下面是我的代码：
$('#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);
});只需取消注释你喜欢的那个。第一个选项更改其他输入元素的值。第二个用datepicker的默认格式来提醒日期。第三个用你自己的自定义格式来提醒日期。最后一个选项输出到日志(默认格式为date)。
您可以选择使用e.date、e.dates (用于多重日期输入)或e.format(...)。
Stack Overflow用户
发布于 2016-05-07 05:15:41
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17009354
复制相关文章
相似问题