更改事件不适用于 Bootstrap 4 个日历

Question

我正在使用这个dateTimePicker

这是我的 html:-

<div class="col-sm-3">
    <div class="form-group">
        <label for="sdating_1"><i class="fa fa-calendar" aria-hidden="true"></i> Day</label>
        <div class="input-group date" id="sDatePicker_1" data-target-input="nearest"  data-toggle="datetimepicker">
            <input type="text" class="form-control datetimepicker-input" data-target="#sDatePicker_1" data-toggle="datetimepicker" id="sdating_1" name="sdate[]" placeholder="Select Day"/>
            <div class="input-group-append" data-target="#sDatePicker_1" data-toggle="datetimepicker">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>
</div>

我已经添加了这样的库：-

<script type="text/javascript" src="{{asset('front_assets/assets/plugins/bootstrap-4-calender/js/tempusdominus-bootstrap-4.min.js')}}"></script>

这是我的代码：-

$('body').on('focus',"div[id*='DatePicker']", function(){
    $(this).datetimepicker({
        format: 'L',
    }).on('change.datetimepicker', function(e) { alert('hello')});
});

但是，我没有收到任何警报。我收到一个错误

TypeError: $(...).datetimepicker(...) is undefined

但是当我像这样删除 on change 事件时：-

$('body').on('focus',"div[id*='DatePicker']", function(){
    $(this).datetimepicker({
        format: 'L',
     });
});

我没有收到任何错误。

我做错了什么？

Answer 1

$(this).datetimepicker({
    format: 'L',
})

Returns 未定义，因此您无法堆叠 on 处理程序。我建议将您的代码更改为：

$('#DatePicker').datetimepicker({
    format: 'L'
})

$('#DatePicker').datetimepicker().on('dp.change',function(e){
    console.log(e)
    alert('hello')
})

Answer 2

可能是插件不可链接

尝试将 on() 直接添加到元素对象

$('body').on('focus',"div[id*='DatePicker']", function(){
    var $dp = $(this);
    $dp.datetimepicker({
        format: 'L',
    });

    $dp.on('change.datetimepicker', function(e) { alert('hello')});
});

更改事件不适用于 Bootstrap 4 个日历

Change event not working on Bootstrap 4 calender

jquery

calendar

bootstrap-4