Why can't I use datepicker twice in the same table?

Question

I know that there are different tasks, but I really cannot find the answer that matches my problem.

I have this HTML table that loops through the array defined in my view model:

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

what I have in my view, the .datepicker is the code below containing the rows of the table, and it should execute .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: "dMy" }); }); }, 

and

 newAssimilationRow = function (){ this.assimilationRows.push(new AssimilationInfo(this.clientNumber())); }, removeAssimilationRow = function (ca){ assimilationRows.remove(ca); }, 

The above functions add or remove rows in an HTML table. The problem I am facing is that .datepicker only works with the first row of the table - if I add another row, it just doesn't work.

I am sure that I cannot name it correctly, but I cannot define the problem as a beginner. Is there a way to call datepicker on every row of the table?

UPDATE

I added

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

and now it is displayed on each line, but only the input value of the first line is updated.

Answer 1

The problem you encountered after the upgrade is to use the same identifier for all of your date pickers. You have to remove the id from the datepicker element and then jquery-ui will automatically generate it and everything will work. I slightly modified the jsbin @Kishorevarma code to demonstrate it .

---

Also, I recommend using custom binding for datepicker, here is a good example of this.

 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); } } }; 

Then you just need to replace your input

 <input data-bind="datepicker: myDate, datepickerOptions: { yearRange: "-20:+100", changeMonth: true, changeYear: true, dateFormat: "dMy" }" /> 

This is much cleaner and clearer than using the mouseover event.

Answer 2

If you call datepicket using an ID , it will only work for one item. You need to set a common class for the elements that should display the date, for example below

suppose you set class as class="datepicketTxt"

then call datepicker as shown

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

Answer 3

The answer to your question is pretty obvious, I explain my answer, for example, you have one element and one jquery similar to this

 <input type="text" name="AssimilationDate" id="AssimilationDate" data-bind="event: { mouseover: assimilationDatePicker}, value: AssimilationDate"> 

correctly? now if you see your id AssimilationDate . But the problem is that one control has one unique identifier per page, so this is not possible.

now what to do? i take two inputs now

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

and your javascript function will look like this:

 assimilationDatePicker = (function() { $( ".Assimilation" ).datepicker({ yearRange: "-20:+100", changeMonth: true, changeYear: true, dateFormat: "dMy" }); }); 

This is only for two controls that you can multiply by n times using the class, so if you want to use one control, just use id, and if several then use the same class in several identifiers I hope this help you decide your decision ....

Answer 4

I hope this solves your problem for sure. I wrote a sample code here

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

Greetings

Answer 5

There can be only one identifier per page, which must be unique, use the class as a selector for multiple elements when applying datepicker.

Answer 6

Change the contents of the function "assimilationDatePicker" to

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

You can read here a document about the arguments passed when using the Event binding

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

Answer 7

use a different <script></script> tag for each call.