Bootstrap datepicker update method causing issues

Question

I'm trying to use the bootstrap datepicker from eternicode, which is a fork of the original eyecon picker.

I've added a jsfiddle example of what I'm trying to do.

At the bottom of all the js in the fiddle is where I initialize my datepicker. I added a setTimout so I could simulate changing the datepickers date dynamically. I have read where you need to call datepicker('update'); after you do a setDate so it updates the pickers UI.

When I do this it's causing some issues. If you click on the input field to show the calendar, the calendar will display showing the highlighted date as today's date not the new date I updated it with.

When you close the picker it will append todays date to the end of the input value. This is not normal behavior. All I'm trying to do is set a new date and have it update the UI picker at the same time.

HTML

<div class="input-append date" id="date-picker">
    <input class="span6" size="16" type="text">
    <span class="add-on"><i class=""></i></span>
</div>

var picker = $('#date-picker').datepicker({format:'M d, yyyy' });

var d = new Date();
d.setDate(d.getDate() + 1);

setTimeout(function(){
  picker.datepicker("setDate", d).datepicker('update');
},3000);

ericB, You should update your example to use this fiddle which cleans up the external code by moving it to external resources instead of keeping it inline. — KyleMit

miron miron · Accepted Answer · 2014-08-08T15:48:22

Seems that you can only pass the date in the following format in order to keep the datepicker display the date properly:

picker.datepicker('update', new Date(d.getFullYear(), d.getMonth(), d.getDate()));

Where d is your desired date.

Bootstrap datepicker update method causing issues

2 Answers