python - 如何在 django 模板（for 循环）和 jquery 中创建多个日期时间选择器
问题描述
我无法让 django 在 html 页面的选项卡中显示多个日期时间选择器。如果我在循环之外指定 jquery 中的每个元素，我可以让它们工作，但是当我把它放在循环中时，它们不会显示（只显示一个空的输入文本框）。由于这必须在不同大小的数组上完成（最小长度为 1 且没有最大值），因此我无法对每个单独的 datetimepicker 进行硬编码。django 模板 html 页面上的 for 循环有效，并且每个选项卡和 datetimepickers 所在的部分都已制作，但 jquery 不起作用。
我试图通过一个循环来制作 4 个 datetimepicker（每个选项卡 4 个，可以有 1 个以上的选项卡），并且它们不会创建 datetimepicker 对象。只需创建一个输入文本框。
我还尝试将它们全部放入一个 class=datetimepicker 中，这确实有效，但是我无法从数组中添加默认数据来填充每个 datetimepicker，因为 jquery 中唯一的函数是一个调用 class 的函数。日期时间选择器。尝试 $('#date1').datetimepicker({ defaultDate: array[counter][0] }) 在数组中填充 date1 datetimepicker 的每个选项卡，但这也不起作用。
不包括通常的 django 模板代码，只是放入不起作用的部分：
------------------- template html ------------------------
{% if entryList %}
<ul id="tab_links" class="nav nav-tabs justify-content-center">
{% for entry in entryList %}
{% if forloop.first %} <!-- won't go through the first iteration otherwise -->
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_{{forloop.counter0}}">{{entry.0}}</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_{{forloop.counter0}}">{{entry.0}}</a></li>
{% endif %}
{% endfor %}
</ul>
<div id="tab_content" class="tab-content">
{% for entry in entryList %}
{% if forloop.first %}
<div id="tab_{{forloop.counter0}}" class="tab-pane fade in active">
<table cellspacing="10" cellpadding="10">
<tr>
<td> date1: </td>
<td style="position:relative">
<input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" ">
</td>
<!-- other input like txt boxes or drop down menus -->
</tr>
<tr>
<td> date2: </td>
<td style="position:relative">
<input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" ">
</td>
<!-- other input like txt boxes or drop down menus -->
</tr>
<tr>
<td> date3: </td>
<td style="position:relative">
<input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" ">
</td>
<!-- other input like txt boxes or drop down menus -->
</tr>
<tr>
<td> date4: </td>
<td style="position:relative">
<input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" ">
</td>
<!-- other input like txt boxes or drop down menus -->
</tr>
</table>
</div>
{% else %}
<div id="tab_{{forloop.counter0}}" class="tab-pane fade">
<table cellspacing="10" cellpadding="10">
<tr>
<td> date1: </td>
<td style="position:relative">
<input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" ">
</td>
<!-- other input like txt boxes or drop down menus -->
</tr>
<tr>
<td> date2: </td>
<td style="position:relative">
<input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" ">
</td>
<!-- other input like txt boxes or drop down menus -->
</tr>
<tr>
<td> date3: </td>
<td style="position:relative">
<input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" ">
</td>
<!-- other input like txt boxes or drop down menus -->
</tr>
<tr>
<td> date4: </td>
<td style="position:relative">
<input class="datetimepicker" type="text" id="date_{{forloop.counter0}}" name="date_{{forloop.counter0}}" ">
</td>
<!-- other input like txt boxes or drop down menus -->
</tr>
</table>
</div>
{% endif %}
{% endfor %}
</div>
.
. other data on template html
.
<script> var numOfTabs = {{entryListLength}};
var jsondataList = {{json_dataList|safe}};
</script>
<script src="{% static 'js/dates.js' %}"> </script> <!-- right before /body tag -->
--------------------------------js/dates.js------------------------------
// gotta use a for loop to get all tabs
// 4 parts of the array are dates: 7 - date rec, 10 - date ret, 16 - key req date, 17 - key rec date
var count = 0;
for (count; count < numOfTabs; count++) {
// date1
if ((jsondataList != null) && (jsondataList.length != 0) && (jsondataList[count][7] != null) && (jsondataList[count][7].length != 0)) {
var datearr = jsondataList[count][7].split(/-|\s|:/);
var date1 = new Date(datearr[0], datearr[1] - 1, datearr[2], datearr[3], datearr[4], datearr[5]);
var inName = "#date1_" + count;
console.log('array slot : ', count, 7, date1, inName);
$(function() {
$(inName).datetimepicker({
useCurrent:false,
format: 'YYYY-MM-DD HH:mm:ss',
defaultDate: date1,
});
});
} else {
$(function() {
$("#date1_" + count).datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
});
});
}
// date2
if ((jsondataList != null) && (jsondataList.length != 0) && (jsondataList[count][10] != null) && (jsondataList[count][10].length != 0)) {
var datearr = jsondataList[count][10].split(/-|\s|:/);
var date2 = new Date(datearr[0], datearr[1] - 1, datearr[2], datearr[3], datearr[4], datearr[5]);
var inName = "#date2_" + count;
console.log('array slot : ', count, 10, date2, inName);
$(function() {
$(inName).datetimepicker({
useCurrent:false,
format: 'YYYY-MM-DD HH:mm:ss',
defaultDate: date2,
});
});
} else {
$(function() {
$("#date2_" + count).datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
});
});
}
// date3
if ((jsondataList != null) && (jsondataList.length != 0) && (jsondataList[count][16] != null) && (jsondataList[count][16].length != 0)) {
var datearr = jsondataList[count][16].split(/-|\s|:/);
var date3 = new Date(datearr[0], datearr[1] - 1, datearr[2], datearr[3], datearr[4], datearr[5]);
var inName = "#date3_" + count;
console.log('array slot : ', count, 16, date3, inName);
$(function() {
$(inName).datetimepicker({
useCurrent:false,
format: 'YYYY-MM-DD HH:mm:ss',
defaultDate: date3,
});
});
} else {
$(function() {
$("#date3_" + count).datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
});
});
}
// date4
if ((jsondataList != null) && (jsondataList.length != 0) && (jsondataList[count][17] != null) && (jsondataList[count][17].length != 0)) {
var datearr = jsondataList[count][17].split(/-|\s|:/);
var date4 = new Date(datearr[0], datearr[1] - 1, datearr[2], datearr[3], datearr[4], datearr[5]);
var inName = "#date4_" + count;
console.log('array slot : ', count, 17, date4, inName);
$(function() {
$(inName).datetimepicker({
useCurrent:false,
format: 'YYYY-MM-DD HH:mm:ss',
defaultDate: date4,
});
});
} else {
$(function() {
$("#date4_" + count).datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
});
});
}
}
The code for the class version is
$(function() {
$(".datetimepicker").datetimepicker();
});
*this works for making datetimepickers, but can't put default values in.
预期的结果是它在页面上有选项卡，其数量等于数组/列表列表的大小，即 list[x][y] 将有 x 个选项卡。每个选项卡上都有 y 个输入变量（文本框、区域等）以及 4 个日期时间选择器。datetimepicker 应该从列表中为每个选项卡显示默认值，并且可以根据单击 datetimepicker 对象和弹出的日历来选择不同的值。
实际输出显示除日期时间选择器之外的所有内容。datetimepickers 显示为文本框，不填充默认值，并且在单击时不加载日历（就像文本框一样）。如果我将 js 作为仅作用于类本身的函数，它将生成 datetimepicker 对象，但不允许我输入默认值。
模板中的其他所有内容都有效，只是循环中的 datetimepickers 无效。现在已经尝试了几个星期来弄清楚。
编辑：
另外，需要注意的一点：如果我在循环之外创建 4 个日期时间选择器中的每一个，那么对于我创建它们的选项卡，它将起作用，但是由于我不知道我将拥有多少个选项卡，所以我必须这样做动态的，因此为什么它们在 javascript 循环中。
解决方案
为遇到相同或类似问题的其他人找到了解决方案。我没有直接在循环中创建 datetimepicker，而是将 datetimepicker 函数从循环中分离出来，然后调用它。
IE：
for loop
....
....
call mydatetimepicker(variable, variable)
mydatetimepicker(variable, variable) {
code to create a datetimepicker
}
因为我一生无法让它在循环中工作，但是一旦我将它们分开，即使使用默认日期它也能正常工作。
推荐阅读
- intellij-idea - PhpStorm“到处搜索”中缺少“章节”
- pine-script - 如何以指定价格制作 pine 脚本测试
- javascript - ChartJS 电子邮件 HTTP 请求 API
- java - java - 如何避免在java中的异步系统中并行处理重复项
- powershell - 如果列中的文本与特定路径或文件名匹配，则删除整行 CSV
- spfx - 如何覆盖 Kendo React 样式？
- spring - 带有 Jakarta Bean 验证框架的 Spring 应用程序
- node.js - 有没有办法解决 EPERM: operation not allowed, copyfile
- typescript - 如何使用来自@reduxjs/toolkit 的 WritableDraft 键入辅助函数参数？
- amazon-web-services - 如何恢复因任何病毒而丢失的 AWS .pem 文件和 putty 密钥