如果我启用了自动关闭,并且我从已选择的日历中选择了字段,它会清空该字段,然后按预期关闭日期选择器。我怎样才能仍然拥有自动关闭功能,但不让它清空该字段?
- 确保自动关闭已打开
- 选择一个日期。
- 再次打开日期选择器,再次选择当前选择的日期。
- 字段再次为空
谢谢
如果我启用了自动关闭,并且我从已选择的日历中选择了字段,它会清空该字段,然后按预期关闭日期选择器。我怎样才能仍然拥有自动关闭功能,但不让它清空该字段?
谢谢
Bootstrap Datepicker 提供了可以用来实现目标的事件。
这是一种方法:
$('#sandbox-container input').datepicker({
autoclose: true
});
$('#sandbox-container input').on('show', function(e){
if ( e.date ) {
$(this).data('stickyDate', e.date);
}
else {
$(this).data('stickyDate', null);
}
});
$('#sandbox-container input').on('hide', function(e){
var stickyDate = $(this).data('stickyDate');
if ( !e.date && stickyDate ) {
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
不一定是最优雅的,但正如您在此处看到的那样,它可以解决问题:
http://jsfiddle.net/klenwell/LcqM7/(在 Chrome 中测试)
这似乎是最通用的解决方案,因为当我们单击输入文本并单击网页上除日期选择之外的其他组件时出现问题:
//Date picker
$('#datepickerInputId').datepicker({
autoclose : true,
}).on('show', function(e){
if ( e.date ) {
$(this).data('stickyDate', e.date);
} else if($(this).val()){
/**auto-populate existing selection*/
$(this).data('stickyDate', new Date($(this).val()));
$(this).datepicker('setDate', new Date($(this).val()));
} else {
$(this).data('stickyDate', null);
}
}).on('hide', function(e){
var stickyDate = $(this).data('stickyDate');
if ( !e.date && stickyDate ) {
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
请建议是否需要任何修改
快速修复:在默认值@第 1394 行,添加一个新选项,allowDeselection
var defaults = $.fn.datepicker.defaults = {
allowDeselection: false,
...
};
在_toggle_multidate函数@第1015行,修改"else if (ix !== -1)"
语句为:
else if (ix !== -1 && this.o.allowDeselection){
this.dates.remove(ix);
}
参考:https ://github.com/eternicode/bootstrap-datepicker/issues/816
以防万一有人想在“一行”中实现所有事件,我在这里分享我在ASP.NET MVC项目中使用的代码。
并感谢@klenwell 的解决方案!
$('#ExpectedEndingTimeDataPicker').datepicker({
startDate: "@Model.ExpectedEndingTimeAsString",
language: "@Model.CurrentCultere2Letters",
autoclose: true,
todayHighlight: true,
format: "@Model.CurrentDateFormat"
}).on('changeDate', function (e) {
RecalculateEstimationDate();
}).on('show', function (e) {
if (e.date) {
$(this).data('stickyDate', e.date);
}
else {
$(this).data('stickyDate', null);
}
}).on('hide', function (e) {
var stickyDate = $(this).data('stickyDate');
if (!e.date && stickyDate) {
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
请注意,这Model
是ASP.NET MVC 模型。
您可以在此处阅读有关这些事件的更多信息http://bootstrap-datepicker.readthedocs.org/en/release/events.html
关于bootstrap-datepicker.js