Установите минимальное время загрузчика часов в соответствии с выбранным значением другого часовщика в тот же день

Question

У меня есть четыре текстовых поля, два для даты и два для времени, чтобы установить напоминание, например: с 27/07/2017 9:00 до 28/07/2017 14:05.

Я использую jquery datetimepicker для выбора даты и начальной загрузки 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:00 из второго часовщика, а не время до этого.

Короче говоря, вы хотите установить минимальное значение этого часовщика на 10:00. Я читал о методах beforedone и afterdone, но понятия не имею, как установить в нем значение MIN.

Answer 1

Поскольку автор часовщика не раскрыл интерфейс mindate, я могу написать только сценарий ниже. Но min datetime не будет отражаться в пользовательском интерфейсе (все равно можно выбрать время после 10:00 из второго средства выбора часов, но значение не изменится). И вопрос, который мы можем выбрать 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);
    });