I have set up a meteor app that uses tsega:bootstrap3-datetimepicker for dates.

I have the following in detail.js:

Template.detail.helpers({
  editbuttonstate: function () {
    return (Session.get('editing')) ? 'glyphicon-ok' : 'glyphicon-pencil';
  },
  formattedStartDate: function () {
    return moment(this.startDate).format('DD/MM/YYYY HH:mm');
  },
  formattedEndDate: function () {
    return moment(this.endDate).format('DD/MM/YYYY HH:mm');
  }
});

Template.detail.events({
  'click .toggle-edit': function (e) {
    e.preventDefault();
    var editflag = Session.equals('editing', true);
    if (!editflag) {
      initDateTimePickers();
    } else if (Meteor.userId()) {
      var updatedEvent = {};
      updatedEvent.startDate = $('#input-start-date').data('DateTimePicker').date().toDate();
      updatedEvent.endDate = $('#input-end-date').data('DateTimePicker').date().toDate();
      updatedEvent.owner = Meteor.userId();
      Events.upsert({
        _id: this._id
      }, {
        $set: updatedEvent
      });
    }
    if (!editflag && !Meteor.userId()) {
      return;
    }
    Session.set('editing', (!editflag));
  }
});

Template.detail.rendered = function() {
    initDateTimePickers();
};

var initDateTimePickers = function() {
    var now = new Date();
    $('.datetimepicker').datetimepicker({
          locale: 'en_gb',
          format: 'DD/MM/YYYY HH:mm',
          defaultDate: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 12, 0, 0)
      });
    $('.set-due-date').focus(function () {
      $('.datetimepicker').data("DateTimePicker").show();
    });
    $("#input-start-date").on("dp.change", function (e) {
      $('#input-end-date').data("DateTimePicker").minDate(e.date);
    });
    $("#input-end-date").on("dp.change", function (e) {
      $('#input-start-date').data("DateTimePicker").maxDate(e.date);
    });
};

...and the following detail.html:

<template name="detail">
  <div class="page page-detail">
    <div class="container">
      {{#if editing}}
      <div class="input-group datetimepicker" id="input-start-date">
        <span class="input-group-addon" id="addon-quote">Start</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="{{formattedStartDate}}" />
      </div>
      <div class="input-group datetimepicker" id="input-end-date">
        <span class="input-group-addon" id="addon-quote">End</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="{{formattedEndDate}}" />
      </div>
      {{else}}
      <h4 class="title">Start: {{formattedStartDate}}</h4>
      <h4 class="title">End: {{formattedEndDate}}</h4>
      {{/if}}
    </div>
    <div class="container">
      <div class="btn btn-danger toggle-edit pull-right">
        <span class="glyphicon {{editbuttonstate}}"></span>
      </div>
    </div>
  </div>
</template>

When the template is first rendered, the date-time pickers work fine, but when save button is clicked followed by an edit button click, the date-time pickers are not functional anymore.

Upon save, they produce errors like:

TypeError: Cannot read property 'date' of undefined

Anyone have any idea what could be missing?

I have set up a meteor app that uses tsega:bootstrap3-datetimepicker for dates.

I have the following in detail.js:

Template.detail.helpers({
  editbuttonstate: function () {
    return (Session.get('editing')) ? 'glyphicon-ok' : 'glyphicon-pencil';
  },
  formattedStartDate: function () {
    return moment(this.startDate).format('DD/MM/YYYY HH:mm');
  },
  formattedEndDate: function () {
    return moment(this.endDate).format('DD/MM/YYYY HH:mm');
  }
});

Template.detail.events({
  'click .toggle-edit': function (e) {
    e.preventDefault();
    var editflag = Session.equals('editing', true);
    if (!editflag) {
      initDateTimePickers();
    } else if (Meteor.userId()) {
      var updatedEvent = {};
      updatedEvent.startDate = $('#input-start-date').data('DateTimePicker').date().toDate();
      updatedEvent.endDate = $('#input-end-date').data('DateTimePicker').date().toDate();
      updatedEvent.owner = Meteor.userId();
      Events.upsert({
        _id: this._id
      }, {
        $set: updatedEvent
      });
    }
    if (!editflag && !Meteor.userId()) {
      return;
    }
    Session.set('editing', (!editflag));
  }
});

Template.detail.rendered = function() {
    initDateTimePickers();
};

var initDateTimePickers = function() {
    var now = new Date();
    $('.datetimepicker').datetimepicker({
          locale: 'en_gb',
          format: 'DD/MM/YYYY HH:mm',
          defaultDate: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 12, 0, 0)
      });
    $('.set-due-date').focus(function () {
      $('.datetimepicker').data("DateTimePicker").show();
    });
    $("#input-start-date").on("dp.change", function (e) {
      $('#input-end-date').data("DateTimePicker").minDate(e.date);
    });
    $("#input-end-date").on("dp.change", function (e) {
      $('#input-start-date').data("DateTimePicker").maxDate(e.date);
    });
};

...and the following detail.html:

<template name="detail">
  <div class="page page-detail">
    <div class="container">
      {{#if editing}}
      <div class="input-group datetimepicker" id="input-start-date">
        <span class="input-group-addon" id="addon-quote">Start</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="{{formattedStartDate}}" />
      </div>
      <div class="input-group datetimepicker" id="input-end-date">
        <span class="input-group-addon" id="addon-quote">End</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="{{formattedEndDate}}" />
      </div>
      {{else}}
      <h4 class="title">Start: {{formattedStartDate}}</h4>
      <h4 class="title">End: {{formattedEndDate}}</h4>
      {{/if}}
    </div>
    <div class="container">
      <div class="btn btn-danger toggle-edit pull-right">
        <span class="glyphicon {{editbuttonstate}}"></span>
      </div>
    </div>
  </div>
</template>

When the template is first rendered, the date-time pickers work fine, but when save button is clicked followed by an edit button click, the date-time pickers are not functional anymore.

Upon save, they produce errors like:

TypeError: Cannot read property 'date' of undefined

Anyone have any idea what could be missing?

• javascript
• meteor
• twitter-bootstrap-3
• datetimepicker

Share Improve this question Follow asked Dec 9, 2015 at 10:53 CengizCengiz 1,07011 gold badge1313 silver badges1919 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

It looks like every time the edit/save button is clicked, new HTML elements are generated for the display/edit mode including the elements that make up the date-time pickers. Therefore, the date-time pickers have to be reinitialized every time edit mode is toggled.

One way to achieve this is to separate the core of the edit view into a separate template as follows.

detail.js

Template.detail.helpers({
  editbuttonstate: function () {
    return (Session.get('editing')) ? 'glyphicon-ok' : 'glyphicon-pencil';
  },
  editing: function () {
    return (Session.equals('editing', true));
  },
  formattedStartDate: function () {
    return moment(this.startDate).format('DD/MM/YYYY HH:mm');
  },
  formattedEndDate: function () {
    return moment(this.endDate).format('DD/MM/YYYY HH:mm');
  }
});

Template.edit_detail.helpers({
  gameActive: function () {
    return this.type === "game" ? "active" : "";
  },
  tournamentActive: function () {
    return this.type === "tournament" ? "active" : "";
  },
  trainingActive: function () {
    return this.type === "training" ? "active" : "";
  },
  campActive: function () {
    return this.type === "camp" ? "active" : "";
  },
  formattedStartDate: function () {
    return moment(this.startDate).format('DD/MM/YYYY HH:mm');
  },
  formattedEndDate: function () {
    return moment(this.endDate).format('DD/MM/YYYY HH:mm');
  }
});

Template.detail.events({
  'click .toggle-edit': function (e) {
    e.preventDefault();
    var editflag = Session.equals('editing', true);
    if (editflag && Meteor.userId()) {
      var updatedEvent = {};
      updatedEvent.startDate = $('#input-start-date').data("DateTimePicker").date().toDate();
      updatedEvent.endDate = $('#input-end-date').data("DateTimePicker").date().toDate();
      updatedEvent.owner = Meteor.userId();
      Events.upsert({
        _id: this._id
      }, {
        $set: updatedEvent
      });
    }
    if (!editflag && !Meteor.userId()) {
      return;
    }
    Session.set('editing', (!editflag));
  }
});

Template.edit_detail.rendered = function() {
    initDateTimePickers();
};

var initDateTimePickers = function() {
    if (Session.equals('editing', true)) {
      var now = new Date();
      $('.datetimepicker').datetimepicker({
            locale: 'en_gb',
            format: 'DD/MM/YYYY HH:mm',
            defaultDate: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 12, 0, 0)
      });
      $('#input-end-date').data("DateTimePicker").minDate(now);
      $('#input-start-date').data("DateTimePicker").maxDate(now);
      $("#input-start-date").on("dp.change", function (e) {
        $('#input-end-date').data("DateTimePicker").minDate(e.date);
      });
      $("#input-end-date").on("dp.change", function (e) {
        $('#input-start-date').data("DateTimePicker").maxDate(e.date);
      });
    }
};

detail.html

<template name="detail">
  <div class="page page-detail">
    <div class="container">
      {{#if editing}}
      {{> edit_detail}}
      {{else}}
      <h4 class="title">Start: {{formattedStartDate}}</h4>
      <h4 class="title">End: {{formattedEndDate}}</h4>
      {{/if}}
    </div>
    <div class="container">
      <div class="btn btn-danger toggle-edit pull-right">
        <span class="glyphicon {{editbuttonstate}}"></span>
      </div>
    </div>
  </div>
</template>

<template name="edit_detail">
      <div class="input-group datetimepicker" id="input-start-date">
        <span class="input-group-addon" id="addon-quote">Start</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="{{formattedStartDate}}" />
      </div>
      <div class="input-group datetimepicker" id="input-end-date">
        <span class="input-group-addon" id="addon-quote">End</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="{{formattedEndDate}}" />
      </div>
</template>

Moving the initialization code for the date-time pickers to run when the new template is rendered solves the problem.