Question

我在表单中有两个时间字段。我正在使用Clockpicker来设置时间字段。两个时间字段中的第一个是开始时间，第二个是结束时间。在开始时间改变之前，我需要得到两个时间字段之间的差异，当开始时间发生变化时，我需要根据我计算的差异自动输入/减少结束时间字段。

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

beforeHide - 在隐藏ClockPicker之前触发（时间改变后） afterShow - 在显示ClockPicker之后（在时间发生变化之前）触发

我需要能够使用本地化至少de-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

对于我的延迟回复，我很抱歉;我早点出去了。

我在你的小提琴中调整了几件事。首先，我禁止结束输入，直到用户输入了开始时间。我删除了readonly属性（你需要删除它才能读取我发现的更新值）。我在开始和结束时钟选择器中添加了afterShow和afterDone 我没有绕过AM / FM位，但是我添加了一个跨度，它通过向用户显示时差（小时和分钟）进行更新

我在路上发现，如果分钟超过30分钟，则小时进入下一个小时，所以代码中有一个if语句来检查这个

这是current code - 我试图创建一个片段，然后我就冻结了，所以这是第二次。会在一段时间后再试一次。

希望这有帮助

$(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>

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

1 个答案: