bootstrap-datepicker empties field after selecting current date

8
votes

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

4
javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker

4 Answers

12
votes

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)

3
votes

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

2
votes

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

1
votes

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