我正在使用javascript(主干网)创建Web应用程序。现在,我遇到了一个我无法解决的问题。我有一个包含日期和其他条件的表格,用于创建“冲刺”(参见图片)image of adding a sprint
这是“后记”的观点
var PostSprint = Backbone.View.extend({
el: '.sprintform',
render: function(options) {
var that = this;
var teamId = options.id;
var latestSprint = new LatestSprint({id:teamId});
var AccessToken = Cookies.get('AccessToken');
latestSprint.url = 'rest/latestSprint'+'/'+ teamId + '/' + AccessToken;
latestSprint.fetch({
success: function (latestSprint) {
if(latestSprint.attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(latestSprint.attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
if(latestSprint.attributes.result=='Ok'){
var template = _.template($('#create-sprint-template').html(),{latestSprint: latestSprint});
that.$el.html(template);
$(function() {
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker({
dateFormat: "yy-mm-dd"
});
}
});
}
},
error: function (er){
alert("Error loading (fetch) the sprint view. line 7 in PostSprint.js");
Backbone.history.loadUrl();
}
});
},
events:{
'submit .submitsprint': 'postSprint',
'change #weeks' : 'changeEndDate',
'change #enddate' : 'changeWeeks'
},
changeWeeks: function (ev) {
var startdate = moment($("#startdate").val());
var enddate = moment($("#enddate").val());
var duration = moment.duration(enddate.diff(startdate));
var dayInt = duration.asDays();
var weekInt = Math.ceil(dayInt / 7);
$("#weeks").val(weekInt);
},
changeEndDate: function (ev) {
var date = moment($("#startdate").val(), "YYYY-MM-DD");
date = moment(date).add('days', ($("#weeks").val() * 7)) ;
$("#enddate").val(moment(date).format('YYYY-MM-DD'));
},
postSprint: function (ev) {
var addSprintButton = $(ev.currentTarget);
addSprintButton.find("button").prop("disabled", true);
var sprintDetails = addSprintButton.serializeObject();
var tid = sprintDetails.teamid;
var sprint = new Sprint();
if (Date.parse(sprintDetails.startdate) < Date.parse(sprintDetails.enddate)){
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint'+'/'+ AccessToken;
sprint.save(sprintDetails, {
success: function (sprint) {
if(sprint.attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(sprint.attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
if(sprint.attributes.result=='Ok'){
//window.location.reload(true);
Backbone.history.loadUrl();
}
},
error: function (er){
alert("Error saving (save) the sprint view. line 53 in PostSprint.js");
}
});
}else{
alert("The start date must be earlier than the end date");
Backbone.history.loadUrl();
}
return false;
},
});
如您所见,我正在使用modernizr库来定义是否存在本机日期选择器,如果不使用jquery datepicker。
这是冲刺列表的视图
var GetSprintList = Backbone.View.extend({
el: '.sprintlist',
render: function(options) {
var that = this;
var sprints = new Sprints();
var AccessToken = Cookies.get('AccessToken');
sprints.url = 'rest/sprints/'+ AccessToken;
sprints.fetch({
success: function () {
var latestSprint;
var latestSprintTime = 0;
for(x in sprints.models) {
var endDate = Date.parse(sprints.models[x].attributes.enddate.replace(/-/g, " "));
if(endDate > latestSprintTime)
latestSprint = sprints.models[x];
latestSprintTime = endDate;
}
if(latestSprint) {
var dt = new Date(latestSprint.get('enddate'));
var dayOfMonth = dt.getDate();
dt.setDate(dayOfMonth + latestSprint.get('weeks')*7);
var month =dt.getMonth()+1;
if(month<10){month = "0"+month}
var day = dt.getDate();
if(day<10){day = "0"+day}
var year = dt.getFullYear();
var newEndDate = year + '-' + month + '-' + day;
}
var template = _.template($('#sprint-list-template').html(), {sprints: sprints.models, latestSprint: latestSprint, newEndDate: newEndDate});
$("[type='date']").click(function() { $("[type='date']").datepicker('show'); });
that.$el.html(template);
$(function() {
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker({
dateFormat: "yy-mm-dd"
});
}
});
},
error: function (er){
alert("Error loading (fetch) the Sprintlist view. line 8 in GetSprintList.js");
}
});
},
events:{
'click .normaltd': 'sprintDetails',
'click .nametd': 'changeSprintName',
'click .capacitytd': 'changeSprintCapacity',
'click .deleteFirstsprintinlist' : 'deleteFirstSprintInList',
'click .deleteLastsprintinlist' : 'deleteLastSprintInList',
'click .editsprintinlist' : 'sprintDetails',
'submit .submitsprint': 'postSprint',
'change #weeks' : 'changeEndDate',
'change #enddate' : 'changeWeeks'
},
changeWeeks: function (ev) {
var startdate = moment($("#startdate").val());
var enddate = moment($("#enddate").val());
var duration = moment.duration(enddate.diff(startdate));
var dayInt = duration.asDays();
var weekInt = Math.ceil(dayInt / 7);
$("#weeks").val(weekInt);
},
changeEndDate: function (ev) {
var date = moment($("#startdate").val(), "YYYY-MM-DD");
date = moment(date).add('days', ($("#weeks").val() * 7)) ;
$("#enddate").val(moment(date).format('YYYY-MM-DD'));
},
postSprint: function (ev) {
var addSprintButton = $(ev.currentTarget);
addSprintButton.find("button").prop("disabled", true);
var sprintDetails = addSprintButton.serializeObject();
var tid = sprintDetails.teamid;
var sprint = new Sprint();
if (Date.parse(sprintDetails.startdate) < Date.parse(sprintDetails.enddate)){
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint'+'/'+ AccessToken;
sprint.save(sprintDetails, {
success: function (sprint) {
if(sprint.attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(sprint.attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
if(sprint.attributes.result=='Ok'){
//window.location.reload(true);
Backbone.history.loadUrl();
}
},
error: function (er){
alert("Error saving (save) the sprint view. line 53 in PostSprint.js");
}
});
}else{
alert("The start date must be earlier than the end date");
Backbone.history.loadUrl();
}
return false;
},
changeSprintName: function (ev) {
var newName = prompt("Geef een nieuwe naam op voor deze sprint");
if (newName === null) {
return; //break out of the function early
}
if(newName)
{
ev.currentTarget.innerHTML = newName;
var id = ( $(ev.currentTarget).attr("id"));
//select the capacity element by id and classname
var capacity = parseInt($(("#" + id + " .capacitytd")).html());
var sprintDetails ={id:id, name:newName, capacity:capacity};
var sprint = new Sprint();
var sprints = new Sprints();
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint/'+id+'/'+ AccessToken;
sprint.save(sprintDetails, {
success: function (sprint)
{
if(sprint.attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(sprint.attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
},
error: function (er)
{
alert("Error updating (save) the sprint object. line 42 in GetSprintList.js");
}
});
}
},
changeSprintCapacity: function (ev) {
var newCapacity = prompt("Geef een nieuwe capaciteit op voor deze sprint");
if(newCapacity)
{
while(isNaN(newCapacity))
{
newCapacity = prompt("De waarde voor capaciteit moet een nummer zijn");
}
if(newCapacity)
{
ev.currentTarget.innerHTML = newCapacity;
var id = ( $(ev.currentTarget).attr("id"));
newName = ($(("#" + id + " .nametd")).html());
var sprintDetails ={id:id, name:newName, capacity:newCapacity};
var sprint = new Sprint();
var sprints = new Sprints();
sprint.url='rest/sprint/'+id+'/'+Cookies.get('AccessToken');
sprint.save(sprintDetails,
{
success: function (sprint)
{
if(sprints.at(0).attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(sprints.at(0).attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
},
error: function (er)
{
alert("Error updating (save) the sprint object. line 42 in GetSprintList.js");
}
});
}
}
},
sprintDetails: function (ev) {
var sprintid = $(ev.currentTarget.attributes.id.nodeValue);
//router.navigate('#/sprint/view/'+sprintid.selector , {trigger: true});
},
deleteFirstSprintInList: function (ev) {
var deleteSprintButton = $(ev.currentTarget);
deleteSprintButton.prop("disabled", true);
var sprintid = $(ev.currentTarget.attributes.id.nodeValue);
var sprint = new Sprint({id:sprintid.selector});
var id = ( $(ev.currentTarget).attr("id"));
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint/first/'+ id +'/'+AccessToken;
sprint.destroy({
success: function (){
//window.location.reload(true);
Backbone.history.loadUrl();
},
error: function (er){
alert("Error deleting (destroy) the sprint view. line 8 in GetSprintList.js");
}
});
},
deleteLastSprintInList: function (ev) {
var deleteSprintButton = $(ev.currentTarget);
deleteSprintButton.prop("disabled", true);
var sprintid = $(ev.currentTarget.attributes.id.nodeValue);
var sprint = new Sprint({id:sprintid.selector});
var id = ( $(ev.currentTarget).attr("id"));
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint/last/'+ id +'/'+AccessToken;
sprint.destroy({
success: function (sprint){
//window.location.reload(true);
Backbone.history.loadUrl();
},
error: function (er){
alert("Error deleting (destroy) the sprint view. line 8 in GetSprintList.js");
//window.location.reload(true);
Backbone.history.loadUrl();
}
});
}
});
我已经完成的工作是复制列表中最新冲刺的数据。因此,最后的结束日期将被复制到新冲刺的开始日期,此外还将复制持续时间和容量。因为复制了持续时间,所以自动设置了新的结束日期,因此日期仍然是可编辑的,然后显示日期选择器。
提供上述条件的HTML代码:
<script type="text/template" id="sprint-list-template">
<% var url = window.location.href;
var lastPart = url.substr(url.lastIndexOf('/') + 1);
%>
<h3>Sprint List : For Team ID <%= lastPart %></h3>
<hr />
<form class="form-inline submitsprint">
<table class="table table-responsive table-hover">
<thead>
<tr><!- The labels ->
<!--<th>ID</th>-->
<th>Start Date</th>
<th>Duration</th>
<th>End Date</th>
<th>Capacity</th>
<th>Name</th>
<th> </th>
<!--<th>Team_Id</th>-->
</tr>
</thead>
<tbody>
<% _.each(sprints, function(sprints) { %>
<tr class="sprints-table" type="click" id="<%= sprints.get('id') %>">
<!--<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('id') %></td>-->
<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('startdate') %></td>
<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('weeks') %></td>
<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('enddate') %></td>
<td class="capacitytd" id="<%= sprints.get('id') %>"><%= sprints.get('capacity') %></td>
<td class="nametd" id="<%= sprints.get('id') %>"><%= sprints.get('name')%></td>
<!--<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('teamid') %></td>-->
<td id="<%= sprints.get('id') %>">
<!--<button type="button" class="btn btn btn-success editsprintinlist" id="<%= sprints.get('id') %>" >edit</button>-->
<% if(sprints.get('latest')=='yes'){%><button type="button" teamid="<%= sprints.get('teamid') %>" id="<%= sprints.get('id') %>" class="btn btn-danger deleteLastsprintinlist">-</button><% }; %>
<% if(sprints.get('first')=='yes'){%><button type="button" teamid="<%= sprints.get('teamid') %>" id="<%= sprints.get('id') %>" class="btn btn-danger deleteFirstsprintinlist">-</button><% }; %></td>
</tr>
<%}); %>
<tr>
<td><input type="date" class="form-control" id="startdate" placeholder="StartDate" name="startdate" required="true" value="<%= latestSprint ? latestSprint.get('enddate') :'' %>"/></td>
<td><input type="number" class="form-control" placeholder="Weeks" id="weeks" name="weeks" required="true" value="<%= latestSprint ? latestSprint.get('weeks') :''%>" /></td>
<td><input type="date" class="form-control" id="enddate" placeholder="EndDate" name="enddate" required="true" value="<%= latestSprint ? newEndDate : '' %>"/></td>
<td><input type="text" required class="form-control" id="capacity" placeholder="Capacity" name="capacity" required="true" value="<%= latestSprint ? latestSprint.get('capacity') : '' %>"/></td>
<td><input type="text" class="form-control" id="Name" placeholder="Name" name="name" value=""/></td>
<td><input type="hidden" name="teamid" value="<%= lastPart %>" /><button type="submit" name="submitsprint" class="btn btn-success">+</button></td>
</tr>
</tbody>
</table>
</form>
<!--<a href="#team/view/<%= lastPart %>" class="btn btn-inverse">Back</a>-->
</script>
我是一名初级程序员,请原谅我的代码...
现在解决我的问题:在Internet Explorer Edge中,我的代码无法正常运行(如第一个图像所示),以下图像将问题可视化了
screenshot IE Edge
新添加的Sprint未填充最新Sprint的数据。
如果我检查元素,则值为“”。而如果我检查Firefox中的同一元素,则该值将填充正确的值。有人知道如何解决这个问题吗?
最佳答案
Internet Explorer不喜欢以您指定的格式解析日期。
Date.parse(sprints.models[x].attributes.enddate.replace(/-/g, " "));
您应该尝试使用类似jQuery.datepicker的插件将结束日期“转换”为所有浏览器都可以使用的东西。
Date.parse($.datepicker.parseDate('yy-mm-dd', sprints.models[x].attributes.enddate));