使用bootstrap-datepicker检测对所选日期的更改

Question

我有一个输入元素,其中包含使用bootstrap-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>

当用户通过直接输入input元素来更改日期时,我可以使用input元素的onChange事件获取值,如上所示.但是当用户从datepicker更改日期时(即通过单击日历上的日期),不会调用onChange处理程序.

如何检测通过日期选择器创建的所选日期的更改,而不是通过键入输入元素？

Answer 1

所有其他答案都与之相关jQuery UI datepicker,但问题是关于bootstrap-datepicker.

您可以使用on changeDate事件触发相关输入的更改事件,然后处理从onChange处理程序更改日期的两种方法:

改变日期

更改日期时触发.

例:

$('#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/frjhgpn8/

Answer 2

试试这个:

$("#dp3").on("dp.change", function(e) {
    alert('hey');
});

Answer 3

$(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>

Answer 4

这是我的代码:

$('#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默认格式警告日期.第三个用您自己的自定义格式警告日期.最后一个选项输出到日志(默认格式日期).

您可以选择使用e.date,e.dates(用于多个日期输入)或e.format(...).

这里有更多信息