如何将 DateTimePicker-time-interval 添加到 DateTimePicker-inputs 作为 disabledTimeIntervals？

Question

一个非常复杂的表格，用于添加多个时间间隔。每个时间间隔设置有两个输入字段。如果设置了一个时间间隔，则其他间隔不应与此重叠。如何 set/update "disabledTimeIntervals()" 正确地使用 javascript?

注意：我使用 TYPO3Fluid 作为渲染器——如果你问这些 f:-Tags 是什么...

此代码片段呈现 6 天，每天有 4 个间隔。每天的间隔不能重叠。

<f:for each="{week}" as="weekday">
  <f:for each="{0:1,1:2,2:3,3:4}" as="key">
    <div class='input-group date' id='day{weekday}{key}from'>
     <input type="text" class="form-control datepicker" name="day[{weekday}][{key}][from]"/>
    </div>
    <div class='input-group date' id='day{weekday}{key}until'>
     <input type="text" class="form-control datepicker" name="day[{weekday}][{key}][until]"/>
    </div>
    <script type="text/javascript">
        $('#day{weekday}{key}from').datetimepicker({
            format: 'LT',
            ignoreReadonly: true,
            allowInputToggle: true,
            locale: 'de'
        });
        $('#day{weekday}{key}until').datetimepicker({
            useCurrent: false, //Important! See issue #1075
            format: 'LT',
            ignoreReadonly: true,
            allowInputToggle: true,
            locale: 'de'
        });
        $("#day{weekday}{key}from").on("dp.change", function (e) {
            $('#day{weekday}{key}until').data("DateTimePicker").minDate(e.date);
                    /* TODO set disabledTimeIntervals from all other fields of this weekday */
        });
        $("#day{weekday}{key}until").on("dp.change", function (e) {
            $('#day{weekday}{key}from').data("DateTimePicker").maxDate(e.date);
                    /* TODO set disabledTimeIntervals from all other fields of this weekday */
        });
    </script>
  </f:for>
</f:for>

谁能给我写下 javascript 的这一部分，adds/updates disabledTimeIntervals 数组发生变化？

编辑：

我试过类似的东西

$("#time{weekday}{key}from").on("dp.change", function (e) {
            $('#time{weekday}{key}until').data("DateTimePicker").minDate(e.date);
            for(i=1;i<5;i++){
                if(i!={key}){
                    $('#time{weekday}'+i+'until').data("DateTimePicker").disabledTimeIntervals([
                        [$('#time{weekday}{key}from').data("DateTimePicker").date(),$('#time{weekday}{key}until').data("DateTimePicker").date()],
                        [$('#time{weekday}{key}from').data("DateTimePicker").date(),$('#time{weekday}{key}until').data("DateTimePicker").date()],
                        [$('#time{weekday}{key}from').data("DateTimePicker").date(),$('#time{weekday}{key}until').data("DateTimePicker").date()]
                    ]);
                    /* TODO set disabledTimeIntervals from all other fields of this weekday */
                }
            }
        });

但我不知道如何正确设置第 6-8 行中的 "key" 以从所有其他字段中获取间隔并将它们放入一个字段的 disabledTimeIntervals 中。

编辑 2：

我又近了一步... 你觉得这个怎么样？

$('#time{weekday}{key}from').datetimepicker({
            format: 'LT',
            ignoreReadonly: true,
            allowInputToggle: true,
            locale: 'de'
        });
        $('#time{weekday}{key}until').datetimepicker({
            useCurrent: false, //Important! See issue #1075
            format: 'LT',
            ignoreReadonly: true,
            allowInputToggle: true,
            locale: 'de'
        });
        $('#time{weekday}{key}from').on("dp.change", function (e) {
            $('#time{weekday}{key}until').data("DateTimePicker").minDate(e.date);
        });
        $('#time{weekday}{key}until').on("dp.update", function () {
            for(i=1;i<5;i++) <f:format.raw>{</f:format.raw>
                if(i!={key}) <f:format.raw>{</f:format.raw>
                    var otherkey = [1,2,3,4];
                    var otherkey = otherkey.splice(i-1,1);
                    $('#time{weekday}'+i+'until').data("DateTimePicker").disabledTimeIntervals([
                        [$('#time{weekday}'+otherkey[0]+'from').data("DateTimePicker").date(),$('#time{weekday}'+otherkey[0]+'until').data("DateTimePicker").date()],
                        [$('#time{weekday}'+otherkey[1]+'from').data("DateTimePicker").date(),$('#time{weekday}'+otherkey[1]+'until').data("DateTimePicker").date()],
                        [$('#time{weekday}'+otherkey[2]+'from').data("DateTimePicker").date(),$('#time{weekday}'+otherkey[2]+'until').data("DateTimePicker").date()]
                    ]);
                }
            }
        });
        $('#time{weekday}{key}until').on("dp.change", function (e) {
            $('#time{weekday}{key}from').data("DateTimePicker").maxDate(e.date);
        });
        $('#time{weekday}{key}until').on("dp.update", function () {
            for(i=1;i<5;i++) <f:format.raw>{</f:format.raw>
                if(i!={key}) <f:format.raw>{</f:format.raw>
                    var otherkey = [1,2,3,4];
                    var otherkey = otherkey.splice(i-1,1);
                    $('#time{weekday}'+i+'until').data("DateTimePicker").disabledTimeIntervals([
                        [$('#time{weekday}'+otherkey[0]+'from').data("DateTimePicker").date(),$('#time{weekday}'+otherkey[0]+'until').data("DateTimePicker").date()],
                        [$('#time{weekday}'+otherkey[1]+'from').data("DateTimePicker").date(),$('#time{weekday}'+otherkey[1]+'until').data("DateTimePicker").date()],
                        [$('#time{weekday}'+otherkey[2]+'from').data("DateTimePicker").date(),$('#time{weekday}'+otherkey[2]+'until').data("DateTimePicker").date()]
                    ]);
                }
            }
        });

没有错误，但是 disableTimeIntervals 不起作用 - 也许在这里不能使用 jquery 选择器中的变量？

Answer 1

终于搞定了。也许还有一些优化的空间，但现在我很满意

$('#time{weekday}{key}from').datetimepicker({
            format: 'LT',
            ignoreReadonly: true,
            allowInputToggle: true,
            locale: 'de'
        });
        $('#time{weekday}{key}until').datetimepicker({
            useCurrent: false, //Important! See issue #1075
            format: 'LT',
            ignoreReadonly: true,
            allowInputToggle: true,
            locale: 'de'
        });
        $('#time{weekday}{key}from').on("dp.change", function (e) {
            $('#time{weekday}{key}until').data("DateTimePicker").minDate(e.date);
            if($('#time{weekday}{key}until').data("DateTimePicker"))<f:format.raw>{</f:format.raw>
                for(i=1;i<5;i++) <f:format.raw>{</f:format.raw>
                    var otherkey = [1,2,3,4];
                    otherkey.splice(i-1,1);
                    var arr = [];
                    for(j=0;j<4;j++)<f:format.raw>{</f:format.raw>
                        if($('#time{weekday}'+otherkey[j]+'from').data("DateTimePicker") && $('#time{weekday}'+otherkey[j]+'until').data("DateTimePicker"))<f:format.raw>{</f:format.raw>
                            arr.push([$('#time{weekday}'+otherkey[j]+'from').data("DateTimePicker").date(), $('#time{weekday}'+otherkey[j]+'until').data("DateTimePicker").date()]);
                        }
                    }
                    if(i!={key}) <f:format.raw>{</f:format.raw>
                        $('#time{weekday}'+i+'from').data("DateTimePicker").disabledTimeIntervals(arr);
                        $('#time{weekday}'+i+'until').data("DateTimePicker").disabledTimeIntervals(arr);
                    }
                }
            }
        });
        $('#time{weekday}{key}until').on("dp.change", function (e) {
            $('#time{weekday}{key}from').data("DateTimePicker").maxDate(e.date);
            if($('#time{weekday}{key}from').data("DateTimePicker"))<f:format.raw>{</f:format.raw>
                for(i=1;i<5;i++) <f:format.raw>{</f:format.raw>
                    var otherkey = [1,2,3,4];
                    otherkey.splice(i-1,1);
                    var arr = [];
                    for(j=0;j<4;j++)<f:format.raw>{</f:format.raw>
                        if($('#time{weekday}'+otherkey[j]+'from').data("DateTimePicker") && $('#time{weekday}'+otherkey[j]+'until').data("DateTimePicker"))<f:format.raw>{</f:format.raw>
                            arr.push([$('#time{weekday}'+otherkey[j]+'from').data("DateTimePicker").date(), $('#time{weekday}'+otherkey[j]+'until').data("DateTimePicker").date()]);
                        }
                    }
                    if(i!={key}) <f:format.raw>{</f:format.raw>
                        $('#time{weekday}'+i+'from').data("DateTimePicker").disabledTimeIntervals(arr);
                        $('#time{weekday}'+i+'until').data("DateTimePicker").disabledTimeIntervals(arr);
                    }
                }
            }
        });

如何将 DateTimePicker-time-interval 添加到 DateTimePicker-inputs 作为 disabledTimeIntervals？

How to add DateTimePicker-time-interval to DateTimePicker-inputs as disabledTimeIntervals?

jquery

bootstrap-datetimepicker