JS, jQuery, how to dynamically update/refresh datepicker value after changing the input value

Question

I'm trying to dynamically change the date picker value I'm changing the input value using Jquery but unfortunately, date picker value stays the same.

image of the problem

You can see that the initial value is "19/06/2017" and after changing it shows the new value ("10/10/2017") in the text box but date picker still shows the previous date ("19/06/2017")

I tried using $('.datepicker').datepicker('update', $('#doc_due_date').val()); but still nothing changed

Is there a way update or refresh the date picker after changing the input value?

I read some answers regarding the same issue but seems like nothing worked, date picker still shows the initial value

thanks in advance.

ps I'm using bootstrap date picker

Answer 1

use this

$('#datepicker_id').datepicker({
    onSelect: function () {
        $('#data').text(this.value);
    }
});