Wie benutze ich einen js Datapicker mit Meteor Blaze

Question

Ich möchte diese Datenauswahl https://github.com/richsilv/Pikaday/ in meiner Meteor App verwenden.

Nach dem Klicken in mein Eingabefeld sollte diese Datenauswahl angezeigt werden. Es funktioniert nur einmal, danach ich einen Fehler und ich glaube eine Endlosschleife:

Uncaught RangeError: Maximum call stack size exceeded.

und viele console.log Nachrichten von:

console.log(this.getMoment().format('YYYY-MM-DD')); 

Was mache ich falsch und wie man Verwenden Sie diesen Datapicker richtig?

html

{{#each showDates}} 
<li> 
    <input class="datapicker" type="text" value={{date}} id="data{{_id}}" /> 
</li> 
{{each}} 

js

'click .datapicker': function(e) {   
    $(document).ready(function() { 
     var picker = new Pikaday({ 
      field: document.getElementById(e.target.id), 
      format: 'YYYY-MM-DD', 
      onSelect: function() { 
       console.log(this.getMoment().format('YYYY-MM-DD')); 
      } 
     }); 
    }); 
}, 

Edit: Vielleicht eine wichtige Information: Ich brauche zwei mal im Eingabefeld klicken, um diese Daten Picker zu sehen. Dann muss ich meinen Browserprozess beenden oder meinen Meteor wegen dieses Fehlers/Endlosschleife neu starten.

Answer 1

Ich glaube, du bist nicht die richtige ID-Targeting, sollte das nicht:

field: document.getElementById(e.target.id), 

das sein?

field: document.getElementById(`data${e.target.id}`), 

Answer 2

einleiten Picker (oder andere Sachen müssen Sie initialisieren) in

Template.templateName.onRendered(function{ 
    //fires when the template is rendered 
    //initialize whatever here. here is a pickadate example 

    $('.elementClass').pickadate({ 
     selectMonths: true, 
     selectYears: true, 
     min: new Date(), 
     closeOnSelect: true, 
     onSet: function(context) { 
      var selected = moment(context.select).format('YYYY-MM-DD')); 
      //do something with selected 
     }, 
     onClose: function() { 
      //BONUS: this will prevent a bug/issue 
      //when you go to another tab or page and come back 
      //it fires the pickadate that was closed again. 
      //this might be a bug in materializeCSS only 
      $(document.activeElement).blur(); 
     } 
    }); 
});