如何在 Django 模板中循环获取 jQuery 日期选择器？

Question

我想在输入中包含日期时间选择器。我只能在第一个条目中获得时钟。如何在所有输入中获取日期时间选择器？谢谢

这是我的html:

<div>
    <table class="table table-hover" border="1" cellpadding="5" cellspacing="5" width="100%" style="width:100%">
      <tr>
        <th>Start</th>
        <th>End</th>
        <th>Update</th>
      </tr>
      {% for b in time_layer %}
      <tr scope="row">
        <form  action="/app/ok_go/"  method="get" autocomplete="off" >
            <td><input type="text" name="Start" id="Start"  value = "{{ b.Start|default:''  }}" size="1"></td>
            <td><input type="text" name="End" id="End"  value = "{{ b.End|default:''  }}"  size="1"></td>
            <input type="hidden" name="id_path" id="id_path"  value = "{{ request.build_absolute_uri  }}"  >
            <td><input class="btn btn-primary btn-sm" type="submit"value="Update"/></td>              
        </form>
      </tr>
      {% endfor %}
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"></script>


<script type="text/javascript">
    jQuery('#Start').datetimepicker({
      datepicker:false,
      format:'H:i'
    });
    jQuery('#End').datetimepicker({
      datepicker:false,
      format:'H:i'
    });
</script>

Answer 1

在HTML中，id参数必须是唯一的。您在循环中使用 id="Start"、id="End" 和 id="id_path"，这意味着它将多次出现在页面上。使用类或向循环内的每个 id 值附加一些内容，例如 id="Start_{{ forloop.counter }}"。 docs

如果您使用类而不是 ID，那么您可以使用单个 jquery 调用，例如 class="datepickeried_input"

jQuery('.datepickeried_input').datetimepicker({
    datepicker:false,
    format:'H:i'
});

如何在 Django 模板中循环获取 jQuery 日期选择器？

How to get jQuery datepicker in loop in django template?

forms

django

time

jquery

datetimepicker