JQuery Can't Find Class Element to Modify JTSage DateBoxDuration Picker

Using JTSage DateBox with a Jinja2 template:

    <form id="task_descriptions" method="post" name="about_tasks" action="/tasks_submitted">
    {{ abt_task.hidden_tag() }}
    <p>
    <p> {{ abt_task.hours.label }}<br>         
        {{ abt_task.hours(type="text", class="form-control", **{"data-role":"datebox", "data-datebox-mode":"durationflipbox", "data-datebox-override-Duration-Order":["h","i"]}) }}

This template renders fine until I try to override the default settings to display only the hour and minute fields, as I read here: JQM Datebox remove Hours and Seconds from durationbox

However, the browser keeps throwing this error:

jtsage-datebox.min.js:3 Uncaught TypeError: Cannot read property 'top' of undefined
    at HTMLUListElement.<anonymous> (jtsage-datebox.min.js:3)
    at Function.each (jquery-3.3.1.min.js:2)
    at w.fn.init.each (jquery-3.3.1.min.js:2)
    at t.(anonymous function).(anonymous function)._fbox_pos (https://cdn.jsdelivr.net/npm/jtsage-datebox-jqueryui@4.3.1/jtsage-datebox.min.js:3:30111)
    at t.(anonymous function).(anonymous function)._fbox_pos (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
    at HTMLInputElement.<anonymous> (jtsage-datebox.min.js:3)
    at HTMLInputElement.dispatch (jquery-3.3.1.min.js:2)
    at HTMLInputElement.y.handle (jquery-3.3.1.min.js:2)
    at Object.trigger (jquery-3.3.1.min.js:2)
    at HTMLInputElement.<anonymous> (jquery-3.3.1.min.js:2)

After messing around, I think the problem is related to how the input element's class is defined, like this similar issue:https://github.com/uxsolutions/bootstrap-datepicker/issues/249. After playing around for a few hours with different class name combinations, though, still not any closer to a solution.

Here's the HTML generated:

<p> <label for="clock">Hours:</label><br>         
        <div class="datebox-input"><input class="form-control" data-datebox-mode="durationflipbox" data-datebox-override-duration-order="['h', 'i']" data-role="datebox" id="clock" name="hours" type="text" value="" readonly="readonly"><div class="datebox-input-icon" title="Open Date Picker"><span class=" ui-icon ui-icon-time"></span></div></div>
    </p>

Any ideas? Grateful, as always, for the help!

Needed to modify the duration flip box element with a separate Jquery script:

$('#clock').datebox({
mode: "durationflipbox",
overrideDurationOrder: ["h","i"] 
});

One problem down, 3-4 more formatting issues to go....For some reason, only Jquery UI will work - can't get bootstrap to work at all, and Jquery Mobile's modal takes over the entire page without showing the input box at all.