根据同一天另一个时钟选择器的选定值设置引导时钟选择器的最小时间

Question

我有四个文本框，两个用于日期，两个用于设置提醒，比如:从27/07/2017 9:00到28/07/2017 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，那么我只能从第二个时钟选择器选择超过10AM的时间，而不能选择之前的时间。

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

Answer 1

因为clockpicker的作者没有公开mindate接口，所以我只能自己写下面的脚本。但是min datetime不会反映在UI中(仍然可以从第二个时钟选择器中选择超过10AM的时间，但是值不会改变)。并且我们可以首先选择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>

Answer 2

试试这个：

  $("#datetimepicker1").on("dp.change", function (e) {
        $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
    });

    $("#datetimepicker2").on("dp.change", function (e) {
         $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
    });