手动编辑日期或清除日期时，引导日期选择器更改日期事件不会触发

Posted 2023-02-22

【中文标题】手动编辑日期或清除日期时，引导日期选择器更改日期事件不会触发

【英文标题】：bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

【发布时间】：2014-04-25 19:18:50

【问题描述】：

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

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

【参考方案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("-");
    

【讨论】：

你能举个例子吗？

.change(...).on('changeDate') 导致双重触发。

代替 'changeDate' 尝试对我有用的 'dp.change'

如何获取月份变化事件？

我有输入日期选择器的价值，例如 08-16-2017。刷新页面时，会将值 08-16-2017 分配给输入字段。赋值后是否可以通过代码触发changeDate。

【参考方案2】：

在 2.1.5 版本中

bootstrap-datetimepicker.js http://www.eyecon.ro/bootstrap-datepicker 贡献： 安德鲁·罗尔斯 蒂亚戈·德·阿鲁达 Jonathan Peterson @Eonasdan 为 Bootstrap v3 更新

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'

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

【讨论】：

从 4.7.14 版开始，正确的事件引用是“dp.change”

【参考方案3】：

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

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

【参考方案4】：

试试这个：

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

【讨论】：

还要描述您的解决方案，这样您就可以清楚地知道您在代码中尝试做什么以及为什么要这样做。

请解释你的答案。

【参考方案5】：

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

【参考方案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);
    );

【参考方案7】：

这应该使它在两种情况下都可以工作

function onDateChange() 
   // Do something here


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

【参考方案8】：

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

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

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

这是一个错误报告：

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

如果有人对此有解决方案/解决方法，如果你能包含它会很棒。

【参考方案9】：

我有这个关于 datetimepicker https://tempusdominus.github.io/bootstrap-4/ 的版本，并且出于任何原因不能使用 jquery 进行更改事件，但使用 JS vanilla 它可以

我是这样想的

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

希望对你有用

【参考方案10】：

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

$(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 元素都存在。

希望这对某人有所帮助！

【参考方案11】：

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/