javascript - Eonasdan/bootstrap-datetimepicker 日期时间选择器通过外部 javascript 调用重置

Question

我使用了Eonasdan/bootstrap-datetimepicker版本:4.17.47，现在解释一下当我从文本框打开bootstrap-datetimepicker时的场景并选择日期，之后我有一个清除按钮单击我已经清除该值，但是当我返回打开 datetimepicker 时，它会将之前选择的日期显示为突出显示。所以问题是日期时间选择器未重置，我想在取消点击外部 JavaScript 调用时重置该日期时间选择器。

我在下面使用过，但它们都不起作用

$('#myDatepicker').data('datepicker').setDate(null);

$('#myDatepicker').data().DateTimePicker.date(null);

而且，如果我有两个像 fromdate 到 todate 这样的日期时间选择器，它就不起作用。

Answer 1

您可以使用:

clear(): Clears the datepicker by setting the value to null

相反，如果您只需要重置所选日期，您可以:

• 保存属性:如果为 true，则已单击重置按钮，如果不是，则不重置
• 在日期选择器的显示和更新事件中，您可以测试是否单击了重置按钮。如果是，则删除所选日期的事件类
• 在日期选择器发生更改事件时，可以重置之前设置的属性。

$('#myDatepicker').datetimepicker().prop("resetDatePicker", false).on('dp.update dp.show', function(e) {
    if ($('#myDatepicker').prop("resetDatePicker")) {
        $(this).find('td.day.active').removeClass('active today');
    }
}).on('dp.change', function(e) {
    $('#myDatepicker').prop("resetDatePicker", false);
});


$('#resetDatePicker').on('click', function(e) {
    $('#myDatepicker').data("DateTimePicker").date(moment());
    $('#myDatepicker').prop("resetDatePicker", true).find(':input').val('');
});

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css"/>




<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='myDatepicker'>
                    <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <button id="resetDatePicker" class="btn btn-default" type="button">Clear</button>
        </div>
    </div>
</div>