jquery - 如何在 django 模板中循环获取 jQuery datepicker?
问题描述
我想在输入中有 datetimepicker。我只能在第一个条目中获得时钟。如何在所有输入中获取 datetimepicker?谢谢
这是我的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>
解决方案
在 HTML 中,id
参数必须是唯一的。您正在使用id="Start"
,id="End"
并且id="id_path"
在一个循环中,这意味着它将不止一次地出现在页面上。要么使用类,要么在循环内的每个 id 值上附加一些东西,比如id="Start_{{ forloop.counter }}"
. 文档
如果您使用的是类而不是 id,那么您可以使用单个 jquery 调用,例如class="datepickeried_input"
jQuery('.datepickeried_input').datetimepicker({
datepicker:false,
format:'H:i'
});