我有用Eonasdan/bootstrap-datetimepicker 版本:4.17.47,现在解释一下当我从文本框打开 bootstrap-datetimepicker 并选择日期时的情况,之后我有一个清除按钮 onclick 我清除了该值,但是当我返回打开 datetimepicker 时,它显示之前选择的日期为突出显示。所以问题是日期时间选择器未重置,我想在取消单击外部 JavaScript 调用时重置该日期时间选择器。
我在下面使用过,但它们都不起作用
$('#myDatepicker').data('datepicker').setDate(null);
$('#myDatepicker').data().DateTimePicker.date(null);
而且,如果我有两个像从日期到今天这样的日期时间选择器,它就不起作用。
您可以使用:
clear() http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#clear:通过将值设置为 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)