Pourquoi je ne peux pas utiliser deux fois la fonction datepicker dans la même table?

Question

Je sais qu'il y a des questons simmilar, mais je ne trouve vraiment pas de réponse adaptée à mon problème.

J'ai cette sorcière de table HTML est creux en boucle un tableau - défini dans mon 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> 

ce que j'ai dans mon ViewModel est le code ci-dessous - contenant les lignes de la table et il est censé exécuter la .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" 
         }); 
        }); 
       }, 

ET

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

        removeAssimilationRow = function (ca){ 
         assimilationRows.remove(ca); 
        }, 

Les fonctions ci-dessus ajoutent ou suppriment des lignes dans la table HTML. Le problème auquel je suis confronté est que le .datepicker ne fonctionne que sur la première ligne du tableau - si j'ajoute une autre ligne, cela ne fonctionne tout simplement pas.

Je suis assez sûr que je ne peux pas l'appeler correctement, mais je ne suis pas en mesure de détecter le problème en tant que débutant. Y at-il un moyen d'appeler le datepicker sur chaque ligne de table?

MISE À JOUR

I ajouté

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

et maintenant il montre sur chaque ligne, mais seulement la valeur de la 1ère entrée de la ligne est mis à jour.

Answer 1

Le problème que vous rencontrez après la mise à jour est à utiliser même identifiant pour tous vos datepickers. Vous devez supprimer l'ID de l'élément datepicker, puis jquery-ui le générera automatiquement et tout fonctionnera. J'ai modifié un peu le code jsbin de @Kishorevarma pour démontrer it.

---

Aussi, je vous recommande d'utiliser la liaison personnalisée pour datepicker, here est un bon exemple de celui-ci.

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

Ensuite, vous aurez juste besoin de remplacer votre entrée avec

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

Ceci est beaucoup plus propre et plus lisible que d'utiliser événement mouseover.

Answer 2

Si vous appelez datepicket en utilisant ID, cela ne fonctionnera que pour un élément. Vous devez définir une classe commune pour les éléments, qui doit montrer un datepicket, quelque chose comme ci-dessous

On suppose que, vous définissez la class comme class="datepicketTxt"

puis appelez le datepicker comme celui-ci

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

Answer 3

Changer le contenu de la fonction "assimilationDatePicker" à

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

Vous pouvez consulter le le document ici concernant les arguments transmis lorsque vous utilisez l'événement de liaison

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

Answer 4

réponse de votre question est tout à fait évident que je vous explique ma réponse en donnant par exemple vous avez un élément et un jquery comme celui-ci

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

à droite? maintenant si vous voyez que votre identifiant est AssimilationDate Mais le problème est qu'un contrôle a un ID unique par page, donc cela ne peut pas être possible

maintenant que faire?je prends deux entrées maintenant

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

et votre volonté de fonction javascript ressemble à celui

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

Ceci est seulement pour deux contrôles que vous pouvez multiplier n fois en utilisant la classe, donc si un contrôle que vous souhaitez utilisez simplement utiliser id et si multiples puis utilisez même classe dans plusieurs ids J'espère que cela vous aidera à obtenir votre solution .... ce qui a trait

Answer 5

usage différent <script></script> tag pour chaque appel.

Answer 6

J'espère que cela va résoudre votre problème à coup sûr. J'ai écrit un exemple de code ici

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

Vive

Answer 7

Il ne peut y avoir qu'un seul ID par page, qui doit être unique, utiliser une classe comme sélecteur pour plusieurs éléments lors de l'application datepicker.