TypeError:无法读取属性'日期'在Meteor应用程序中使用tsega:bootstrap3日期
TypeError: Cannot read property 'date' of undefined when using tsega:bootstrap3-datetimepicker in Meteor app
我已经建立了一个流星应用程序,它使用tsega:bootstrap3日期时间选择器来获取日期。
我在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);
});
};
以及以下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>
首次渲染模板时,日期时间选择器工作正常,但单击"保存"按钮后再单击"编辑"按钮时,日期-时间选择器将不再工作。
保存后,它们会产生以下错误:
类型错误:无法读取未定义的的属性"date"
有人知道可能缺少什么吗?
看起来每次单击编辑/保存按钮时,都会为显示/编辑模式生成新的HTML元素,包括组成日期-时间选择器的元素。因此,每次切换编辑模式时,都必须重新初始化日期时间选择器。
实现这一点的一种方法是将编辑视图的核心分离为一个单独的模板,如下所示。
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>
当呈现新模板时,移动要运行的日期时间选择器的初始化代码可以解决问题。
相关文章:
- 比较从函数和生成的日期对象
- Json数据包含日期和时间格式
- Javascript日期格式类似于ISO,但本地
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 如何在JavaScript中延长当前日期
- 两位数的月份日期验证
- 更改angularjs中的日期-时间格式
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 将日期时间从json转换为可读格式
- NodeJS日期格式不起作用
- jquerydatetimepicker日期和时间应在框默认值中,而无需单击框
- 使用当前日期生成随机id
- primefaces日历可以禁用过去的日期和时间吗
- 提前阅读日期
- 在JavaScript中拆分日期字符串的更好方法是什么
- 查找最短和最长日期
- 流星.js如何在包“tsega:bootstrap3-datetimepicker”中选择禁止追溯日期
- TypeError:无法读取属性'日期'在Meteor应用程序中使用tsega:bootstrap3日期
- Bootstrap3 日期时间选择器 24 小时选项不起作用
- Bootstrap3 datetimepicker日期格式rails