爲什麼我不能在同一個表中使用兩次datepicker？

我知道有類似的問題，但我真的找不到適合我的問題的答案。爲什麼我不能在同一個表中使用兩次datepicker？

我有這個HTML表女巫循環槽的陣列 - 在我的視圖模型定義：

<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>

什麼我在我的視圖模型是下面的代碼 - 包含錶行，它應該執行.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？

UPDATE

我加

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

，現在它顯示了每一行，但只有第一排輸入的值更新。

來源

2013-10-17 Slim

因爲你爲id創建datepicker：'$ text「name =」AssimilationDate「id =」AssimilationDate「class =」AssimilationDate「data-bind =」event：{mouseover：assimilationDatePicker}，value：AssimilationDate「>' – krasu

@krasu它的工作，但現在它只更新第一個框的值：（ – Slim

'assimilationDatePicker = ...' - 是全局對象，試試這個'this.assimilationDatePicker = ...'，我沒有knockout.js的專業知識，所以不確定它會幫助 – krasu

你面對後更新使用相同ID的所有datepickers問題。你應該從datepicker元素中刪除id，然後jquery-ui會自動生成它，一切都會工作。我修改了一下@Kishorevarma的jsbin代碼來演示it。

另外，我建議你使用自定義綁定的日期選擇器，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" 
        }" />

更換您輸入這是乾淨多了，也比使用鼠標懸停事件更具可讀性。

來源

2013-10-28 14:28:24 dIsoVi

如果您使用ID致電datepicket，它將僅適用於一個元素。您需要設置爲元素的公共類，它需要表現出datepicket，類似下面

假設，你設置的class像class="datepicketTxt"

然後調用datepicker這樣

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

來源

2013-10-17 07:13:10 Nauphal

問題是，它只更新第一行的值:( – Slim

@Slim：何時更新？ – Nauphal

當我點擊輸入框時，無論該行如何，只有第一行中的值被更新，並且otehr行保持空白。 – Slim

將函數「assimilationDatePicker」的內容更改爲

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

您可以閱讀文檔在這裏就當你使用事件綁定傳遞的參數

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

來源

2013-10-22 12:53:08 eggward

你的問題的答案是很明顯的一個我被給予比如你有一個元素，一個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 我希望這將有助於讓你的解決方案的問候....

來源

2013-10-25 05:22:46

使用不同 <script></script> 爲每個呼叫標記。

來源

2013-10-28 06:55:18 Ankit

我希望這會很好地解決您的問題。我已經寫在這裏的樣本代碼

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

乾杯

來源

2013-10-28 09:31:25 Kishorevarma

每頁只能有一個ID，它必須是唯一的，在應用datepicker時，使用一個類作爲多個元素的選擇器。

來源

2013-10-29 05:30:42

爲什麼我不能在同一個表中使用兩次datepicker？

回答

相關問題