Question

我有一张表格可以让我增加几个小时的旅行和工作时间。例如，我可以告诉我什么时候离开公司，什么时候到达客户，然后反过来。还有工作时间，我什么时候开始工作，我什么时候去吃午餐，下午一样。这里的问题是我没有在下拉列表之间进行任何验证。

例如，我可以说它在09:00处离开，我到达08:00。当我选择09:00时，下一个下拉列表应该从09:30开始加载。

我可以添加几天，因此我使用标记名称hour-day-1[]。

如何使用timepicker创建此类依赖项？

这是我的html表单：

    <tr>
       <td><label>Day 1:</label></td>
       <td><label>Go</label></td>
       <td class="@if ($errors->has('hour-day-1[1]')) has-error @endif">
          {!! Form::text('hour-day-1[1]', old('hour-day-1[1]'), ['class' => 'form-control travelGoStartHour', 'placeholder'=> '']) !!}
       </td>
       <td class="@if ($errors->has('hour-day-2[1]')) has-error @endif">
          {!! Form::text('hour-day-2[1]', old('hour-day-2[1]'), ['class' => 'form-control travelGoEndHour', 'placeholder'=> '']) !!}
       </td>
       <td>
          <label>Back</label>
       </td>
       <td class="@if ($errors->has('hour-day-3[1]')) has-error @endif">
          {!! Form::text('hour-day-3[1]', old('hour-day-3[1]'), ['class' => 'form-control travelBackStartHour', 'placeholder'=> '']) !!}
       </td>
       <td class="@if ($errors->has('hour-day-4[1]')) has-error @endif">
          {!! Form::text('hour-day-4[1]', old('hour-day-4[1]'), ['class' => 'form-control travelBackEndHour', 'placeholder'=> '']) !!}
       </td>
       <td>
         <i class="icon-plus-circled add-new-day-travel" title="Add New Day" data-id="1"></i>
       </td>
    </tr>

这是我初始化timepicker的方式：

    $('.travelGoStartHour').timepicker({
      'minTime': '8:00',
      'maxTime': '20:00',
      'showDuration': true,
      'timeFormat': 'HH:mm:ss'
    });
    $('.travelGoEndHour').timepicker({
      'minTime': '8:00',
      'maxTime': '20:00',
      'showDuration': true,
      'timeFormat': 'HH:mm:ss'
    });
    $('.travelBackStartHour').timepicker({
      'minTime': '8:00',
      'maxTime': '20:00',
      'showDuration': true,
      'timeFormat': 'HH:mm:ss'
    });
    $('.travelBackEndHour').timepicker({
      'minTime': '8:00',
      'maxTime': '20:00',
      'showDuration': true,
      'timeFormat': 'HH:mm:ss'
    });

谢谢

Answer 1

这样的事情应该有用......

$('.travelGoStartHour').on('changeTime', function() {
    var selectedValue = $(this).val();
    $('.travelGoEndHour').option('minTime', selectedValue);
});

$('.travelBackStartHour').on('changeTime', function() {
    var selectedValue = $(this).val();
    $('.travelBackEndHour').option('minTime', selectedValue);
});

Timepicker - 下拉列表之间的依赖关系

1 个答案: