需求说明：如下图所示，点击循环周期选择不同类型循环周期，时间区间根据循环周期进行动态变化，若是选择周和月，时间区间可以通过点击加号动态增加多个
功能要点：用户需要能根据自己需要动态创建多个时间选择器
后端的需要的数据格式为
1
2
3
4
5
6
| malltRightsLoopInfoList: [{
loopType: '', //循环周期
loopCfg: '', //星期或月份
obtainBeginDatePart: '', //开始时间
obtainEndDatePart: '' //结束时间
}]
|
这里先初始化malltRightsLoopInfoList，再根据循环周期的点击来重新初始化，并根据的malltRightsLoopInfoList值将laydate时间选择器初始化，若是选择的周或月，用户点击添加时间区间时重新给malltRightsLoopInfoListpush一个对象，并重新初始化laydate
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
| <div class="col-6">
<div class="c-form-item mgb-xl">
<p class="c-form-names">
<span class="c-form-nonull">*</span>循环周期
</p>
<div class="c-form-info">
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '0' ? 'choice' : ''}} mgr-l" on-click="selectCircle('0')">
<i></i>
<span>不循环</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '1' ? 'choice' : ''}} mgr-l" on-click="selectCircle('1')">
<i></i>
<span>日</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '2' ? 'choice' : ''}} mgr-l" on-click="selectCircle('2')">
<i></i>
<span>周</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '3' ? 'choice' : ''}} mgr-l" on-click="selectCircle('3')">
<i></i>
<span>月</span>
</label>
</div>
</div>
</div>
<div
class="col-6"
s-show="malltRightsLoopInfoList[0].loopType == '0'"
style="height: 60px"
></div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '1'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<span class="data-spn" style="width: 25%;font-size: 12px;padding: 0 10px;text-align: center;">每天</span>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'date' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'dateend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
</div>
</div>
</div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '2'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<select
value="{= mrl.loopCfg =}"
name=""
class="pdr-0 c-select"
style="width: 25%"
>
<option value="">请选择</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
<option value="7">星期日</option>
</select>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'week' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'weekend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
<i class="c-iconfont color-blue font-xxl vm" on-click="addTime"></i>
</div>
</div>
</div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '3'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<select
value="{= mrl.loopCfg =}"
name=""
class="pdr-0 c-select"
style="width: 25%"
>
<option value=''>请选择</option>
<option s-for="mt,index in month" value="{{index + 1}}">
{{mt}}
</option>
</select>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'mont' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'montend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
<i class="c-iconfont color-blue font-xxl vm" on-click="addTime"></i>
</div>
</div>
</div>
|
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
initData: function () {
return {
malltRightsLoopInfoList: [{
loopType: "0",
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
}],
}
}
selectCircle: function(loopType) {
let self = this;
this.data.set('malltRightsLoopInfoList',[{
loopType: '',
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
}]);
this.data.set('malltRightsLoopInfoList[0].loopType',loopType);
setTimeout(function(){
self.laydateInit();
},100);
},
addTime: function() {
let self = this;
this.data.push('malltRightsLoopInfoList', {
loopType: this.data.get('malltRightsLoopInfoList')[0].loopType,
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
});
setTimeout(function(){
self.laydateInit();
},100);
},
laydateInit: function () {
let self = this;
$(".layer_time").each(function (index) {
let id = $(this).prop("id");
laydate.render({
elem: "#" + id,
position: 'fixed',
type: 'time',
trigger: 'click',
done: (value) => {
index = Number(id.substring(4));
var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
malltRightsLoopInfoList[index].obtainBeginDatePart = value.toString();
self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);
},
});
});
$(".layer_endtime").each(function (index) {
let id = $(this).prop("id");
laydate.render({
elem: "#" + id,
position: 'fixed',
type: 'time',
trigger: 'click',
done: (value) => {
index = Number(id.substring(7));
var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
malltRightsLoopInfoList[index].obtainEndDatePart = value.toString();
self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);
},
});
});
},
|
wechat
