javascript - 根据同一天另一个时钟选择器的选择值设置 Bootstrap 时钟选择器的最短时间

Question

我有四个文本框，两个用于日期，两个用于时间来设置提醒，例如: 2017年7月27日 9:00 至 2017年7月28日 14:05。

我使用 jquery datetimepicker 来选择日期，并使用 Bootstrap Clockpicker(时钟样式选择器)来选择时间。

我已经根据第一个选择的日期禁用了第二个日期时间选择器的过去日期。

我的代码是:

                //datetimepicker
                $('.datetimepicker1').datetimepicker({
                    format: 'DD/MM/YYYY',
                    minDate: moment(),
                });

                $('.datetimepicker2').datetimepicker({
                    format: 'DD/MM/YYYY',
                });

                //clockpicker
                $('.clockpicker1').clockpicker({
                    placement: 'bottom',
                    align: 'right',
                    autoclose: true,
                    'default': '04:00',
              //any method like afterdone to set $('.clockpicker2') MIN time
                });

                $('.clockpicker2').clockpicker({
                    placement: 'bottom',
                    align: 'right',
                    autoclose: true,
                    //set minimum time for it
                });

现在的问题是我想根据同一天的第一个选择时间设置第二个时间。

示例:如果为两个字段选择的日期都是 28/07/2017，并且从第一个时钟选择器选择的时间是 10:00，那么我只能从第二个时钟选择器选择上午 10 点以后的时间，而不是之前的时间。

简而言之，想要将此时钟选择器的最小值设置为 10:00。我读过有关 beforedone 和 afterdone 方法的内容，但不知道如何在其中设置 MIN 值。

Answer 1

由于clockpicker的作者没有公开mindate接口(interface)，所以我只能自己编写下面的脚本。但最小日期时间不会反射(reflect)在 UI 中(仍然可以从第二个时钟选择器中选择上午 10 点以后的时间，但该值不会改变)。而我们可以先选择datetimepicker2的问题还没有考虑。

<script>
  var flag = false;
  $(function () {

    $('#clockpicker1').clockpicker({
      placement: 'bottom',
      align: 'right',
      autoclose: true,
      'default': 'now',
      afterDone: function () {
        $('#clockpicker2').get(0).value = $('#clockpicker1').get(0).value;
        flag = true;
      }
    });


    $('#clockpicker2').clockpicker({
      placement: 'bottom',
      align: 'right',
      autoclose: true,
      afterDone: function () {
        if (flag) {
          if ($('#clockpicker2').get(0).value < $('#clockpicker1').get(0).value) {
            $('#clockpicker2').get(0).value = $('#clockpicker1').get(0).value;
          }
        }
      }
    });
  });
</script>