Moment.js 格式差异

Question

在我的一个项目中，我必须计算两次之间的差异。例如，工作时间从 6:30 开始，到 10 点结束。相差3小时30分钟。我写了一个小的 JS 函数来处理这个任务，它工作得很好，给了我以下结果：3.5。 我尝试了 .format("HH:mm") 但结果未定义，不是函数。
是否有任何方法可以转换像“HH：mm”这样的输出？

这里是 dateDiff 函数：

function dateDiff() {
    var startTime = moment(document.getElementById("startTime").value, "HH:mm");
    var endTime = moment(document.getElementById("end").value, "HH:mm");

    var duration = moment.duration(endTime.diff(startTime));
    var hours = duration.asHours();
    console.log(hours);
    document.getElementById('dateDiffResult').value = moment(hours);
}

Answer 1

您可以分别获取小时和分钟并格式化字符串：

function dateDiff() {
    var startTime = moment(document.getElementById("startTime").value, "HH:mm");
    var endTime = moment(document.getElementById("end").value, "HH:mm");

    var duration = moment.duration(endTime.diff(startTime));
    var hours = duration.hours();
    var minutes = duration.minutes();
    document.getElementById('dateDiffResult').value = hours +":"+ minutes;
}

Answer 2

如果您的函数有效并以小时为单位提供时差，那么从小时数计算小时和分钟肯定很简单吗？使用您声明的 3.5 差异...

var diff=3.5;
var hour=Math.floor(diff);//gives  hour=3;
var hours=("0"+ hour).slice(-2);//pads the hours with a leading zero if required to give hours=03;

var minute = (diff-hour)*60;//gives 30
var minutes=("0"+ minute ).slice(-2);//pads the minutes with a leading zero if required to give minutes=30;
var totalDiff= hours + ":" +minutes; //gives 03:30 as in HH:MM

我在 sn-p 中添加了以下内容来证明这一点：

$(document).ready
	(function(){

		var diff=3.5;
var hour=Math.floor(diff);//gives  hour=3;
var hours=("0"+ hour).slice(-2);//gives  hours=03;

var minute = (diff-hour)*60;//gives 30
var minutes=("0"+ minute ).slice(-2);//gives  minutes=30;
var totalDiff= hours + ":" +minutes; //gives 03:30 as in HH:MM
alert("HH:MM: " + totalDiff);
	})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

使用时间字段 jQuery 插件，您可以生成时间字段。之后，您可以收听字段的更改并相应地更新小时差。

(function($) {
  $.initTimeFields = function(interval) {
    $('.time-field').each(function(_, field) {
      $(field).initTimeField(interval);
    });
  };
  $.fn.initTimeField = function(interval) {
    var hour = 0, minute = 0, diff;
    while (hour < 24 && minute < 60) {
      this.append($('<option>', {
        val : hour * 60 + minute,
        text : ('00' + hour).substr(-2) + ':' + ('00' + minute).substr(-2)
      }));
      minute += interval;
      diff = minute - 60;
      if (diff >= 0) {
        hour += 1;
        minute %= 60;
      }
    }
    var value = this.data('value') || 0;
    if (typeof value === 'string' && value.indexOf(':') > -1) {
      value = (function(values) {
        return parseInt(values[0], 10) * 60 + parseInt(values[1], 10);
      }(value.split(':')));
    }
    this.val(value);
  };
}(jQuery));

function updateTimeDiff() {
  $('#hour-diff').val(calcHourDiff(getTime('#start-time'), getTime('#end-time')) + ' hours');
}
function calcHourDiff(startTime, endTime) {
  var diff = moment.duration(endTime.diff(startTime));
  return ('00' + diff.hours()).substr(-2) + ':' + ('00' + diff.minutes()).substr(-2);
}
function getTime(selector) {
  return moment($(selector).find('option:selected').text(), "HH:mm");
}

$('.time-field').on('change', function() {
  updateTimeDiff()
});

// Main
$.initTimeFields(15);
$('.time-field').trigger('change');

label { display: inline-block; width: 3em; }

<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.js/2.13.0/moment.min.js"></script>

<label>Start: </label><select id="start-time" class="time-field" data-value="06:30"></select><br />
<label>End:   </label><select id="end-time"   class="time-field" data-value="10:00"></select><br />
<label>Diff:  </label><input  id="hour-diff"  type="text"  size="8" />