使用jQuery将数据从输入字段传递到datepicker

Question

我想创建一个用户可以选择两个日期的表单。

要做到这一点，我使用日期选择器。

JavaScript显示输入字段:

let form = document.getElementById("dateform");
let output = "<div>";
output +=
"<input type='text' id='date" + i + "' onFocus='pickdate("+ i +")'><br/>";
output += "</div>";
form.innerHTML = output;

"我之所以使用，是因为我在一个表中有几项内容可供用户预订日期。因此，为了不重复预订相同的东西，我创建了一个循环，为每个产品提供唯一的id。

function pickdate(i) {
$(document).ready(function () {
date = $("#date" + i).datepicker();
});
}

现在，这段代码工作了。我遇到的问题是，我必须点击日期选择器两次，以便它显示。

我设法让日期选择器在第一次点击时弹出的唯一方法是使用这个:

$(document).on("focus", "#date1", function () {
$(this).datepicker();
});

通过使用这个，我也不需要在html中调用函数。

然而，这里给出了" I "手动输入"id="#date1"我需要它是动态的，来自用户点击的产品。使用JavaScript，我可以像上面那样发送变量。但是我怎么发送"I"呢?值到函数与jQuery?

谢谢。编辑:

我尽了最大的努力来重现这个问题:

https://codepen.io/leoss/pen/gOKGRML

Answer 1

如果您为每个<input/>添加相同的css类并删除onFocus，如:

let dateOutput += "<div class='booking-dates'>";
dateOutput +=
"<input type='text' class='my-date-picker' id='date" + i +"' />;

你可以一次初始化所有的日期选择器，比如:

$(document).ready(function () {
$('.my-date-picker').datepicker({
onSelect: function (date) {
}
});
});

您甚至可能根本不需要id属性。

这是一个代码依赖程序，它结合了您的示例和我上面的示例，并展示了如何一次初始化任意数量的日期拾取器，以及如何找到日期拾取器的i，其中选择了日期。