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

bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

本文关键字：日期 清除 编辑 选取 事件      更新时间：2023-09-26
<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>

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

如果要响应手动输入，则必须在输入本身上使用 change 事件，因为 changeDate 事件仅适用于使用 datepicker 更改日期的情况。

尝试这样的事情：

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

在 2.1.5 版中

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

更改日期已重命名为 change.dp，因此更改日期对我不起作用

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

还需要将 CSS 类从日期选择器更改为日期选择器输入

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

这对让我很难:)的人可能会有所帮助

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

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

试试这个：

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

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

尝试使用以下代码 sample.it 对我有用

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

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

function onDateChange() {
   // Do something here
}
$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);

根据您使用的 Bootstrap 日期选择器，这是当前已知的错误：

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

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

下面是一个错误报告：

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

如果有人对此有解决方案/解决方法，如果您能包含它，那就太好了。

我有这个关于日期时间选择器的版本 https://tempusdominus.github.io/bootstrap-4/并且出于任何原因无法使用jquery的更改事件，但是对于JS香草，它确实如此

我这样想办法

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

我希望为你工作

我正在使用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中有任何日期选取器元素，则需要将侦听器包装在$timeout中，以确保摘要首先发生，以便所有日期选取器元素都存在。

希望这对某人有所帮助！

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/

相关文章：