Question

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

注意：我使用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吗，它可以在更改时添加/更新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行的正确性中设置“键”，以从所有其他字段中获取间隔并将它们放入一个字段的disableTimeIntervals中。

编辑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作为disableTimeIntervals？

1 个答案: