Search code examples
jquerytemplatesmeteordatepickerinstances

Pickadate changes date on multiple template instances in meteor

I am trying to use the 'pickadate' package in MeteorJS but 'pickadate' changes the date in all template instances instead of just the one where I want.

<body>
  <div class="outer">
    <h1 class="title">Datepicker</h1>
    {{> myTemplate}}
    {{> myTemplate}}
    {{> myTemplate}}
  </div>
</body>

<template name="myTemplate">
    <div class="ui myDay button">
        {{myDay}}
    </div>
</template>

The three 'myTemplate' instances should be independent so I use local reactiveVars. The 'day' reactive variable stores the date, and when the date picker closes, the picker takes the picker's 'highlighted' date, and the 'day' on the myTemplate instance gets set to that date. (In 'picker.on', 'this' refers to the picker.)

Template.myTemplate.helpers({
  myDay: function () {
        var myDay = Template.instance().day.get();
        return moment(myDay).format('ddd YYYY-MM-DD');
  }
});

Template.myTemplate.events({
});

Template.myTemplate.onCreated(function () {
    this.day = new ReactiveVar(new Date('2015-08-02'));
});

Template.myTemplate.onRendered(function () {
  var tmplInstance = this;

  var $input = $('div.ui.myDay.button').pickadate({
          containerHidden: '#hidden-input-outlet'
    });
    var picker = $input.pickadate('picker');
    picker.on({
      close: function() {
        tmplInstance.day.set(moment(this.get('highlight').obj)._d);
      }
    });

});

But for some reason the new date gets set on all three instances instead of just the one that I use the pickadate on.

The code is on meteorpad.com, where the buttons won't show up but you can click on the dates.

The question is how to make the buttons' date picker work independently.

Solution

  • /client/app.js line: 22 change to

    var $input = tmplInstance.$('div.ui.myDay.button').pickadate({

    The problem is that you use jquery to get pickadate instance but we need to get the correct one, So we can limit our jquery element to current template instance only with http://docs.meteor.com/#/full/template_$

    $() becomes TemplateInstanceHere.$() for example:

    this.$() or Template.instance().$() depends on where you're calling this from and it will find elements only in this template instance.

    Here is a working pad: http://meteorpad.com/pad/omAxqAEPPjiHRLMDw/Copy%20of%20Datepicker%20(1)