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

【问题标题】：bootstrap-datepicker empties field after selecting current date选择当前日期后，bootstrap-datepicker 清空字段
【发布时间】：2014-09-18 19:17:55
【问题描述】：

如果我启用了自动关闭，并且我从已选择的日历中选择了字段，它会清空该字段，然后按预期关闭日期选择器。我怎样才能仍然拥有自动关闭功能，但不让它清空字段？

以演示为例，http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation=on&forceParse=on#sandbox

确保自动关闭功能已开启
选择一个日期。
再次打开日期选择器，再次选择当前选中的日期。
字段又是空的

谢谢

【问题讨论】：

标签： javascript jquery twitter-bootstrap datepicker bootstrap-datepicker

【解决方案1】：

Bootstrap Datepicker 提供了events，您可以利用它来实现您的目标。

这是一种方法：

$('#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 中测试）

【讨论】：

这应该是默认行为。谢谢！
存在日期选择器变得太粘的问题。如何让它只在第一次工作？
太好了，谢谢！

【解决方案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);
    }
});

如果需要任何修改，请提出建议

【讨论】：

【解决方案3】：

快速修复：在 defaults @ 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

【讨论】：

【解决方案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 分叉

【讨论】：