Javascript 为什么我能';在同一个表中不使用日期选择器两次?
我知道也有类似的问题,但我真的找不到一个适合我的问题的答案 我有一个Javascript 为什么我能';在同一个表中不使用日期选择器两次?,javascript,jquery,knockout.js,datepicker,jquery-ui-datepicker,Javascript,Jquery,Knockout.js,Datepicker,Jquery Ui Datepicker,我知道也有类似的问题,但我真的找不到一个适合我的问题的答案 我有一个HTML表,它通过我的viewModel中定义的数组循环: <div class="formElement" id="AssimilationDT" style="overflow-x: auto; width: 100em;"> <table class="dataTable"> <thead> <tr>
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" alt="Close" data-bind="click: $root.removeAssimilationRow">
</td>
</tr>
</tbody>
</table>
<button type="button" id="newSupplierRow" class="button" data-bind="click: newAssimilationRow">Добави Ред</button>
</div>
及
上述函数用于添加或删除HTML表中的行。
我面临的问题是,.datepicker
只在第一个表行上工作-如果我添加另一行,它就是不工作
我很确定我不能正确地称呼它,但作为一个初学者,我无法发现这个问题。是否有方法在每个表行上调用日期选择器
更新
我补充说
assimilationDatePicker = (function() {
$( ".AssimilationDate" ).datepicker({
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
});
});
现在它显示在每一行上,但只更新第一行输入的值。如果使用
ID
调用datepicket
,它将只对一个元素起作用。您需要为元素设置一个公共类,该类需要显示一个datepicket,如下所示
假设您将类设置为class=“datepicketxt”
然后像这样调用datepicker
$( ".datepicketTxt").datepicker({
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
});
将函数“AssociationDatePicker”的内容更改为
您可以在这里阅读有关使用事件绑定时传递的参数的文档
你的问题的答案很明显,我正在举例说明我的答案,你有一个元素和一个jquery,就像这个一样
<input type="text" name="AssimilationDate" id="AssimilationDate" data-bind="event: { mouseover: assimilationDatePicker}, value: AssimilationDate">
assimilationDatePicker = (function() {
$( ".Assimilation" ).datepicker({
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
});
});
这仅适用于两个控件,您可以使用类将其相乘n次,所以如果要使用一个控件,则只使用id;如果是多个控件,则在多个id中使用同一个类
我希望这将有助于获得您的解决方案……使用不同的
为每一个电话贴上标签。我希望这肯定能解决您的问题。我在这里编写了一个示例代码
http://jsbin.com/UgELONO/2/edit
干杯更新后您面临的问题是为所有日期选择器使用相同的id。您应该从datepicker元素中删除id,然后jQueryUI将自动生成它,一切都将正常工作。我已经修改了一点jsbin代码来演示
另外,我建议您使用datepicker的自定义绑定,这是一个很好的例子
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"
}" />
这比使用mouseover事件更干净、可读性更强。每页只能有一个ID,必须是唯一的,在应用日期选择器时,使用类作为多个元素的选择器。因为您为ID创建了日期选择器:$(“#同化日期”)。日期选择器
,您可以添加类选择器:$“.analizationDate”).datepicker
,并且在形式上也是
@krasu它工作了,但是,现在它只更新第一个框的值:(assemptionDatePicker=…
-是全局对象集,请尝试此this.assemptionDatePicker=…
,我对knockout.js没有专业知识,因此不确定它是否仍然有用。感谢您尝试帮助我!!!有机会使用JSFIDLE演示吗?问题是它只更新第一行的值:(当我单击输入框时,无论是哪一行,只有第一行中的值被更新,otehr行仍然为空。您可以尝试将日期选择器
调用移动到$(文档)。准备好了吗?
assimilationDatePicker = (function() {
$( ".Assimilation" ).datepicker({
yearRange: "-20:+100",
changeMonth: true,
changeYear: true,
dateFormat: "d-M-y"
});
});
http://jsbin.com/UgELONO/2/edit
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"
}" />