Jquery日期计算不适用于克隆答案

【问题标题】：Jquery Date calculation not working on cloneJquery日期计算不适用于克隆
【发布时间】：2015-08-31 06:33:50
【问题描述】：

目前正在使用 jquery 日期选择器从日期到日期计算经验。例如（如果用户选择日期 01/05/2010 (from) - (To) 31 / 07 / 2013 -- 结果将是 3 年零 3 个月）结果将以标签格式显示.再次，当用户单击添加更多按钮时，将在此处生成多行，用户也输入起始日期和截止日期。结果将是两行（如果用户选择日期 01/05/2010 (from) - (To) 31 / 07 / 2013 -- 结果将是 6 年零 6 个月）计算两行。

这是为当前计算编写的 Jquery 代码

   $(document).on('change', "#txt_Tdob", function (){
    var date1 = document.getElementById("txt_Fdob").value;
    var date2 = document.getElementById("txt_Tdob").value;
    var x = date1.split("-");
    var y = date2.split("-");
    var fromdate = new Date(x[2], x[0] - 1, x[1]);
    var todate = new Date(y[2], y[0] - 1, y[1]);
    var diffDays = parseInt((todate - fromdate) / (1000 * 60 * 60 * 24));
    var year = parseInt(diffDays / 365);
    var date = diffDays - (365 * year);
    var month = parseInt(date / 30);
    document.getElementById("txt_expy").innerHTML = year + " year";
    document.getElementById("txt_expm").innerHTML = month + " Month";
});

这是小提琴updated fiddle

注意：根据这个小提琴链接，当用户第一次点击日期选择器时，只有当用户从第二次点击添加更多按钮时才会起作用

请帮帮我

感谢和问候马哈迪文

【问题讨论】：

您将事件附加到id。请尝试将其附加到 class。
你能更新小提琴吗
您能否更新小提琴，以便jquery-ui datepicker 工作。它现在不工作......

标签： javascript jquery html css date

【解决方案1】：

好的，这是为您更新的代码，请注意对未来日期的验证尚未完成。我的意思是，如果您选择未来一年，它只会将其添加到总体验中，并且您需要将代码改进为更好的代码，因为它可能仍包含克隆的 ids。我刚刚在这里展示了如何实现该功能。

DEMO

$(document).on('change', ".datepicker", function (){
    //.datepicker is a common class for all datepickers and change in any datepicker will trigger this
    var valid=true;//check if all the datepickers have been selected
    $.each($('.datepicker'),function(){
        if($(this).val()=="")//if any of datepickers value is null do not add
        {
            valid=false;//set valid to false and return
            return false;
        }
     });
     if(valid)//only if it is valid perform adding operation
     {
        var dateStart=[];//create an array to store startDate
        var dateEnd=[];//and endDate
        $.each($('.datepicker'),function(){
            if($(this).hasClass('startDate')) //if the current control is startdate push it to corresponding array
                dateStart.push($(this).val())
            else
                dateEnd.push($(this).val())
        });
        $.each($(dateStart),function(key,value){
            var x = dateStart[key].split("-"); //get first startdate from array
            var y = dateEnd[key].split("-"); //get first enddate from array
            var fromdate = new Date(x[2], x[0] - 1, x[1]);
            var todate = new Date(y[2], y[0] - 1, y[1]);
            diffDays+= parseInt((todate - fromdate) / (1000 * 60 * 60 * 24));
            //diffDays is now a global variable which is declared in document.ready. 
            //You can find it in fiddle
        });
        var year = parseInt(diffDays / 365);
        var date = diffDays - (365 * year);
        var month = parseInt(date / 30);    
        document.getElementById("txt_expy").innerHTML = year + " year";
        document.getElementById("txt_expm").innerHTML = month + " Month";
        //rest all things down here remains same.
     }
});

HTML 已经更新了一点。请检查小提琴

【讨论】：

【解决方案2】：

是的，我已经这样做了，我一定会为您提供代码..

我有两个日期字段：日期从和日期到：

jQuery

$(document).ready(function(){
$('input[id*=DateFrom]').datepicker({ dateFormat: 'dd-M-yy' }, { changeMonth: true }, { changeYear: true });
$('input[id*=DateTo]').datepicker({ dateFormat: 'dd-M-yy' }, { changeMonth: true }, { changeYear: true });
});
//Re-create ID for neccessary controls //Here i am changing the id's of cloned elements
tbodyElement.find("#DateFrom" + LstCount).attr('id', 'DateFrom' + varCount);
tbodyElement.find("#DateTo" + LstCount).attr('id', 'DateTo' + varCount);
//input field
<%= Html.TextBox("DateFrom", item.DateFrom.ToString("dd-MMM-yyyy"), new { @id = "DateFrom" + cnt  })%>
//Date To
<%= Html.TextBox("DateTo", item.DateTo.ToString("dd-MMM-yyyy"), new { @id = "DateTo" + cnt })%>

【讨论】：