Eonasdan/bootstrap-datetimepicker日期时间选择器通过外部JavaScript调用重置 [英] Eonasdan/bootstrap-datetimepicker datetime picker reset through external javascript call

问题描述

我使用的是 Eonasdan/bootstrap-datetimepicker版本:4.17.47 ，现在说明当我从文本框&选择日期之后，我有一个清除按钮onclick我已经清除了该值，但是当我返回打开datetimepicker时，其将先前选择的日期显示为突出显示.所以问题是datetimepicker未重置，我想在取消单击外部JavaScript调用时重置该datetime选择器.

I have use Eonasdan/bootstrap-datetimepicker version : 4.17.47, now explain scenario when I open bootstrap-datetimepicker from text box & selected date after that I have one clear button onclick I have clear that value, but when I am going back to open datetimepicker its shows previously selected date as highlighted. So issue is datetimepicker is not reset, I want to reset that datetime picker on cancel click external JavaScript call.

我在下面使用过，但没有一个在工作

I have use below but non of them is working

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

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

如果我有两个datetimepicker，例如fromdate到date，则它不起作用.

And also if I have two datetimepicker like fromdate to todate it's not working.

推荐答案

您可以使用:

clear():通过将值设置为来清除日期选择器空

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

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

Instead, if you need only to reset the selected day you can:

• 保存属性:如果为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>

这篇关于Eonasdan/bootstrap-datetimepicker日期时间选择器通过外部JavaScript调用重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！