Bootstrap-datepicker: Browser autocomplete cannot update date field input value

[msvplus]

Expected behaviour

If an input for a date field has already been submitted once, Firefox suggests this value for autocomplete. If I begin typing a date previously entered (e.g. 01.01.2017), I can click on the suggestion. I expect the input field to update and to show this value.

Actual behaviour

Instead, after clicking on the autocomplete suggestion given by Firefox and leaving the input field (on blur), the date input field remains empty. If I press 'Enter', datepicker sets the input value on the current date instead on the value shown in the input field.

Datepicker version used

Firefox 50.0
jQuery 1.8.3
Bootstrap 2.3.2
bootstrap-datepicker 1.6.4

Example code

https://jsfiddle.net/bvbtz2re/2/

(GIF shows first blurring by clicking somewhere on the background (--> field gets empty), then confirming the value by pressing the Enter key (--> field gets set to current date).

[joefreire]

same here

[M3lkior]

Any workaround ?

[slavogiez]

Here is my workaround tested on Chrome & Firefox :

var datepicker = $('#datepicker');
var dateinput = $('#datepicker > input');

datepicker.on("input",function(e){
    var val = e.target.value;
    if(val != undefined && val != ''){
        dateinput.attr("value-saved-bug-workaround",e.target.value);
    }
});

dateinput.on("blur",function(e){
    var val = dateinput.attr("value-saved-bug-workaround");
    if(val != undefined && val != ''){
           datepicker.datepicker("update", val);
    }
});

[sujaysarma]

This was NOT fixed in 2.0.0. Bug still exists in Microsoft Edge, Internet Explorer 11 and Google Chrome.

Repro:

1. Create a form in a web page with an input field and attach it to the datepicker, add a submit button.
2. Navigate to the web page from a web browser, Fill out the date and submit a few times.
3. Now click the date field and attempt to select a date from the auto-complete list. It is initially populated in the input control. But as soon as you move away, it disappears.

[sujaysarma]

@slavogiez -- Your workaround cannot be applied to a page with multiple date picker input controls. I have a web app with 14 pages (asp.net) that have the date picker controls. Multiple number in each page. It is hard to apply the workaround script to each of those pages.

[officinainformatica]

same problem :(

[cbdave]

I have same problem. When i select date from google chrome autocomplete, then datepicker set date to today. Now i fix it by add to input autocomplete="off", but this is no way for the future,

[Ichicon]

The problem is that the select event is not detected by the datepicker object (so its internal value is not updated). I fixed it by doing this in my init (all my datepickers ids begin with datepicker) :

    let datepickerList= $('input[id^="datepicker"]');
    datepickerList.each(function(idx){
        let datepicker = $(this);       
        datepicker.select(function(e){          
            datepicker.datepicker("update", datepicker.val());  
        });
    });

[Meekohi]

Causing us trouble on Chrome as well, autocomplete dropdown is blocking users from using the calendar:

[sujaysarma]

I wonder when this bug is going to be finally and comprehensively fixed?

[Meekohi]

My understanding is that this is more like a bug with Chrome, which they refuse to fix, even though it causes this issue in many cases, even in Google's own products 🙄.