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)

在搞乱之后，我认为问题与如何定义输入元素的类有关，就像这个类似的问题：https://github.com/uxsolutions/bootstrap-datepicker/issues/249。然而，在使用不同的类名组合玩了几个小时之后，仍然没有更接近解决方案。

以下是生成的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脚本修改持续时间翻转框元素：

const getMaxContour = (image) => {
  const contours = image.findContours(cv.RETR_LIST,cv.CHAIN_APPROX_SIMPLE);
  let maxAreaFound = 0;
  let maxContour = [];
  let contourObj = null;
  console.log(`Found ${contours.length} contours.`);
  contours.forEach((contour,i)=>{
    // const perimeter = cv.arcLength(contour, true);
    const perimeter = contour.arcLength(true);
    const approx = contour.approxPolyDP(0.1*perimeter, true);
    const area = contour.moments()['m00'];

    if (approx.length == 4 && maxAreaFound<area){
      maxAreaFound = area;        
      maxContour = approx;
      contourObj=contour;
    }  
  });

  console.log(JSON.stringify(contourObj))
  console.log(`Max contour area found ${maxAreaFound}.`);

  return {
    contour:maxContour,
    area:maxAreaFound
  };
}

有一个问题，3-4个格式化问题......由于某种原因，只有Jquery UI才能工作 - 根本无法启动引导程序，而Jquery Mobile的模式接管整个页面而不显示根本就是输入框。

JQuery找不到类元素来修改JTSage DateBoxDuration Picker

1 个答案: