TypeError: Cannot read property 'date' of undefined when using tsega:bootstrap3-datetimepicker in Meteor app
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.
Related videos on Youtube
Comments
-
Cengiz over 1 year
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?