Question

<script type="text/javascript">
    // When the document is ready
    $(document).ready(function () {
        $('.datepicker').datepicker({
            format: "yyyy-mm-dd",
        }).on('changeDate', function(ev){
            // do what you want here
            $(this).datepicker('hide');
        }).on('changeDate', function(ev){
            if ($('#startdate').val() != '' && $('#enddate').val() != ''){
                $('#period').text(diffInDays() + ' d.'); 
            } else {
                $('#period').text("-");
            }
        });
    });
</script>

所以这就是我的日期选择器的样子。所以基本上当我通过点击鼠标更改日期时它工作正常，但是当我用键盘手动更改日期或手动清除日期更改日期时，事件不会被调用。这是一个错误还是我在这里做错了什么？

Answer 1

如果要响应手动输入，则必须在输入上使用change事件，因为changeDate事件仅适用于使用日期选择器更改日期的时间。

尝试这样的事情：

$(document).ready(function() {
    $('.datepicker').datepicker({
        format: "yyyy-mm-dd",
    })
    //Listen for the change even on the input
    .change(dateChanged)
    .on('changeDate', dateChanged);
});

function dateChanged(ev) {
    $(this).datepicker('hide');
    if ($('#startdate').val() != '' && $('#enddate').val() != '') {
        $('#period').text(diffInDays() + ' d.');
    } else {
        $('#period').text("-");
    }
}

Answer 2

在2.1.5版本中

自举-datetimepicker.js
http://www.eyecon.ro/bootstrap-datepicker
提供内容：
Andrew Rowls
Thiago de Arruda
由Jonathan Peterson @Eonasdan

changeDate已重命名为change.dp，因此changeate对我不起作用

$("#datetimepicker").datetimepicker().on('change.dp', function (e) {
            FillDate(new Date());
    });

还需要将css类从datepicker更改为datepicker-input

<div id='datetimepicker' class='datepicker-input input-group controls'>
   <input id='txtStartDate' class='form-control' placeholder='Select datepicker' data-rule-required='true' data-format='MM-DD-YYYY' type='text' />
   <span class='input-group-addon'>
       <span class='icon-calendar' data-time-icon='icon-time' data-date-icon='icon-calendar'></span>
   </span>
</div>

日期格式化也适用于大写字母，如数据格式=＆＃39; MM-DD-YYYY＆＃39;

对于给我带来非常困难的人来说，这可能会有所帮助:)。

Answer 3

新版本已更改..对于最新版本，请使用以下代码：

$('#UpToDate').datetimepicker({
        format:'MMMM DD, YYYY',
        maxDate:moment(),
        defaultDate:moment()            
    }).on('dp.change',function(e){
        console.log(e);
    });

Answer 4

试试这个：

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

Answer 5

我找到了一个简短的解决方案。只需触发 changeDate 事件，就不需要额外的代码。例如。 $('.datepicker').datepicker().trigger('changeDate');

Answer 6

尝试使用以下代码示例。它对我有用

var date_input_field = $('input[name="date"]');
    date_input_field .datepicker({
        dateFormat: '/dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    }).on('change', function(selected){
        alert("startDate..."+selected.timeStamp);
    });

Answer 7

这应该可以在两种情况下都有效

function onDateChange() {
   // Do something here
}

$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);

Answer 8

这取决于您使用的Bootstrap日期选择器，这是当前与该错误有关的已知错误：

代码：https://github.com/uxsolutions/bootstrap-datepicker

（文档：https://bootstrap-datepicker.readthedocs.io/en/latest/）

这是一个错误报告：

https://github.com/uxsolutions/bootstrap-datepicker/issues/1957

如果有人对此有解决方案/变通办法，那么如果您将其包括在内，那就太好了。

Answer 9

我有关于datetimepicker https://tempusdominus.github.io/bootstrap-4/的这个版本，并且由于任何原因都无法通过jquery进行更改事件，但是对于JS vanilla则可以做到

我这样想

document.getElementById('date').onchange = function(){ ...the jquery code...}

我希望为您工作

Answer 10

我正在使用AngularJS和AngularStrap 2.3.7，并试图通过监听'change'元素（而不是输入本身）来捕获<form>事件，但是这里没有一个答案对我有用。我尝试这样做：

$(form).on('change change.dp dp.change changeDate' function () {...})

什么也不会发生。我最终听了focus和blur事件，并在元素本身之前/之后设置了自定义属性：

// special hack to make bs-datepickers fire change events
// use timeout to make sure they all exist first
$timeout(function () {  
    $('input[bs-datepicker]').on('focus', function (e){
        e.currentTarget.focusValue = e.currentTarget.value;
    });        
    $('input[bs-datepicker]').on('blur', function (e){
        if (e.currentTarget.focusValue !== e.currentTarget.value) {
            var event = new Event('change', { bubbles: true });
            e.currentTarget.dispatchEvent(event);
        }
    });
})

这基本上是手动检查focus和blur之前和之后的值，并分派新的'change'事件。 { bubbles: true }位是用来检测更改的表格。如果ng-if中有任何datepicker元素，则需要将监听器包装在$timeout中，以确保摘要首先发生，以便所有datepicker元素都存在。

希望这对某人有帮助！

手动编辑日期或清除日期时，bootstrap datepicker更改日期事件不会启动

10 个答案:

这取决于您使用的Bootstrap日期选择器，这是当前与该错误有关的已知错误：