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, /?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

Thanks

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

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

Thanks

• javascript
• jquery
• twitter-bootstrap
• datepicker
• bootstrap-datepicker

4 Answers 4

Bootstrap Datepicker provides events that 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)

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

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

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

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

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

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

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

And thank you to @klenwell for his solution!

$('#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 Model is ASP.NET MVC model.

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

And about 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