मैं उसी तालिका में दो बार डेटपिकर का उपयोग क्यों नहीं कर सकता?

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

जोड़ा गया है और अब यह हर पंक्ति पर पता चलता है, लेकिन केवल 1 पंक्ति इनपुट का मान अद्यतन किया जाता है।

Answer 1

समस्या अपडेट के बाद अपने सभी datepickers के लिए एक ही आईडी का उपयोग कर रहा है आप का सामना कर रहे। आपको idpicker तत्व से आईडी को हटा देना चाहिए और फिर jquery-ui इसे स्वचालित रूप से उत्पन्न करेगा और सब कुछ काम करेगा। मैंने it का प्रदर्शन करने के लिए @Kishorevarma का थोड़ा jsbin कोड संशोधित किया है।

---

इसके अलावा, मैं आप 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 का उपयोग करते हैं, तो यह केवल एक तत्व के लिए काम करेगा। आप की तरह नीचे

मान लीजिए, आप सेट तत्वों के लिए एक आम वर्ग है, जो एक datepicket दिखाने के लिए की जरूरत है, कुछ स्थापित करने के लिए classclass="datepicketTxt" तरह

तो datepicker इस

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

Answer 3

की तरह फोन की जरूरत है फंक्शन "assimilationDatePicker" की सामग्री को

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

पर आप पढ़ सकते हैं दस्तावेज़ यहाँ तर्क पारित कर दिया है जब आप इवेंट बंधन का उपयोग के बारे में

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

Answer 4

आपका प्रश्न का जवाब है काफी स्पष्ट है एक मैं उदाहरण देकर आप एक तत्व और एक jQuery यह एक

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

की तरह है के आधार पर अपना जवाब समझा रहा हूँ

सही? अब यदि आप देखते हैं कि आपकी आईडी AssimilationDate लेकिन समस्या यह है कि एक नियंत्रण में प्रति पृष्ठ एक अद्वितीय आईडी है, तो यह संभव नहीं हो सकता है

अब क्या करना है?मैं दो आदानों अब

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

ले रहा हूँ और अपने जावास्क्रिप्ट कार्य करेंगे लगता है कि यह एक

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

यह आपको यह n वर्ग का उपयोग कर कई बार गुणा इसलिए यदि एक नियंत्रण आप करना चाहते हैं कर सकते हैं केवल दो नियंत्रण के लिए है तो का उपयोग सिर्फ आईडी का उपयोग और कई तो अनेक आईडी मैं इस अपने समाधान का संबंध प्राप्त करने में मदद मिलेगी आशा में एक ही कक्षा का उपयोग ....

Answer 5

उपयोग विभिन्न <script></script> प्रत्येक कॉल के लिए टैग करें।

Answer 6

मुझे आशा है कि यह निश्चित रूप से आपकी समस्या का समाधान करेगा। मैं यहाँ एक नमूना कोड लिखा है

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

चीयर्स

Answer 7

केवल प्रति पृष्ठ एक आईडी हो सकता है, जो अद्वितीय होना चाहिए, डेटपिकर लागू करते समय एकाधिक तत्वों के चयनकर्ता के रूप में कक्षा का उपयोग करें।