fasln01 fasln01 - 5 months ago 19
jQuery Question

IE edge does not prefill label with dates whereas Firefox and chrome do

I am using javascript (Backbone) to create a webapplication. Right now i am encountering a problem which i cannot solve. I have a table with dates and some other criteria to create a 'sprint' (see image)image of adding a sprint

here is the view of the 'postsprint'

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;
},
});


As you can see i am using the modernizr library to define if there is a native date picker, if not use jquery datepicker.

And here is the view of the sprintlist

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();
}
});
}
});


what i have accomplished is that the data from the latest sprint in the list is copied. so the lastest enddate is copied to the startdate of a new sprint furthermore the duration and capacity is also copied. because the duration is copied the new enddate is set automatically the dates are still editable which then shows a datepicker.

The HTML code which provide the above criteria:

<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>&nbsp;</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>


I am a junior programmer so pardon my code...

Now for my problem: in Internet Explorer Edge my code does not work as is supposed to work (as shown in the first image) the following image visualizes the problem

screenshot IE Edge

the new to be added sprint is not filled with the data from the latest sprint.

If i inspect the element the value is "". whereas if i inspect the same element in firefox the value is filled with the right value. Does anybody have an idea how to tackle this problem?

Answer

Internet explorer doesn't like parsing dates in the format you specified.

 Date.parse(sprints.models[x].attributes.enddate.replace(/-/g, " "));

You should try a plugin like jQuery.datepicker to 'transform' your enddate to something all browsers can work with.

Date.parse($.datepicker.parseDate('yy-mm-dd', sprints.models[x].attributes.enddate));
Comments