我正在使用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>&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>


我是一名初级程序员,请原谅我的代码...

现在解决我的问题:在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));

08-26 00:13
查看更多