两个时间域，在设置第一个时间字段时更改第二个时间字段。

Question

我在一个表格中有两个时间域。我正在使用时钟拾取器来设置时间域。两个时间字段中的第一个是开始时间，第二个是结束时间。在改变开始时间之前，我需要得到两个时间字段之间的差异，当开始时间发生变化时，我需要根据我计算的差值自动地在-/减少结束时间字段。

jQuery ClockPicker有两个适合于此的事件：

beforeHide -在隐藏ClockPicker之前(在时间改变之后)触发

afterShow -在显示ClockPicker之后(在时间发生变化之前)触发

我需要能够使用本地化至少de(24小时格式)和en-us (12小时格式与AM/PM)。

这是我的代码(还没有本地化支持)

var start = new Date();
var end = new Date();
$('.clockpicker-start').clockpicker({
beforeHide: function () {
    $('#activitystartfield #StartTime').val($('.clockpicker-span-hours:visible').html() + ':' + $('.clockpicker-span-minutes:visible').html() + ' ' + $('.clockpicker-span-am-pm:visible').html());
    $('#activityendfield #EndTime').val(end - start);
},
afterShow: function () {
    var hour = $('#activitystartfield #StartTime').val().split(':')[0];
    var minute = $('#activitystartfield #StartTime').val().split(':')[1];
    start.setHours(hour);
    start.setMinutes(minute);
    hour = $('#activityendfield #EndTime').val().split(':')[0];
    minute = $('#activityendfield #EndTime').val().split(':')[1];
    end.setHours(hour);
    end.setMinutes(minute);
}
});

这给了我以秒为单位的差别，但我不知道从哪里出发，也不知道如何处理本地化。

Answer 1

我很抱歉我的回复延迟了，我早些时候就出去了。

我在你的小提琴里弄了些东西。首先，我禁用了end输入，直到用户输入了启动时间。我删除了readonly属性(您需要删除它，以便能够读取我发现的更新值)。我在启动和结束时钟选择器中都添加了一个afterShow和afterDone，我没有绕过AM/FM位，但是我添加了一个span，它通过时差(小时和分钟)的显示来更新给用户。

我在途中发现，如果mins超过30，那么这个小时就进入下一个小时，所以代码中有一个if语句来检查这个

这里是当前代码 --我试着创建一个片段，然后冻结在我身上，所以这是第二步。过一会儿再试一次。

希望这能有所帮助

​

$(document).ready(function() {
  var start = new Date();
  var end = new Date();
  var difference;

  $('#start').clockpicker({
    donetext: "Done",

    afterShow: function() {
      start = $('#start').clockpicker('getTime');
      console.log('Start after show: ' + start);
    },
    afterDone: function() {
      start = $('#start').clockpicker('getTime');
      console.log('Start after done: ' + start);
      $('#end').prop('disabled', false);
    }
  });

  $('#end').clockpicker({
    donetext: "Done",

    afterShow: function() {
      end = $('#end').clockpicker('getTime');
      console.log('End after show: ' + end);
    },
    afterDone: function() {
      end = $('#end').clockpicker('getTime');
      console.log('End after done: ' + end);
      difference = (end - start);
      getdiff(difference);
      console.log('Difference: ' + difference);
      console.log('Difference: ' + difference / 1000);
      console.log(difference / 1000 / 60);
      console.log(difference / 1000 / 60 / 60);
    }
  });

  function getdiff(s) {
    var secs = Math.round(s/ 1000);
    var modsecs = ((Math.round(s/1000))%60); //remaining secs if not even
    var mins = Math.round(s/1000/60);
    var modmins = ((Math.round(s/1000/60))%60); //mins remaining if not even
    var modhrs = ((Math.round(s/1000/60/60))%24); //mins remaining if not even
    
    var hrs = Math.round(s/1000/60/60);
    if (modmins >=30){
        modhrs = modhrs-1;
    }
    
    var enddiff = [
      modhrs
    ];
    var arr = jQuery.map(enddiff, function(modhrs) {
      return modhrs + ":" + modmins;
    });
    $('#diff').text("Difference is " +arr);
  }
});

.clockpicker-popover {
  width: 300px;
}

.clockpicker-button {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/weareoutman/clockpicker/gh-pages/src/clockpicker.css" rel="stylesheet"/>
<script src="https://rawgit.com/JordyMoos/clockpicker/6f0ac5f0eb07b5302ebbc4ed7fd5b312c8fae224/src/clockpicker.js"></script>

<input id="start" val=" " data-default="09:00" />
<input disabled id="end" val=" " data-default="19:00" />
<br><br>
<span id="diff" val=" "> </span>

​