How to compare the two dates and result it into the textbox by javascript

Question

My web page includes a table with multiple columns, In that there are two columns depends on the dates which is the user input. My need here is compare the two dates of the textboxes and result will come in the another textbox. for example

In this I need to compare the current date and actual date. If the date exceed more than 7 days from the actual then status column will display the red color, if 4 days then green color else it is equal then yellow color. I don't know which function to use.

My code for the table:

<table id="POITable">
  <tr>
    <th width="100px" style="display:none">SL.no</th>
    <th width="100px">col1</th>
    <th width="85px">col2</th>
    <th width="85px">col3</th>
    <th width="85px">col4</th>
    <th width="95px">col5</th>
    <th width="100px">Delete/<input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()" /></th>
  </tr>
  <tr>
    <td style="display:none">1</td>
    <td>
      <input type="text" id="txtAutoComplete" list="languageList" style="border:none;font-size:10pt;width:100px;" />
      <!--your input textbox-->
      <datalist id="languageList">
    <option value="Dddd" />
    <option value="DTdsds" />
    <option value="adsda" />
    <option value="adsadsad" />
    <option value="dadsada" />
    <option value="rsfsfsdfs" />
    <option value="Csffsf" />
    </datalist>
    </td>
    <td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:80px;"></td>
    <td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
    <td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
    <td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
    <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>
  </tr>

  </tr>
</table>

Answer 1

To build on what DelightedD0D said, the moment.js library makes this calculation very easy. First, add these classes to your css file:

.greenBg {
    background: green;
}

.yellowBg {
    background: yellow;
}

.redBg {
    background: red;
}

Javascript:

$(function() {
    //get current time
    var currentTime = moment();

    //example parsing format moment("12-25-1995", "MM-DD-YYYY")
    var actualTime = moment(/*actual time in string, format*/);

    var diff = currentTime.diff(actualTime, 'days');

    if(diff > 7)
    {
         $("#/*statusboxid*/").addClass('redBg');
    }
    else if(diff > 4)
    {
        $("#/*statusboxid*/").addClass('greenBg');
    }
    else
    {
        $("#/*statusboxid*/").addClass('yellowBg');
    }
});

It is not 100% clear what your formatting logic is you can adjust the if-else structure as needed. Also, it's not clear from code what the id is for the table cells that contain the current, actual time, or status so placeholders have been used.

Answer 2

This code is works for me.

function compare1() {

  var firstDate = moment($("#date1").val(), "MM-DD-YYYY");
  var secondDate = moment($("#date2").val(), "MM-DD-YYYY");

  console.log(firstDate.inspect(), secondDate.inspect());

  if (firstDate.isValid() && secondDate.isValid()) {
    // you need a validation before using diff function of momentjs
    var diff = Math.abs(firstDate.diff(secondDate, 'days'));
    console.log(diff);
    // you also need to remove all classes before adding new class
    $("#status1").removeClass("redBg").removeClass("greenBg").removeClass("yellowBg");
    if (diff >= 14) {
      $("#status1").addClass('redBg');
    } else if (diff >= 8 && diff <= 13 ) {
      $("#status1").addClass('yellowBg');
    } else if (diff >= 1 && diff <=7){
      $("#status1").addClass('greenBg');
    }
  } else {
    $("#status1").addClass('greenBgBg');
  }
}