javascript - 如何通过javascript比较两个日期并将其结果放入文本框中

Question

我的网页包含一个包含多列的表格，其中有两列取决于用户输入的日期。我在这里需要比较文本框的两个日期，结果将出现在另一个文本框中。例如

在此我需要比较当前日期和实际日期。如果日期距实际日期超过 7 天，则状态栏将显示红色，如果超过 4 天，则显示绿色，否则等于黄色。我不知道该使用哪个功能。

我的表代码:

<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

以 DelightedD0D 所说的为基础，moment.js 库使此计算变得非常容易。首先，将这些类添加到您的 css 文件中:

.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');
    }
});

您的格式化逻辑并不是 100% 清楚，您可以根据需要调整 if-else 结构。此外，从代码中并不清楚包含当前、实际时间或状态的表格单元格的 id 是什么，因此使用了占位符。