Update bootstrap-datepicker externally

Question

I'm using Bootstrap-datepicker in multiselect + inline mode and I need to update it from the outside with some preselected dates. I have done some reasearch but nothing seems to work. To keep in mind, I'm in an angularJS context and the datepicker is inside an angular directive. Things I've tried so far:

1.

element.data('datepicker').dates = myDatesArray;

This sets the dates but something weird happens, when the calendar is rendered all the dates I have set are displayed with a time offset of -3 hours (keep in mind I do not need the time part of the date object). I have tried to do something like .addHours(3,0,0,0) on each date before feeding it to the control and something even weirder happens: the dates are set as expected, but instead something happens (which obviously I have no idea why) and the control disables them. So the dates are selected and disabled at the same time, which is crap because the user cannot deselect them anymore.

2.

I have found an SO question and tried something from there, like:

$('.datepicker').datepicker('setDate', new Date('2014-06-12')); $('.datepicker').datepicker('setValue', '2014-06-19').datepicker('update'); $('.datepicker').datepicker('update', '2014-06-29');

Each of these cause the datepicker to be rendered one more time. And if I have these inside a loop to go through all the dates in my array I'm going to have as many calendars as selected dates.

3.

I have also tried to create a method inside the control, something like its beforeShowDay , but that didn't work either, because the internal array the control is using isn't exposed at that time so I get some errors thrown at me.

If needed I can add the angular directive, but I don't think it's too relevant.

PS: I don't know that much jQuery and I feel that something really obvious is staring in my face because I have seen a lot of comments from people that claim the 2nd method (all of them actually) work for them. Any help would be highly appreciated.

Ok, as requested I have created a JSFiddle. Here it is: fiddle

Answer 1

You can set the value for the input which is the source for date/time picker, then call

$(sourceelement).val(newvalue);
$(sourceelement).datepicker('update');

Answer 2

OK, so I've figured it out. I don't yet know why, but when doing $('.datepicker').datepicker('setDate', new Date('2014-06-12')); the control duplicated itself. But going forward for that, I've done something like this: element.datepicker({/*init stuff here*/}).datepicker('setDate', date); This works as expected, it sets the array as it should and also if I want to deselect something it works as it should. Also this works with arrays of dates. Here is the working fiddle