如何将DateTimePicker-time-interval作为disabledTimeIntervals添加到DateTimePicker-inputs？
如何将DateTimePicker-time-interval作为disabledTimeIntervals添加到DateTimePicker-inputs？
提问于 2019-07-17 20:34:31
一个非常复杂的表单，用于添加多个时间间隔。每个时间间隔设置有两个输入字段。如果设置了一个时间间隔，则其他间隔不应与此时间间隔重叠。如何使用javascript正确设置/更新"disabledTimeIntervals()“？
注意:我使用TYPO3Fluid作为渲染器--如果你想知道这些f：-标签是怎么回事…
此代码片段呈现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选择器中使用变量在这里是不可能的？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-19 00:33:58
终于完成了。也许还有一些优化的空间，但现在我很满意
$('#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);
}
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57075971
复制相关文章
相似问题
腾讯云开发者
