bootstrap-datetimejs: Update time selection when the input box is updated programatically

Question

OVERVIEW:

• We are using this plugin -- bootstrap-datetimejs (https://github.com/Eonasdan/bootstrap-datetimepicker). And I have it setup to show the time only

$(".timePicker").datetimepicker({
  format: 'LT'
});

We are using ractivejs for our javascript library and my html goes like this

<label for="apptEndTime">End Time</label>
<div class="timePicker">
    <input name="apptEndTime" id="apptEndTime" class="form-control date" type="text" value="{{apptEndTime}}" />
</div>

<label>Duration (mins)</label>
<input type="number" class="form-control" value="{{duration}}" id="duration" />

so apptEndTime is binded to ractive object data apptEndTime, and so does the duration. In my code, I made it that if the duration increases, it will also update the value of apptEndTime data. It successfully updated and displayed the apptEndTime.

PROBLEM:

• Though it successfully updated and displayed the apptEndTime, when I click the clock icon of the datetimepicker, it still shows the previous time. As you can see on the screenshot below, it already displayed as 11:58 PM but when I click the clock icon, it still shows as 11:57 PM

QUESTION:

• Is there a way that when I updated the value of apptEndTime, the time on the time selection menu (when the clock icon is clicked) will also gets updated?

I've already tried googling for day regarding this, but I can't seem to find the right solution. Also tried checking the documentation but can't find any related information

Answer 1

Ok my teammate was able to answer this question. He just added this line of code

$('input[name=appEndTime]').closest('.timePicker').data("DateTimePicker").date(appointmentObj.apptEndTime);

Where:

• $('input[name=appEndTime]') is the affected input field

• closest('.timePicker'). The '.timePicker' here is the name of your datetimepicker class/id when you initialize datetimepicker

• data("DateTimePicker"). You just follow this, because all functions should be accessed via data("DateTimePicker") as mentioned on the plugin page: https://getdatepicker.com/4/Functions/

• date(appointmentObj.apptEndTime). date is the function name (though it is not found on the list of functions from their page :( ). And appointmentObj.apptEndTime is value that I want to set on the menu