Javascript 引导日期选择器在选择当前日期后清空字段

Javascript 引导日期选择器在选择当前日期后清空字段,javascript,jquery,twitter-bootstrap,datepicker,bootstrap-datepicker,Javascript,Jquery,Twitter Bootstrap,Datepicker,Bootstrap Datepicker,如果启用了自动关闭,并从已选择的日历中选择了字段,则会清空该字段,然后按预期关闭日期选择器。我怎样才能保留自动关闭功能,但不让它清空字段 以演示为例 确保自动关闭处于打开状态 选择一个日期 再次打开日期选择器,再次选择当前选定的日期 字段再次为空 感谢Bootstrap Datepicker提供的功能,您可以利用它来实现您的目标 这里有一种方法: $('#sandbox-container input').datepicker({ autoclose: true }); $('#san

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

以演示为例

  • 确保自动关闭处于打开状态
  • 选择一个日期
  • 再次打开日期选择器,再次选择当前选定的日期
  • 字段再次为空

  • 感谢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);
        }
    });
    
    不一定是最优雅的,但正如你在这里看到的,它做到了:


    (在Chrome中测试)

    以防万一,如果有人想在“一行”中实现所有事件,我在这里分享我在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模型。

    你可以在这里阅读更多关于这些活动的信息

    关于bootstrap datepicker.js

    • 回购:
    • 演示:
    • 文件:
    • 分叉自
    快速修复: 在defaults@line 1394中,添加一个新选项allowDeselection

    var defaults = $.fn.datepicker.defaults = {
        allowDeselection: false,
        ...
    };
    
    在第1015行的_toggle_multidate函数中,将
    “else if(ix!=-1)”语句修改为:

    else if (ix !== -1 && this.o.allowDeselection){
                this.dates.remove(ix);
            }
    

    参考资料:

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

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

    请建议是否需要任何修改

    这应该是默认行为。谢谢有一个问题是日期选择器变得太粘。如何让它只在第一次工作?太好了,谢谢!