Question

我知道有类似的问题，但我真的无法找到适合我的问题的答案。

我有这个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>

我在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"
                        });
                    });

现在它显示在每一行上，但只更新第一行输入的值。

Answer 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"
                    }" />

这比使用鼠标悬停事件更清晰，更易读。

Answer 2

如果您使用datepicket致电ID，则仅适用于一个元素。您需要为元素设置一个公共类，它需要显示一个日期票据，如下所示

假设您将class设置为class="datepicketTxt"

然后像这样调用datepicker

                    $( ".datepicketTxt").datepicker({
                        yearRange: "-20:+100",
                        changeMonth: true,
                        changeYear: true,
                        dateFormat: "d-M-y"
                    });

Answer 3

你的问题的答案非常明显我通过举例说明你有一个元素和一个像这样的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中使用相同的类我希望这有助于让您的解决方案得到尊重......

Answer 4

我希望这肯定会解决您的问题。我在这里写了一个示例代码

 http://jsbin.com/UgELONO/2/edit

干杯

Answer 5

每页只能有一个ID，它必须是唯一的，在应用datepicker时，使用一个类作为多个元素的选择器。

Answer 6

将函数“assimilationDatePicker”的内容更改为

   $(arguments[1].target).datepicker({
                yearRange: "-20:+100",
                changeMonth: true,
                changeYear: true,
                dateFormat: "d-M-y"
            });

您可以在此处阅读有关使用事件绑定时传递的参数的文档

http://knockoutjs.com/documentation/event-binding.html

Answer 7

使用不同 <script></script> 每个电话的标签。

为什么我不能在同一个表中使用两次datepicker？

7 个答案: