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

Question

A very complex form, for adding multiple time-intervals. Each time-interval is set with two input-fields. If one time-interval is set, the other intervals should not overlap with this. How to set/update "disabledTimeIntervals()" properly with javascript?

notice: I use TYPO3Fluid as renderer - if you're asking whats about these f:-Tags...

This code-snippet renders 6 days and each day has 4 intervals. The intervals on each day should not overlap.

<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>

Can anyone write me this part of javascript, which adds/updates the disabledTimeIntervals-array on change?

EDIT:

I tried something like that

$("#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 */
                }
            }
        });

But I has no glue how to set the "key" in rows 6-8 correclty to grab the intervals from all other fields and put them into disabledTimeIntervals of one field.

EDIT 2:

I'm a lttle step closer... How do you think is this?

$('#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()]
                    ]);
                }
            }
        });

no error, but disableTimeIntervals does not work - maybe the use of variables inside jquery selector isn't possible here?

Answer 1

It's finally done. Maybe there is room for some optimisation, but for now I'm happy with

$('#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);
                    }
                }
            }
        });