Using jQuery datepicker adding the years, months and when i delete row the

[karthic2914]

Currently working on jQuery datepicker and jquery clone with my current code where i can able to add years for all the rows but when i am trying to add the months for example from date - 01/01/2000 to date 12/01/2000 it the message should come as 0 years and 11 months but currently it is coming as 0 years and 0 months it was not calculating the months

here is the code for months

function monthDiff(d1, d2) {
var months;
months = (d2.getFullYear() - d1.getFullYear()) * 12;
months -= d1.getMonth();
months += d2.getMonth();
return months <= 0 ? 0 : months;
}
and i am calling the months here

if ((firstDate !== "") && (lastDate !== "") && (!dateRegex.test(firstDate)) && (!dateRegex.test(lastDate))) {
 firstDate = new Date(firstDate[2], firstDate[0] - 1, firstDate[1]);
 lastDate = new Date(lastDate[2], lastDate[0] - 1, lastDate[1]);
 diffMonths1 = monthDiff(firstDate, lastDate);
 diffYears1 = diffMonths1 / 12;
 diffYears += parseInt('' + diffYears1);
 diffMonths += diffMonths1 - (diffYears1 * 12);
 document.getElementById("txt_expy").innerHTML = diffYears;
 document.getElementById("txt_expm").innerHTML = diffMonths;
}

And when i am trying to delete the row it should delete the row and corresponding year and month should remove.

Here is what i am trying for remove the row

$(document).on('click', ".btn_less1", function() {
var len = $('.cloned-row3').length;
if (len > 1) {
//$(this).closest(".btn_less1").parent().parent().parent().remove();
var RemoveStartDate = $(this).closest(".btn_less1").parent().parent().parent().find('.startDate ').val();
var RemoveEndDate = $(this).closest(".btn_less1").parent().parent().parent().find('.endDate  ').val();
if ((RemoveStartDate != '') || (RemoveEndDate != '')) {
var dateStartArray = RemoveStartDate.split('/'),
dateEndArray = RemoveEndDate.split('/');
var fromdate = new Date(dateStartArray[2], dateStartArray[0] - 1, dateStartArray[0]),
todate = new Date(dateEndArray[2], dateEndArray[0] - 1, dateEndArray[0]);
var yearsDifference = todate.getFullYear() - fromdate.getFullYear();
var monthsDifference = (todate.getMonth() + 12 * todate.getFullYear()) - (fromdate.getMonth() + 12 * fromdate.getFullYear());
var PrevTotalYear = parseInt(document.getElementById("txt_expy").innerHTML);
var PrevTotalMonth = parseInt(document.getElementById("txt_expm").innerHTML);
document.getElementById("txt_expm").value='';
document.getElementById("txt_expy").value='';
PrevTotalYear = PrevTotalYear * 12;
var CurTotalYear = Math.floor(((PrevTotalYear + PrevTotalMonth) - monthsDifference) / 12);
var CurTotalMonth = (monthsDifference - PrevTotalMonth) % 12;
$("#txt_expy>span").text(CurTotalYear);
$("#txt_expm>span").text(CurTotalMonth);
$(this).closest(".btn_less1").parent().parent().parent().remove();
} else {
$(this).closest(".btn_less1").parent().parent().parent().remove();
}
}
});

Edit fiddle - JSFiddle - Code Playground

Kindly help me where i am doing wrong here

[markbrown4]

Yikes, that is some dense code!

Can you provide a full working script with html so we can run it and see which part isn’t working? It’s a little hard to see which part you need help with.

[karthic2914]

Hi @markbrown4 can you please check the jsfiddle it has complete working code

[markbrown4]

Oops, sorry did not see it.

Honestly, I’d use Moment.js for this which lets you do it all so much simpler.

var startDate = moment('01/01/2000', 'MM/DD/YYYY');
var endDate = moment('12/01/2010', 'MM/DD/YYYY');
var years = endDate.diff(startDate, 'years');
var months = endDate.diff(startDate, 'months') % 12;
console.log(years);
console.log(months);

The bigger problem with your code is that you’re keeping the state(data) in the DOM.
When you’re dealing with proper javascript objects you can make much simpler functions that do one part like updating the years/months, or adding and removing.

var data = [{
  title: '',
  employer: '',
  startDate: '',
  endDate: ''
}];

function getTotalMonths() {
  var totalMonths = 0;
  data.forEach(function(row) {
    var startDate = moment(data.startDate, 'MM/DD/YYYY');
    var endDate = moment(data.endDate, 'MM/DD/YYYY');

    return startDate.diff(endDate, 'months');
  });
}

function addRow() {
  data.push({
    title: '',
    employer: '',
    startDate: '',
    endDate: ''
  })
}

function removeRow(index) {
  data.splice(index, 1);
  render();
}

function render() {
  var totalMonths = getTotalMonths();
  var years = Math.floor(totalMonths / 12);
  var months = totalMonths % 12;

  $('#txt_expy').text(years);
  $('#txt_expm').text(months);
}

Hope it helps

[karthic2914]

@markbrown4 thanks for the reply but i have customize lot is that possible can you please update jsfiddle

[markbrown4]

Deleting code is one of my favourite things, you should learn to love it too.

Including moment.js will help.

[karthic2914]

in all my pages i am using jquery calendar do i want to change in all the pages

[markbrown4]

All of your pages should share a javascript file, so you can add things to the one file which affect all pages on your site.