如何使用 JavaScript 将 DateTime 的 C# 输出转换为“剩余天数”？答案

【问题标题】：How to convert C# output of DateTime to "Days Remaining" using JavaScript?如何使用 JavaScript 将 DateTime 的 C# 输出转换为“剩余天数”？
【发布时间】：2019-05-02 00:48:15
【问题描述】：

我正在 .net 表单上运行一个应用程序，该应用程序显示我们从数据库中提取的 DateTime 输出。它显示为到期日期。

public DateTime DATE_EXPIRES { get; set; }
public String DATE_EXPIRES_STR { get; set; }

        public void FromRow(Hashtable row)
        {
            try
            {
                DATE_EXPIRES = row.ContainsKey("DATE_EXPIRES") && row["DATE_EXPIRES"] != DBNull.Value ? Convert.ToDateTime(row["DATE_EXPIRES"]) : default(DateTime);
                DATE_EXPIRES_STR = DATE_EXPIRES.ToString("MMMM dd, yyyy");
            }
            catch (Exception ex)
            {
                SCORM.Error += ex.Message + "\r\n";
            }
        }

我的目标是，而不是显示到期日期，而是显示“剩余天数”并计算今天与显示日期之间的差异并向用户显示“还剩 55 天”，依此类推。

我的问题是我是否需要使用 C# 转换和显示，或者按原样显示日期，让 JavaScript 查看日期，计算剩余时间然后输出剩余天数，而不是显示实际的到期日期?

目前的样子

我想要的样子

【问题讨论】：

我可以知道当您以 JSON 格式传递数据时，日期时间字符串是什么样子的吗？

标签： javascript c# datetime

【解决方案1】：

您可以使用momentjs 计算剩余天数，并使用每个 tr 来转换这样的值。

您不更新 C# 代码，只在文档中添加 JavaScript 代码，准备转换过期列。

 $(document).ready(function () {
    $("tr").each(function (index, item) {
      if (index == 0) {
        $(item).find('th').eq(1).text('Days Remaining');
      } else {
        let date = $(item).find('td').eq(1).text();
        var eventdate = moment(date, "MMMM DD, YYYY");
        var todaysdate = moment();
        days = eventdate.diff(todaysdate, 'days');
        $(item).find('td').eq(1).text(days + ' Days Left')
      }
    })
  });

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>


<table>
  <tr>
    <th>Title</th>
    <th>Expires</th>
    
  </tr>
  <tr>
    
    <td>Course 1</td>
    <td>June 24, 2019</td>
  </tr>
  <tr>
    
    <td>Course 2</td>
    <td>June 24, 2019</td>
  </tr>
</table>

</body>
</html>

【讨论】：