JQuery 找不到 Class 元素来修改 JTSage DateBoxDuration 选取器

Question

将 JTSage DateBox 与 Jinja2 模板结合使用：

    <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"]}) }}

在我尝试覆盖默认设置以仅显示小时和分钟字段之前，此模板呈现良好，正如我在此处阅读的那样：JQM Datebox remove Hours and Seconds from durationbox

但是，浏览器一直抛出这个错误：

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)

折腾了一下，我觉得问题出在input元素的class是怎么定义的，像这个类似的问题：https://github.com/uxsolutions/bootstrap-datepicker/issues/249。但是，在使用不同的 class 名称组合玩了几个小时之后，仍然离解决方案还差得很远。

这是生成的HTML：

<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>

有什么想法吗？一如既往地感谢您的帮助！

Answer 1

需要使用单独的 Jquery 脚本修改持续时间翻转框元素：

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

一个问题，还有 3-4 个格式问题....出于某种原因，只有 Jquery UI 可以工作 - 无法让 bootstrap 工作完全没有，而且 Jquery Mobile 的模态占据了整个页面，根本没有显示输入框。

JQuery 找不到 Class 元素来修改 JTSage DateBoxDuration 选取器

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

jquery

datepicker

jinja2

datebox