为啥我不能在同一张表中使用 datepicker 两次？
Posted
技术标签:
【中文标题】为啥我不能在同一张表中使用 datepicker 两次？【英文标题】：Why I can't use datepicker twice in the same table?为什么我不能在同一张表中使用 datepicker 两次？ 【发布时间】：2013-10-25 13:34:20 【问题描述】：我知道有类似的问题，但我真的找不到适合我的问题的答案。
我有这个 html 表女巫正在循环通过一个数组 - 在我的 viewModel 中定义：
<div class="formElement" id="AssimilationDT" style="overflow-x: auto; width: 100em;">
<table class="dataTable">
<thead>
<tr>
<th> 1 </th>
<th> 2 </th>
<th> 3</th>
<th> 4</th>
<th> 5</th>
<th> 6</th>
<th> 7</th>
<th> 8</th>
<th> 9</th>
<th> 10</th>
<th> 11</th>
<th> 12/th>
<th> 13</th>
<th> 14</th>
<th> 15</th>
<th> 16</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: assimilationRows">
<tr>
<td><input type="text" name="AssimilationDate" id="AssimilationDate" data-bind="event: mouseover: assimilationDatePicker, value: AssimilationDate"></td>
<td><input type="text" name="InvoiceSum" data-bind="value: InvoiceSum"></td>
<td><input type="text" name="FondAssimAmm" data-bind="value: FondAssimAmm"></td>
<td><input type="text" name="FondSgebFondPerc" data-bind="value: FondSgebFondPerc"></td>
<td><input type="text" name="FondWholeAssimPerc" data-bind="value: FondWholeAssimPerc"></td>
<td><input type="text" name="SgebAssimAmm" data-bind="value: SgebAssimAmm"></td>
<td><input type="text" name="SgebFondSgeb" data-bind="value: SgebFondSgeb"></td>
<td><input type="text" name="SgebWholeAssimPerc" data-bind="value: SgebWholeAssimPerc"></td>
<td><input type="text" name="FondSuppl" data-bind="value: FondSuppl"></td>
<td><input type="text" name="FondSupplNum" data-bind="value: FondSupplNum"></td>
<td><input type="text" name="FondSupplInvNum" data-bind="value: FondSupplInvNum"></td>
<td><input type="text" name="FondDesc" data-bind="value: FondDesc"></td>
<td><input type="text" name="SgebSuppl" data-bind="value: SgebSuppl"></td>
<td><input type="text" name="SgebSupplNum" data-bind="value: SgebSupplNum"></td>
<td><input type="text" name="SgebSupplInvNum" data-bind="value: SgebSupplInvNum"></td>
<td>
<img src="/HDSHubCreditMonitoring/js/images/close.jpg" data-bind="click: $root.removeAssimilationRow">
</td>
</tr>
</tbody>
</table>
<button type="button" id="newSupplierRow" class="button" data-bind="click: newAssimilationRow">Добави Ред</button>
</div>
我的 viewModel 中有以下代码 - 包含表格行，它应该执行 .datepicker:
AssimilationInfo = function(clientNum)
this.AssimilationDate = null;
this.InvoiceSum = null;
this.FondAssimAmm = null;
this.FondSgebFondPerc = null;
this.FondWholeAssimPerc = null;
this.SgebAssimAmm = null;
this.SgebFondSgeb = null;
this.SgebWholeAssimPerc = null;
this.FondSuppl = null;
this.FondSupplNum = null;
this.FondSupplInvNum = null;
this.FondDesc = null;
this.SgebSuppl = null;
this.SgebSupplNum = null;
this.SgebSupplInvNum = null;
this.SgebDesc = null;
assimilationDatePicker = (function()
$( "#AssimilationDate" ).datepicker(
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
);
);
,
与
newAssimilationRow = function ()
this.assimilationRows.push(new AssimilationInfo(this.clientNumber()));
,
removeAssimilationRow = function (ca)
assimilationRows.remove(ca);
,
上述函数是在 HTML 表格中添加或删除行。
我面临的问题是.datepicker 仅在第一个表行上工作 - 如果我添加另一行，它就是不工作。
我很确定我不能正确调用它，但作为初学者我无法发现这个问题。有没有办法在每个表格行上调用datepicker？
更新
我加了
assimilationDatePicker = (function()
$( ".AssimilationDate" ).datepicker(
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
);
);
现在它显示在每一行，但只有第一行输入的值被更新。
【问题讨论】：
因为您为 id：$( "#AssimilationDate" ).datepicker 创建了日期选择器，所以您要添加类选择器：$( ".AssimilationDate" ).datepicker 并在表单中也有 <td><input type="text" name="AssimilationDate" id="AssimilationDate" class="AssimilationDate" data-bind="event: mouseover: assimilationDatePicker, value: AssimilationDate"></td>
@krasu 它有效，但是，现在它只更新第一个框的值:(
assimilationDatePicker = ... - 是全局对象，试试这个this.assimilationDatePicker = ...，我没有knockout.js的专业知识，所以不确定它是否有帮助
还是一样。感谢您试图帮助我！！！
有机会获得 jsfiddle 演示吗？
【参考方案1】：
更新后您面临的问题是所有日期选择器都使用相同的 ID。您应该从 datepicker 元素中删除 id，然后 jquery-ui 将自动生成它，一切都会正常工作。我修改了@Kishorevarma的一点jsbin代码来演示it。
另外，我建议您对 datepicker 使用自定义绑定，here 就是一个很好的例子。
ko.bindingHandlers.datepicker =
init: function(element, valueAccessor, allBindingsAccessor)
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || ,
$el = $(element);
$el.datepicker(options);
//handle the field changing
ko.utils.registerEventHandler(element, "change", function ()
var observable = valueAccessor();
observable($el.datepicker("getDate"));
);
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function()
$el.datepicker("destroy");
);
,
update: function(element, valueAccessor)
var value = ko.utils.unwrapObservable(valueAccessor()),
$el = $(element);
//handle date data coming via json from Microsoft
if (String(value).indexOf('/Date(') == 0)
value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
var current = $el.datepicker("getDate");
if (value - current !== 0)
$el.datepicker("setDate", value);
;
然后您只需将输入替换为
<input data-bind="datepicker: myDate, datepickerOptions:
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
" />
这比使用鼠标悬停事件更简洁、更易读。
【讨论】：
【参考方案2】：如果您使用ID 调用datepicket，它将仅适用于一个元素。您需要为元素设置一个公共类，该类需要显示一个 datepicket，如下所示
假设，您将class 设置为class="datepicketTxt"
然后像这样调用datepicker
$( ".datepicketTxt").datepicker(
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
);
【讨论】：
问题是它只更新第一行的值:( 当我点击输入框时，无论哪一行，都只更新第一行的值，其他行保持为空。 你能不能试着把你datepicker打电话给$(document).ready？【参考方案3】：
我希望这肯定能解决您的问题。我在这里写了一个示例代码
http://jsbin.com/UgELONO/2/edit
干杯
【讨论】：
【参考方案4】：你的问题的答案很明显，我通过举例来解释我的答案，你有一个元素和一个像这样的 jquery
<input type="text" name="AssimilationDate" id="AssimilationDate" data-bind="event: mouseover: assimilationDatePicker, value: AssimilationDate">
对吗？现在如果你看到你的 id 是 AssimilationDate 但问题是一个控件每个页面都有一个唯一的 id 所以这是不可能的
现在该怎么办？我现在接受两个输入
<input type="text" name="AssimilationDate" id="AssimilationDate" class="Assimilation" data-bind="event: mouseover: assimilationDatePicker, value: AssimilationDate">
<input type="text" name="AssimilationDate1" class="Assimilation" id="AssimilationDate1" data-bind="event: mouseover: assimilationDatePicker, value: AssimilationDate">
你的 javascript 函数看起来像这个
assimilationDatePicker = (function()
$( ".Assimilation" ).datepicker(
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
);
);
这仅适用于两个控件，您可以使用类将其乘以 n 次，因此如果您想使用一个控件，则只需使用 id，如果多个则在多个 id 中使用相同的类 我希望这将有助于获得您的解决方案......
【讨论】：
【参考方案5】：每个页面只能有一个ID，并且必须是唯一的，应用datepicker时使用一个类作为多个元素的选择器。
【讨论】：
【参考方案6】：将函数“assimilationDatePicker”的内容改为
$(arguments[1].target).datepicker(
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
);
您可以在此处阅读有关使用事件绑定时传递的参数的文档
http://knockoutjs.com/documentation/event-binding.html
【讨论】：
【参考方案7】：使用不同的
<script></script>
每次通话的标签。
【讨论】：
以上是关于为啥我不能在同一张表中使用 datepicker 两次？的主要内容，如果未能解决你的问题，请参考以下文章