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

【问题标题】：How to add DateTimePicker-time-interval to DateTimePicker-inputs as disabledTimeIntervals?如何将 DateTimePicker-time-interval 添加到 DateTimePicker-inputs 作为 disabledTimeIntervals？
【发布时间】：2019-07-17 12:34:31
【问题描述】：

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

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

此代码-sn-p 渲染 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，它会在更改时添加/更新 disabledTimeIntervals-array 吗？

编辑：

我尝试过类似的方法

$("#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 行中的“键”以从所有其他字段中获取间隔并将它们放入一个字段的 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 选择器中使用变量？

【问题讨论】：

标签： jquery bootstrap-datetimepicker

【解决方案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);
                    }
                }
            }
        });

【讨论】：