jquery - 使用 moment.js 当格式为小时分钟时添加两次

Question

我正在尝试使用 moment.js 添加两个格式为小时和分钟的日期。但结果是无效。

$(document).ready(function() {
  $(".table-class").each(function() {
    var total = 0;
    $(this).find(".timeClass").each(function() {

      var value = $(this).val();

      var start = moment(value, 'h:mma');
      console.log(start);
      total += start;

    });
    $(".total").text(moment(total, 'h:mma'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-class">

  <tr>
    <td>
      <input type="text" value="1 hour 30 mins" class="timeClass">
    </td>

  </tr>
  <tr>
    <td>
      <input type="text" value="3 hours 02 mins" class="timeClass">
    </td>

  </tr>
</table>
<p class="total">

</p>

请大家给点建议，谢谢!

Answer 1

首先，您必须以正确的方式解析您的输入(例如 1 小时 30 分钟)，因此您可以使用 'h [hour] mm [mins]' 而不是 'h:妈妈'。请参阅Escaping charaters文档的部分。无论如何，这是一个解决方法，因为“1 小时 30 分钟”和“3 小时 02 分钟”可能是持续时间，它们并不代表给定的时间点。

如Default部分状态，momentjs:

Defaulting to today, when only hours, minutes, seconds and milliseconds are passed

因此，使用 moment(value, 'h [hour] mm [mins]'); 您正在为当天创建一个时刻。您可以使用 diff() 获取自一天开始以来的毫秒数.

最后，您可以创建一个 duration使用 moment.duration(Number) 从 total 变量中获取对象。您可以使用 hours() 显示时刻持续时间的值和 minutes()或使用format()方法moment-duration-format插件。

这是一个实时示例:

$(document).ready(function() {
  $(".table-class").each(function() {
    var total = 0;
    $(this).find(".timeClass").each(function() {
      var value = $(this).val();

      var start = moment(value, 'h [hour] mm [mins]');
      var diff = start.diff(start.clone().startOf('d'));
      total += diff;

    });
    var dur = moment.duration(total);
    $(".total").text(dur.hours() + ':' + dur.minutes());
    // Using moment-duration-format:
    //$(".total").text(dur.format('h:mm'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

<table class="table-class">
  <tr>
    <td>
      <input type="text" value="1 hour 30 mins" class="timeClass">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="3 hours 02 mins" class="timeClass">
    </td>
  </tr>
</table>
<p class="total"></p>