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

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

4

11 回答 11

44

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("-");
    }
}
于 2014-03-19T13:43:28.217 回答
8

在版本 2.1.5

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

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

日期格式也适用于这样的大写 data-format='MM-DD-YYYY'

这可能对那些让我很难受的人有帮助:)

于 2014-08-29T05:45:43.833 回答
6

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

$('#UpToDate').datetimepicker({
        format:'MMMM DD, YYYY',
        maxDate:moment(),
        defaultDate:moment()            
    }).on('dp.change',function(e){
        console.log(e);
    });
于 2016-02-03T08:03:37.423 回答
3

尝试这个： 

$(".datepicker").on("dp.change", function(e) {
    alert('hey');
});
于 2015-06-18T07:29:05.817 回答
1

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

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);
    });
于 2020-12-31T15:25:05.997 回答
1

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

于 2017-08-26T05:28:38.510 回答
0

这应该使它在两种情况下都有效

function onDateChange() {
   // Do something here
}

$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);
于 2014-05-19T22:22:59.977 回答
0

根据您正在使用的 Bootstrap 日期选择器，这是当前与此相关的一个已知错误：

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

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

这是一个错误报告：

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

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

于 2019-04-25T17:06:14.347 回答
0

I have this version about datetimepicker https://tempusdominus.github.io/bootstrap-4/ and for any reason doesn`t work the change event with jquery but with JS vanilla it does

I figure out like this

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

I hope work for you

于 2019-06-20T21:14:48.563 回答
0

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

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

什么都不会开火。我最终收听了focusandblur事件并在元素本身之前/之后设置了自定义属性：

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

这基本上是在 and 之前和之后手动检查值focus并blur调度一个新'change'事件。该{ bubbles: true }位是获得表格以检测更改的原因。如果您在 an 中有任何 datepicker 元素，则ng-if需要将侦听器包装在 a$timeout中以确保首先发生摘要，以便所有 datepicker 元素都存在。

希望这对某人有帮助！

于 2020-04-22T22:00:43.450 回答
0 
if($('.single_datetime').length){
        $('.single_datetime').dateRangePicker({ format: 'DD.MM.YYYY HH:mm', language: 'tr', autoClose: true, singleDate : true, showShortcuts: false, time: {enabled: true}
        }).bind('datepicker-change',function(event,obj){caclDay();});
    }

参考：https ://www.chamonix-property.com/bower_components/jquery-date-range-picker/

于 2021-08-30T18:24:34.843 回答