Question

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

查看演示示例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

确保自动关闭
选择日期。
再次打开日期选择器，再次选择当前选择的日期。
字段再次为空

由于

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

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

以防万一有人想在＆＃34;一行＆＃34;我在这里分享我在 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

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

4 个答案: