title: TypeError: Cannot read property 'date' of undefined when using tsega:bootstrap3-datetimepicker in Meteor app
body: <p>I have set up a meteor app that uses tsega:bootstrap3-datetimepicker for dates.</p>
  
  <p>I have the following in <strong>detail.js</strong>:</p>
  
  <pre><code>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 &amp;&amp; !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);
      });
  };
  </code></pre>
  
  <p>...and the following <strong>detail.html</strong>:</p>
  
  <pre><code>&lt;template name="detail"&gt;
    &lt;div class="page page-detail"&gt;
      &lt;div class="container"&gt;
        {{#if editing}}
        &lt;div class="input-group datetimepicker" id="input-start-date"&gt;
          &lt;span class="input-group-addon" id="addon-quote"&gt;Start&lt;/span&gt;
          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;input class="set-due-date form-control" type="text" value="{{formattedStartDate}}" /&gt;
        &lt;/div&gt;
        &lt;div class="input-group datetimepicker" id="input-end-date"&gt;
          &lt;span class="input-group-addon" id="addon-quote"&gt;End&lt;/span&gt;
          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;input class="set-due-date form-control" type="text" value="{{formattedEndDate}}" /&gt;
        &lt;/div&gt;
        {{else}}
        &lt;h4 class="title"&gt;Start: {{formattedStartDate}}&lt;/h4&gt;
        &lt;h4 class="title"&gt;End: {{formattedEndDate}}&lt;/h4&gt;
        {{/if}}
      &lt;/div&gt;
      &lt;div class="container"&gt;
        &lt;div class="btn btn-danger toggle-edit pull-right"&gt;
          &lt;span class="glyphicon {{editbuttonstate}}"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Upon save, they produce errors like:</p>
  
  <p><strong>TypeError: Cannot read property 'date' of undefined</strong></p>
  
  <p>Anyone have any idea what could be missing?</p>