Jquery日期计算不适用于克隆

时间:2015-08-31 06:33:51

标签: javascript jquery html css date

目前正致力于使用日期和日期的jquery日期选择器计算经验。例如(如果用户选择日期01/05/2010(从) - (收件人)31/07 / 2013 - 结果将是3年3个月),结果将以标签格式显示。再次当用户单击添加更多按钮时,此处将再生成一行,用户也可以输入从日期和日期开始的行。 resule将是两行(如果用户选择日期01/05/2010(从) - (到)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

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

请帮助我

谢谢&问候 马哈德

2 个答案:

答案 0 :(得分:1)

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

<强> 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已经稍微更新了一下。请检查小提琴

答案 1 :(得分:0)

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

我有两个日期字段:Date From&amp;日期:

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 })%>