使用 bootstrap-datepicker 检测所选日期的更改 [英] Detect change to selected date with bootstrap-datepicker

问题描述

我有一个带有使用 bootstrap-datepicker 创建的附加日期选择器的输入元素.

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

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

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

如何检测通过日期选择器(而不是通过在输入元素中输入)对所选日期所做的更改?

解决方案

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

您可以使用 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/

I have an input element with an attached datepicker created using 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>

When the user changes the date by typing directly into the input element, I can get the value with the input element's onChange event, as shown above. But when the user changes the date from datepicker (i.e. by clicking a date on the calendar), the onChange handler is not called.

How can I detect changes to the selected date that are made via the datepicker, rather than by typing into the input element?

解决方案

All others answers are related to jQuery UI datepicker, but the question is about bootstrap-datepicker.

You can use the on changeDate event to trigger a change event on the related input, and then handle both ways of changing the date from the onChange handler:

changeDate

Fired when the date is changed.

Example:

$('#dp3').datepicker().on('changeDate', function (ev) {
    $('#date-daily').change();
});
$('#date-daily').val('0000-00-00');
$('#date-daily').change(function () {
    console.log($('#date-daily').val());
});

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/frjhgpn8/

这篇关于使用 bootstrap-datepicker 检测所选日期的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！