选择当前日期后，bootstrap-datepicker清空字段

如果我启用了自动关闭，并且我从已选择的日历中选择了该字段，则会清空该字段，然后按预期关闭日期选择器。 我怎样才能使用autoclosefunction，但不能将其清空？

查看演示示例， http：//eternicode.github.io/bootstrap-datepicker/？markup = input＆format =＆weekStart =＆startDate =＆endDate =＆startView = 0＆minViewMode = 0＆todayBtn = false＆language = en＆Orientation = auto＆multidate =＆multipledateSeparator =＆autoclose = on＆ keyboardNavigation = ON＆forceParse =上＃沙箱

1. 确保autoclose已打开
2. 选择一个日期。
3. 再次打开日期选择器，再次选择当前选择的日期。
4. 字段再次为空

谢谢

Answer 1

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中测试过）

Answer 2

这似乎是最通用的解决方案，因为当我们点击输入文本并点击除日期选择之外的网页上的其他组件时出现问题：

 //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); } }); 

请提出是否需要进行任何修改

Answer 3

快速修复：在默认值@ line 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

Answer 4

如果有人想要在“一行”中实现所有事件，我将在这里分享我在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

• 回复： https ： //github.com/eternicode/bootstrap-datepicker/
• 演示： http ： //eternicode.github.io/bootstrap-datepicker/
• 文档： http ： //bootstrap-datepicker.readthedocs.org/
• 来自http://www.eyecon.ro/bootstrap-datepicker的分叉