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

bootstrap-datepicker empties field after selecting current date

提问by NeedACar

If I have autoclose enabled, and I select the field from the calendar that is already chosen, it empties the field and then closes the datepicker as expected. How can I still have the autoclose feature, but not have it empty the field?

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

Look at the demo for an example, 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

以演示为例，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

1. Make sure autoclose is on
2. Select a date.
3. open the datepicker again, select the currently selected date again.
4. field is empty again

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

Thanks

谢谢

回答by klenwell

Bootstrap Datepicker provides eventsthat you can leverage to accomplish your goal.

引导日期选择器提供的事件，你可以利用，以实现自己的目标。

Here's one way to do it:

这是一种方法：

$('#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);
    }
});

Not necessarily the most elegant, but as you can see here, it does the trick:

不一定是最优雅的，但正如您在此处看到的，它可以解决问题：

http://jsfiddle.net/klenwell/LcqM7/(tested in Chrome)

http://jsfiddle.net/klenwell/LcqM7/（在 Chrome 中测试）

回答by PankajChandankar

This seems to be most generic solution as there was issue when we click on input text and click on some other component on webpage apart from date selection:

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

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

kindly suggest if any modification needed

请建议是否需要任何修改

回答by bhavya_w

Quick Fix: In the defaults @ line 1394, add a new option, allowDeselection

快速修复：在 defaults @ line 1394 中，添加一个新选项，allowDeselection

var defaults = $.fn.datepicker.defaults = {
    allowDeselection: false,
    ...
};

In the _toggle_multidate function @ line 1015, modify the "else if (ix !== -1)"statement to:

在_toggle_multidate函数@第1015行，修改"else if (ix !== -1)"语句为：

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

Reference : https://github.com/eternicode/bootstrap-datepicker/issues/816

参考：https: //github.com/eternicode/bootstrap-datepicker/issues/816

回答by Developer

Just in case if someone want to implement all events in "one line" I am sharing here the code I use in ASP.NET MVCproject.

以防万一如果有人想在“一行”中实现所有事件，我在这里分享我在ASP.NET MVC项目中使用的代码。

And thank you to @klenwell for his solution!

并感谢@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);
    }
});

Notice that Modelis ASP.NET MVC model.

请注意，这Model是ASP.NET MVC 模型。

You can read more about those event here http://bootstrap-datepicker.readthedocs.org/en/release/events.html

您可以在此处阅读有关这些事件的更多信息http://bootstrap-datepicker.readthedocs.org/en/release/events.html

And about bootstrap-datepicker.js

关于bootstrap-datepicker.js

• Repo: https://github.com/eternicode/bootstrap-datepicker/
• Demo: http://eternicode.github.io/bootstrap-datepicker/
• Docs: http://bootstrap-datepicker.readthedocs.org/
• Forked from http://www.eyecon.ro/bootstrap-datepicker

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