zydx-plus 1.35.585 → 1.35.587
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,693 +1,715 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<div class="cale
|
|
4
|
-
<div class=
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<div class="calendar-col aligncanter coll">星期日</div>
|
|
14
|
-
<div class="calendar-col aligncanter colh">星期一</div>
|
|
15
|
-
<div class="calendar-col aligncanter colh">星期二</div>
|
|
16
|
-
<div class="calendar-col aligncanter colh">星期三</div>
|
|
17
|
-
<div class="calendar-col aligncanter colh">星期四</div>
|
|
18
|
-
<div class="calendar-col aligncanter colh">星期五</div>
|
|
19
|
-
<div class="calendar-col aligncanter coll ma">星期六</div>
|
|
2
|
+
<teleport to="body">
|
|
3
|
+
<div class="cale" :style="{top: y + 'px', left: x + 'px'}">
|
|
4
|
+
<div class="cale-cont">
|
|
5
|
+
<div class='calendar-Time-header under_line'>
|
|
6
|
+
<span class='calendar-lastY' @click="subYear">《</span>
|
|
7
|
+
<span class='calendar-lastMonth' @click="subMonth"
|
|
8
|
+
:class="{'calendar-btn-disabled' : lastDisabled }">{{ lastText }}</span>
|
|
9
|
+
<span class='calendar-TimeH'>{{ title_time }}</span>
|
|
10
|
+
<span class='calendar-nextMonth' @click="addMonth"
|
|
11
|
+
:class="{'calendar-btn-disabled' : nextDisabled }">{{ nextText }}</span>
|
|
12
|
+
<span class='calendar-nextY' @click="addYear">》</span>
|
|
20
13
|
</div>
|
|
21
|
-
<div class="calendar-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
14
|
+
<div class="calendar-content">
|
|
15
|
+
<div class="calendar-row calendar-header">
|
|
16
|
+
<div class="calendar-col aligncanter coll">星期日</div>
|
|
17
|
+
<div class="calendar-col aligncanter colh">星期一</div>
|
|
18
|
+
<div class="calendar-col aligncanter colh">星期二</div>
|
|
19
|
+
<div class="calendar-col aligncanter colh">星期三</div>
|
|
20
|
+
<div class="calendar-col aligncanter colh">星期四</div>
|
|
21
|
+
<div class="calendar-col aligncanter colh">星期五</div>
|
|
22
|
+
<div class="calendar-col aligncanter coll ma">星期六</div>
|
|
27
23
|
</div>
|
|
24
|
+
<div class="calendar-row calendar-day"
|
|
25
|
+
:style="{'transform':transformObj, 'transition-duration':transformTimeObj}">
|
|
26
|
+
<div class="calendar-col aligncanter cal-k calendar-col-lastMonth"
|
|
27
|
+
:style="{'line-height':(showLunar)?'auto':'37px'}" v-for='item in beforeDateList'
|
|
28
|
+
:key='item.key' @click="subMonth" :class="{'calendar-out-of-Date' : item.outOfDate }">
|
|
29
|
+
{{ item.dateIndex }}
|
|
30
|
+
<p class='calendar-span'>{{ item.markText }}</p>
|
|
31
|
+
</div>
|
|
28
32
|
|
|
29
|
-
|
|
33
|
+
<div class="calendar-col aligncanter cal-k currentDays" :style="{'line-height':(showLunar)?'auto':'37px'}"
|
|
34
|
+
:class="{'calendar-active' : item.dateIndex == currentSelectTime
|
|
30
35
|
, 'calendar-today' : item.isToday
|
|
31
36
|
, 'calendar-range' : item.isRanges
|
|
32
37
|
, 'calendar-out-of-Date' : item.outOfDate }" v-for='item in dateList' v-bind:key='item.key'
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
@click="selectedDateFun(item.dateIndex)">
|
|
39
|
+
<div class='dayValue'>
|
|
35
40
|
<span class='calendar-date calendar-day-6-7'
|
|
36
|
-
v-if="item.isDaySunOrSat">{{item.dateIndex}}</span>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
v-if="item.isDaySunOrSat">{{ item.dateIndex }}</span>
|
|
42
|
+
<span v-else class='calendar-date'>{{ item.dateIndex }}</span>
|
|
43
|
+
<span class='calendar-point'
|
|
44
|
+
:style="{'color':item.pointTextColor?item.pointTextColor:maskColor}">{{ item.pointText }}</span>
|
|
45
|
+
<p class='calendar-span'
|
|
46
|
+
:style="{'color':item.markTextColor?item.markTextColor:maskColor}">{{ item.markText }}</p>
|
|
47
|
+
</div>
|
|
42
48
|
</div>
|
|
43
|
-
</div>
|
|
44
49
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
50
|
+
<div class="calendar-col cal-k aligncanter calendar-col-nextMonth"
|
|
51
|
+
:style="{'line-height':(showLunar)?'auto':'37px'}" v-for='item in afterDateList'
|
|
52
|
+
:key='item.key' @click="addMonth" :class="{'calendar-out-of-Date' : item.outOfDate }">
|
|
53
|
+
{{ item.dateIndex }}
|
|
54
|
+
<p class='calendar-span'>{{ item.markText }}</p>
|
|
55
|
+
</div>
|
|
49
56
|
</div>
|
|
57
|
+
<div class="ClearBoth"></div>
|
|
50
58
|
</div>
|
|
51
|
-
<div class="
|
|
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
|
-
|
|
59
|
+
<div class="cle-but-cont">
|
|
60
|
+
<div class="cle-but-left">
|
|
61
|
+
<div v-if="showDate" class="cle-time">
|
|
62
|
+
<form>
|
|
63
|
+
<input type="text" autocomplete="new-pwd" v-model="cleDate" @focus="cleFocus" @blur="cleBlur"/>
|
|
64
|
+
</form>
|
|
65
|
+
<div class="cle-time-list" v-if="cleFocusShow">
|
|
66
|
+
<div class="cle-frame"></div>
|
|
67
|
+
<div class="cle-time-y">
|
|
68
|
+
<ul @scroll="scrollHour($event)">
|
|
69
|
+
<li v-for="(item,index) in 30*4"></li>
|
|
70
|
+
</ul>
|
|
71
|
+
<div class="cle-time-li" :style="{transform: 'translateY('+ transHour +'px)'}">
|
|
72
|
+
<p v-for="(item,index) in 30" :class="{'cle-time-act': index === -(transHour/26)+3}">
|
|
73
|
+
{{ (index > 2 && index < 27) ? ((index - 3) < 10) ? '0' + (index - 3) : (index - 3) : '' }}</p>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="cle-time-y">
|
|
77
|
+
<ul @scroll="scrollMinute($event)">
|
|
78
|
+
<li v-for="(item,index) in 66*4"></li>
|
|
79
|
+
</ul>
|
|
80
|
+
<div class="cle-time-li" :style="{transform: 'translateY('+ transMinute +'px)'}">
|
|
81
|
+
<p v-for="(item,index) in 66" :class="{'cle-time-act': index === -(transMinute/26)+3}">
|
|
82
|
+
{{ (index > 2 && index < 63) ? ((index - 3) < 10) ? '0' + (index - 3) : (index - 3) : '' }}</p>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="cle-but-right">
|
|
89
|
+
<div class="cle-but-right-cont">
|
|
90
|
+
<button class="cle-but" @click="cancel">取消</button>
|
|
91
|
+
<button class="cle-but" @click="confirm">确认</button>
|
|
92
|
+
</div>
|
|
84
93
|
</div>
|
|
85
94
|
</div>
|
|
86
95
|
</div>
|
|
87
96
|
</div>
|
|
88
|
-
</
|
|
97
|
+
</teleport>
|
|
89
98
|
</template>
|
|
90
99
|
|
|
91
100
|
<script>
|
|
92
101
|
import lunarYearTool from './sloarToLunar.js'
|
|
102
|
+
|
|
93
103
|
export default {
|
|
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
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
},
|
|
142
|
-
/**
|
|
143
|
-
* @description 全局标记点颜色，包括点和文字
|
|
144
|
-
*/
|
|
145
|
-
maskColor: {
|
|
146
|
-
type: String,
|
|
147
|
-
default: '#01AAED'
|
|
148
|
-
},
|
|
149
|
-
/**
|
|
150
|
-
* @description 是否显示农历，mask优先级高
|
|
151
|
-
*/
|
|
152
|
-
showLunar: {
|
|
153
|
-
type: Boolean,
|
|
154
|
-
default: false
|
|
155
|
-
},
|
|
156
|
-
/**
|
|
157
|
-
* @description 设置标记范围
|
|
158
|
-
*/
|
|
159
|
-
range: {
|
|
160
|
-
type: Object,
|
|
161
|
-
default: function() {
|
|
162
|
-
return {
|
|
163
|
-
rangeStart: undefined, //设置标记范围开始，yyyy-MM-dd
|
|
164
|
-
rangeEnd: undefined //设置标记范围结束，yyyy-MM-dd
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
},
|
|
168
|
-
/**
|
|
169
|
-
* @description 是否开启范围选择模式
|
|
170
|
-
*/
|
|
171
|
-
rangeMode: {
|
|
172
|
-
type: Boolean,
|
|
173
|
-
default: false
|
|
174
|
-
},
|
|
175
|
-
/**
|
|
176
|
-
* @description 日历起始时间 yyyy-MM-dd
|
|
177
|
-
*/
|
|
178
|
-
dateStart: {
|
|
179
|
-
type: String,
|
|
180
|
-
default: '1970-01-01'
|
|
181
|
-
},
|
|
182
|
-
/**
|
|
183
|
-
* @description 日历结束时间 yyyy-MM-dd
|
|
184
|
-
*/
|
|
185
|
-
dateEnd: {
|
|
186
|
-
type: String,
|
|
187
|
-
default: '2100-12-31'
|
|
188
|
-
},
|
|
189
|
-
/**
|
|
190
|
-
* @description 是否可以滚动
|
|
191
|
-
*/
|
|
192
|
-
canDrag:{
|
|
193
|
-
type: Boolean,
|
|
194
|
-
default: true
|
|
195
|
-
},
|
|
196
|
-
},
|
|
197
|
-
created() {
|
|
198
|
-
this.render();
|
|
104
|
+
name: 'zydx-calendar',
|
|
105
|
+
props: {
|
|
106
|
+
/**
|
|
107
|
+
* @description 当前时间 yyyy-MM-dd
|
|
108
|
+
*/
|
|
109
|
+
currentTime: {
|
|
110
|
+
type: String,
|
|
111
|
+
default: function () {
|
|
112
|
+
let timeObj = new Date();
|
|
113
|
+
return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate();
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
/**
|
|
117
|
+
* @description 标记点列表
|
|
118
|
+
* time 标记时间 yyyy-MM-dd
|
|
119
|
+
* text 标记内容
|
|
120
|
+
* markPoint 是否显示标记点 默认false
|
|
121
|
+
* markTextColor 标记内容颜色
|
|
122
|
+
* pointText 左上角标记点内容
|
|
123
|
+
* pointTextColor 标记点颜色
|
|
124
|
+
*/
|
|
125
|
+
mark: {
|
|
126
|
+
type: Array,
|
|
127
|
+
default: function () {
|
|
128
|
+
return undefined;
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
/**
|
|
132
|
+
* @description 是否显示时间
|
|
133
|
+
*/
|
|
134
|
+
showDate: {
|
|
135
|
+
type: Boolean,
|
|
136
|
+
default: false
|
|
137
|
+
},
|
|
138
|
+
/**
|
|
139
|
+
* @description 上月文字
|
|
140
|
+
*/
|
|
141
|
+
lastText: {
|
|
142
|
+
type: String,
|
|
143
|
+
default: '〈'
|
|
144
|
+
},
|
|
145
|
+
/**
|
|
146
|
+
* @description 下月文字
|
|
147
|
+
*/
|
|
148
|
+
nextText: {
|
|
149
|
+
type: String,
|
|
150
|
+
default: '〉'
|
|
199
151
|
},
|
|
200
|
-
|
|
152
|
+
/**
|
|
153
|
+
* @description 全局标记点颜色，包括点和文字
|
|
154
|
+
*/
|
|
155
|
+
maskColor: {
|
|
156
|
+
type: String,
|
|
157
|
+
default: '#01AAED'
|
|
158
|
+
},
|
|
159
|
+
/**
|
|
160
|
+
* @description 是否显示农历，mask优先级高
|
|
161
|
+
*/
|
|
162
|
+
showLunar: {
|
|
163
|
+
type: Boolean,
|
|
164
|
+
default: false
|
|
165
|
+
},
|
|
166
|
+
/**
|
|
167
|
+
* @description 设置标记范围
|
|
168
|
+
*/
|
|
169
|
+
range: {
|
|
170
|
+
type: Object,
|
|
171
|
+
default: function () {
|
|
201
172
|
return {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
year: undefined, //当前年
|
|
207
|
-
month: undefined, //当前月
|
|
208
|
-
beforeDateList: [], //上个月的日期列表
|
|
209
|
-
dateList: [], //本月的日期列表
|
|
210
|
-
afterDateList: [], //下个月的日期列表
|
|
211
|
-
firstRangeSelected: false, // 范围开始时间是否已经选择
|
|
212
|
-
rangeStart_: undefined, //标记范围开始，yyyyMM-dd
|
|
213
|
-
rangeEnd_: undefined, //标记范围结束，yyyyMM-dd
|
|
214
|
-
transform_x:0, // 顶部日期选择器的偏移量
|
|
215
|
-
transform_time:0, // 顶部时间选择器的偏移量
|
|
216
|
-
cleDate: '00:00', //时间选择器的时间
|
|
217
|
-
cleFocusShow: false, // 是否显示时间选择器
|
|
218
|
-
transHour: 0, // 小时选择器的偏移量
|
|
219
|
-
transMinute: 0, // 分钟选择器的偏移量
|
|
220
|
-
hour: '00', // 选择的小时
|
|
221
|
-
minute: '00', // 选择的分钟
|
|
222
|
-
dayChange: undefined, // 选择的日期
|
|
223
|
-
};
|
|
173
|
+
rangeStart: undefined, //设置标记范围开始，yyyy-MM-dd
|
|
174
|
+
rangeEnd: undefined //设置标记范围结束，yyyy-MM-dd
|
|
175
|
+
}
|
|
176
|
+
}
|
|
224
177
|
},
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
if (tempDay.getTime() == tempDayMark.getTime()) {
|
|
397
|
-
let tempTextStr = that.mark[z].text
|
|
398
|
-
if (that.mark[z].markPoint != false) { // 是否显示点
|
|
399
|
-
tempObj.pointText = that.mark[z].pointText ? that.mark[z].pointText : '●';
|
|
400
|
-
tempObj.pointTextColor = that.mark[z].pointTextColor ? that.mark[z].pointTextColor : undefined;
|
|
401
|
-
}
|
|
402
|
-
if (tempTextStr != undefined && tempTextStr != "") { // 是否显示文字
|
|
403
|
-
tempObj.markText = tempTextStr;
|
|
404
|
-
tempObj.markTextColor = that.mark[z].markTextColor ? that.mark[z].markTextColor : undefined;
|
|
405
|
-
}
|
|
406
|
-
break;
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
that.dateList.push(tempObj);
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
that.setRange();
|
|
415
|
-
|
|
416
|
-
// 创建后面的空白，补够五行
|
|
417
|
-
that.afterDateList = [];
|
|
418
|
-
if (grid_sum < 42) { // 创建后面的空白，补够五行
|
|
419
|
-
let j = 0;
|
|
420
|
-
|
|
421
|
-
//获取下一月
|
|
422
|
-
let TempMonthNext;
|
|
423
|
-
let TempYearNext;
|
|
424
|
-
if (that.month == 12) { //跨年
|
|
425
|
-
TempMonthNext = 1;
|
|
426
|
-
TempYearNext = that.year + 1;
|
|
427
|
-
} else {
|
|
428
|
-
TempYearNext = that.year;
|
|
429
|
-
TempMonthNext = that.month + 1;
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
for (let i = grid_sum; i < 42; i++) {
|
|
433
|
-
j++;
|
|
434
|
-
|
|
435
|
-
let tempObj = {
|
|
436
|
-
dateIndex: j,
|
|
437
|
-
key: 'after_' + j
|
|
438
|
-
};
|
|
439
|
-
//获取农历
|
|
440
|
-
if (that.showLunar) {
|
|
441
|
-
let LunarDate = that.sloarToLunar(TempYearNext, TempMonthNext, j);
|
|
442
|
-
let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay;
|
|
443
|
-
tempObj.markText = tempLunarDay;
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
//判断是否超出日期范围
|
|
447
|
-
let _tempAfterDate = new Date(TempYearNext + "/" + TempMonthNext + "/" + j);
|
|
448
|
-
if (_dateStart > _tempAfterDate || _tempAfterDate > _dateEnd) {
|
|
449
|
-
tempObj.outOfDate = true;
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
that.afterDateList.push(tempObj);
|
|
453
|
-
}
|
|
454
|
-
}
|
|
455
|
-
},
|
|
456
|
-
sloarToLunar(year,month,day){
|
|
457
|
-
// console.log('----')
|
|
458
|
-
// console.log(year + "--" +month+ "--" + day)
|
|
459
|
-
let result = lunarYearTool.sloarToLunar(year,month,day);
|
|
460
|
-
//console.log(result)
|
|
461
|
-
return result;
|
|
462
|
-
},
|
|
463
|
-
getTotalDay(time) { //获取月 日期总数
|
|
464
|
-
time = time.replace(/-/g, "/");
|
|
465
|
-
let selectedDate = new Date(time);
|
|
466
|
-
if (selectedDate == "Invalid Date") {
|
|
467
|
-
selectedDate = new Date(time + "/01");
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
let dayMany = new Date(selectedDate.getFullYear(),(selectedDate.getMonth() + 1), 0).getDate()
|
|
471
|
-
return dayMany;
|
|
472
|
-
},
|
|
473
|
-
toDateByStr(timeStr) { //字符串转换时间，转换失败或者不传字符串则返回当前
|
|
474
|
-
let timeObj;
|
|
475
|
-
if (timeStr) {
|
|
476
|
-
timeObj = new Date(timeStr.replace(/-/g, "/"));
|
|
477
|
-
}
|
|
478
|
-
if (!timeStr || timeObj == "Invalid Date")
|
|
479
|
-
timeObj = new Date();
|
|
480
|
-
return timeObj;
|
|
481
|
-
},
|
|
482
|
-
toDateByStr1(timeStr) { //字符串转换时间，转换失败或者不传字符串则null
|
|
483
|
-
try {
|
|
484
|
-
let timeObj;
|
|
485
|
-
if (timeStr) {
|
|
486
|
-
timeObj = new Date(timeStr.replace(/-/g, "/"));
|
|
487
|
-
}
|
|
488
|
-
if (!timeStr || timeObj == "Invalid Date")
|
|
489
|
-
return null;
|
|
490
|
-
return timeObj;
|
|
491
|
-
} catch (e) {
|
|
492
|
-
return null;
|
|
493
|
-
}
|
|
494
|
-
},
|
|
495
|
-
selectedDateFun(index) { //点击日期
|
|
496
|
-
let that = this;
|
|
497
|
-
let selectObj = that.dateList[index - 1];
|
|
498
|
-
selectObj.year = that.year;
|
|
499
|
-
selectObj.month = that.month;
|
|
500
|
-
selectObj.day = index;
|
|
501
|
-
selectObj.time = that.year + "-" + that.month + "-" + index;
|
|
502
|
-
that.dayChange = selectObj.time
|
|
503
|
-
|
|
504
|
-
//判断是否超出日期范围
|
|
505
|
-
if (that.checkOutOfDate(selectObj.time)) {
|
|
506
|
-
return;
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
that.currentSelectTime = index;
|
|
510
|
-
|
|
511
|
-
//开启了范围选择模式
|
|
512
|
-
if (that.rangeMode) {
|
|
513
|
-
if (!that.firstRangeSelected) { //选择开始时间
|
|
514
|
-
that.firstRangeSelected = !that.firstRangeSelected
|
|
515
|
-
that.rangeStart_ = selectObj.time;
|
|
516
|
-
that.rangeEnd_ = undefined;
|
|
517
|
-
that.clearRange();
|
|
518
|
-
} else { //选择了结束时间
|
|
519
|
-
that.rangeEnd_ = selectObj.time;
|
|
520
|
-
that.firstRangeSelected = !that.firstRangeSelected
|
|
521
|
-
that.setRange();
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
},
|
|
525
|
-
addMonth() { //加一个月
|
|
526
|
-
let that = this;
|
|
527
|
-
|
|
528
|
-
let _Month = that.month;
|
|
529
|
-
let _Year = that.year;
|
|
530
|
-
if (that.month == 12) { //跨年
|
|
531
|
-
_Month = 1;
|
|
532
|
-
_Year += 1;
|
|
533
|
-
} else {
|
|
534
|
-
_Month += 1;
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
let str = _Year + "/" + _Month + "/01";
|
|
178
|
+
/**
|
|
179
|
+
* @description 是否开启范围选择模式
|
|
180
|
+
*/
|
|
181
|
+
rangeMode: {
|
|
182
|
+
type: Boolean,
|
|
183
|
+
default: false
|
|
184
|
+
},
|
|
185
|
+
/**
|
|
186
|
+
* @description 日历起始时间 yyyy-MM-dd
|
|
187
|
+
*/
|
|
188
|
+
dateStart: {
|
|
189
|
+
type: String,
|
|
190
|
+
default: '1970-01-01'
|
|
191
|
+
},
|
|
192
|
+
/**
|
|
193
|
+
* @description 日历结束时间 yyyy-MM-dd
|
|
194
|
+
*/
|
|
195
|
+
dateEnd: {
|
|
196
|
+
type: String,
|
|
197
|
+
default: '2100-12-31'
|
|
198
|
+
},
|
|
199
|
+
/**
|
|
200
|
+
* @description 是否可以滚动
|
|
201
|
+
*/
|
|
202
|
+
canDrag: {
|
|
203
|
+
type: Boolean,
|
|
204
|
+
default: true
|
|
205
|
+
},
|
|
206
|
+
domeElement: {
|
|
207
|
+
type: Object,
|
|
208
|
+
default: null
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
created() {
|
|
212
|
+
this.render();
|
|
213
|
+
},
|
|
214
|
+
data() {
|
|
215
|
+
return {
|
|
216
|
+
nextDisabled: false,
|
|
217
|
+
lastDisabled: false,
|
|
218
|
+
currentSelectTime: undefined, //点击时保存的dateIndex
|
|
219
|
+
title_time: '', //顶头文本
|
|
220
|
+
year: undefined, //当前年
|
|
221
|
+
month: undefined, //当前月
|
|
222
|
+
beforeDateList: [], //上个月的日期列表
|
|
223
|
+
dateList: [], //本月的日期列表
|
|
224
|
+
afterDateList: [], //下个月的日期列表
|
|
225
|
+
firstRangeSelected: false, // 范围开始时间是否已经选择
|
|
226
|
+
rangeStart_: undefined, //标记范围开始，yyyyMM-dd
|
|
227
|
+
rangeEnd_: undefined, //标记范围结束，yyyyMM-dd
|
|
228
|
+
transform_x: 0, // 顶部日期选择器的偏移量
|
|
229
|
+
transform_time: 0, // 顶部时间选择器的偏移量
|
|
230
|
+
cleDate: '00:00', //时间选择器的时间
|
|
231
|
+
cleFocusShow: false, // 是否显示时间选择器
|
|
232
|
+
transHour: 0, // 小时选择器的偏移量
|
|
233
|
+
transMinute: 0, // 分钟选择器的偏移量
|
|
234
|
+
hour: '00', // 选择的小时
|
|
235
|
+
minute: '00', // 选择的分钟
|
|
236
|
+
dayChange: undefined, // 选择的日期
|
|
237
|
+
x: 22,
|
|
238
|
+
y: 0
|
|
239
|
+
};
|
|
240
|
+
},
|
|
241
|
+
methods: {
|
|
242
|
+
cancel() {
|
|
243
|
+
this.$emit('cancel')
|
|
244
|
+
},
|
|
245
|
+
confirm() {
|
|
246
|
+
let date = {start: this.dayChange}
|
|
247
|
+
if (this.rangeMode) {
|
|
248
|
+
// 判断两个日期的大小
|
|
249
|
+
let start = (this.rangeStart_ === undefined) ? null : this.rangeStart_.replace(/-/g, '')
|
|
250
|
+
let end = (this.rangeEnd_ === undefined) ? null : this.rangeEnd_.replace(/-/g, '')
|
|
251
|
+
date = {start: this.rangeStart_, end: this.rangeEnd_}
|
|
252
|
+
if (Number(start) > Number(end)) {
|
|
253
|
+
date = {start: this.rangeEnd_, end: this.rangeStart_}
|
|
254
|
+
} else {
|
|
255
|
+
date = {start: this.rangeStart_, end: this.rangeEnd_}
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
if (this.showDate) date.date = this.cleDate
|
|
259
|
+
this.$emit('confirm', date)
|
|
260
|
+
},
|
|
261
|
+
cleBlur() {
|
|
262
|
+
this.cleFocusShow = false
|
|
263
|
+
},
|
|
264
|
+
//获取焦点选择时间
|
|
265
|
+
cleFocus() {
|
|
266
|
+
this.cleFocusShow = true
|
|
267
|
+
},
|
|
268
|
+
scrollMinute(e) {
|
|
269
|
+
let top = e.target.scrollTop / 3.8
|
|
270
|
+
let index = Math.floor(top / 26)
|
|
271
|
+
if (index > 59 || index < 0) return
|
|
272
|
+
this.transMinute = -(index * 26)
|
|
273
|
+
this.minute = (index < 10) ? '0' + index : index
|
|
274
|
+
this.cleDate = `${this.hour}:${this.minute}`
|
|
275
|
+
},
|
|
276
|
+
scrollHour(e) {
|
|
277
|
+
let top = e.target.scrollTop / 3.8
|
|
278
|
+
let index = Math.floor(top / 26)
|
|
279
|
+
if (index > 23 || index < 0) return
|
|
280
|
+
this.transHour = -(index * 26)
|
|
281
|
+
this.hour = (index < 10) ? '0' + index : index
|
|
282
|
+
this.cleDate = `${this.hour}:${this.minute}`
|
|
283
|
+
},
|
|
284
|
+
subYear() { //减一年
|
|
285
|
+
let that = this
|
|
286
|
+
let _Month = that.month;
|
|
287
|
+
let _Year = that.year;
|
|
288
|
+
_Year -= 1
|
|
289
|
+
let str = _Year + "/" + _Month + "/01";
|
|
290
|
+
that.render(str);
|
|
291
|
+
},
|
|
292
|
+
addYear() { //加一年
|
|
293
|
+
let that = this
|
|
294
|
+
let _Month = that.month;
|
|
295
|
+
let _Year = that.year;
|
|
296
|
+
_Year += 1
|
|
297
|
+
let str = _Year + "/" + _Month + "/01";
|
|
298
|
+
that.render(str);
|
|
299
|
+
},
|
|
300
|
+
render(setTimeStr) { //初始化
|
|
301
|
+
if(this.domeElement) {
|
|
302
|
+
const dome = this.domeElement.$el.getBoundingClientRect()
|
|
303
|
+
this.x = dome.left
|
|
304
|
+
this.y = dome.top + dome.height
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
let that = this;
|
|
308
|
+
let currentTimeStr = setTimeStr ? setTimeStr : that.currentTime;
|
|
309
|
+
let timeObj = this.toDateByStr(currentTimeStr); //当前选定的时间
|
|
310
|
+
//计算头部显示的年月
|
|
311
|
+
let _tempTileMonth = (timeObj.getMonth() + 1);
|
|
312
|
+
if (_tempTileMonth < 10)
|
|
313
|
+
_tempTileMonth = '0' + _tempTileMonth;
|
|
314
|
+
this.title_time = timeObj.getFullYear() + "年" + _tempTileMonth + "月";
|
|
315
|
+
|
|
316
|
+
//获取当前时间月份1号
|
|
317
|
+
let firstDayStr = timeObj.getFullYear() + "/" + (timeObj.getMonth() + 1) + "/01";
|
|
318
|
+
let date = that.toDateByStr(firstDayStr);
|
|
319
|
+
that.year = date.getFullYear();
|
|
320
|
+
that.month = date.getMonth() + 1;
|
|
321
|
+
let firstDayWeek = date.getDay(); //第一天是星期几
|
|
322
|
+
that.dayChange = that.year + '-' + that.month + '-' + new Date().getDate()
|
|
323
|
+
let grid_sum = 0; //总格子数 ，用于后面填满格子
|
|
324
|
+
//获取上一个月的天数
|
|
325
|
+
let TempMonth;
|
|
326
|
+
let TempYear;
|
|
327
|
+
if (that.month == 1) { //跨年
|
|
328
|
+
TempMonth = 12;
|
|
329
|
+
TempYear = that.year - 1;
|
|
330
|
+
} else {
|
|
331
|
+
TempYear = that.year;
|
|
332
|
+
TempMonth = that.month - 1;
|
|
333
|
+
}
|
|
334
|
+
let TempLastMonthStr = TempYear + "/" + TempMonth + "/01";
|
|
335
|
+
let lastMonthTotalDay = that.getTotalDay(TempLastMonthStr);
|
|
336
|
+
let lastMonthStartDay = lastMonthTotalDay - firstDayWeek;
|
|
337
|
+
|
|
338
|
+
let _dateStart = that.toDateByStr1(that.dateStart);
|
|
339
|
+
let _dateEnd = that.toDateByStr1(that.dateEnd);
|
|
340
|
+
// 创建前面的日期
|
|
341
|
+
that.beforeDateList = [];
|
|
342
|
+
for (let i = 0; i < firstDayWeek; i++) {
|
|
343
|
+
grid_sum++;
|
|
344
|
+
lastMonthStartDay++;
|
|
345
|
+
let tempObj = {
|
|
346
|
+
dateIndex: lastMonthStartDay,
|
|
347
|
+
key: 'before_' + i
|
|
348
|
+
};
|
|
538
349
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
350
|
+
//判断是否超出日期范围
|
|
351
|
+
let _tempBeforeDate = new Date(TempYear + "/" + TempMonth + "/" + lastMonthStartDay);
|
|
352
|
+
if (_dateStart > _tempBeforeDate || _tempBeforeDate > _dateEnd) {
|
|
353
|
+
tempObj.outOfDate = true;
|
|
354
|
+
}
|
|
544
355
|
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
356
|
+
//获取农历
|
|
357
|
+
if (that.showLunar) {
|
|
358
|
+
let LunarDate = that.sloarToLunar(TempYear, TempMonth, lastMonthStartDay);
|
|
359
|
+
let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay;
|
|
360
|
+
tempObj.markText = tempLunarDay;
|
|
361
|
+
}
|
|
548
362
|
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
363
|
+
that.beforeDateList.push(tempObj);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
//获取一个月的天数
|
|
367
|
+
let totalDay = that.getTotalDay(currentTimeStr);
|
|
368
|
+
|
|
369
|
+
//生成本月日历
|
|
370
|
+
let today = new Date();
|
|
371
|
+
let today_year = today.getFullYear();
|
|
372
|
+
let today_month = today.getMonth() + 1;
|
|
373
|
+
let today_day = today.getDate();
|
|
374
|
+
that.dateList = [];
|
|
375
|
+
for (let i = 1; i <= totalDay; i++) { //循环日
|
|
376
|
+
grid_sum++;
|
|
377
|
+
|
|
378
|
+
let tempObj = {
|
|
379
|
+
dateIndex: i,
|
|
380
|
+
key: 'date_' + i,
|
|
381
|
+
isRanges: false,
|
|
382
|
+
isToday: false
|
|
383
|
+
};
|
|
384
|
+
//当前日期变量
|
|
385
|
+
let tempDay = that.toDateByStr(that.year + "/" + that.month + "/" + i);
|
|
553
386
|
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
that.render(str);
|
|
558
|
-
},
|
|
559
|
-
subMonth() { //减一个月
|
|
560
|
-
let that = this;
|
|
561
|
-
|
|
562
|
-
let _Month = that.month;
|
|
563
|
-
let _Year = that.year;
|
|
564
|
-
if (that.month == 1) { //跨年
|
|
565
|
-
_Month = 12;
|
|
566
|
-
_Year -= 1;
|
|
567
|
-
} else {
|
|
568
|
-
_Month -= 1;
|
|
569
|
-
}
|
|
387
|
+
//判断是否为当天
|
|
388
|
+
if (today_year == that.year && today_month == that.month && today_day == i)
|
|
389
|
+
tempObj.isToday = true;
|
|
570
390
|
|
|
571
|
-
|
|
391
|
+
//周六和周日，特殊处理
|
|
392
|
+
let tempCurrWeek = tempDay.getDay();
|
|
393
|
+
if (tempCurrWeek == 0 || tempCurrWeek == 6)
|
|
394
|
+
tempObj.isDaySunOrSat = true;
|
|
572
395
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
return;
|
|
578
|
-
}
|
|
396
|
+
//判断是否超出日期范围
|
|
397
|
+
if (_dateStart > tempDay || tempDay > _dateEnd) {
|
|
398
|
+
tempObj.outOfDate = true;
|
|
399
|
+
}
|
|
579
400
|
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
401
|
+
//获取农历
|
|
402
|
+
if (that.showLunar) {
|
|
403
|
+
let LunarDate = that.sloarToLunar(that.year, that.month, i);
|
|
404
|
+
that.lunarMonth = LunarDate.lunarMonth;
|
|
405
|
+
that.lunarYear = LunarDate.lunarYear;
|
|
406
|
+
let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay;
|
|
407
|
+
tempObj.lunarMonth = LunarDate.lunarMonth;
|
|
408
|
+
tempObj.lunarYear = LunarDate.lunarYear;
|
|
409
|
+
tempObj.lunarDay = LunarDate.lunarDay;
|
|
410
|
+
tempObj.markText = tempLunarDay;
|
|
411
|
+
tempObj.markTextColor = '#454545';
|
|
412
|
+
}
|
|
583
413
|
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
414
|
+
//设置了标记点
|
|
415
|
+
if (that.mark) {
|
|
416
|
+
for (let z = 0; z < that.mark.length; z++) { //判断是否为标记点
|
|
417
|
+
let tempDayMark = that.toDateByStr1(that.mark[z].time.trim())
|
|
418
|
+
if (tempDay.getTime() == tempDayMark.getTime()) {
|
|
419
|
+
let tempTextStr = that.mark[z].text
|
|
420
|
+
if (that.mark[z].markPoint != false) { // 是否显示点
|
|
421
|
+
tempObj.pointText = that.mark[z].pointText ? that.mark[z].pointText : '●';
|
|
422
|
+
tempObj.pointTextColor = that.mark[z].pointTextColor ? that.mark[z].pointTextColor : undefined;
|
|
423
|
+
}
|
|
424
|
+
if (tempTextStr != undefined && tempTextStr != "") { // 是否显示文字
|
|
425
|
+
tempObj.markText = tempTextStr;
|
|
426
|
+
tempObj.markTextColor = that.mark[z].markTextColor ? that.mark[z].markTextColor : undefined;
|
|
427
|
+
}
|
|
428
|
+
break;
|
|
587
429
|
}
|
|
430
|
+
}
|
|
431
|
+
}
|
|
588
432
|
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
433
|
+
that.dateList.push(tempObj);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
that.setRange();
|
|
437
|
+
|
|
438
|
+
// 创建后面的空白，补够五行
|
|
439
|
+
that.afterDateList = [];
|
|
440
|
+
if (grid_sum < 42) { // 创建后面的空白，补够五行
|
|
441
|
+
let j = 0;
|
|
442
|
+
|
|
443
|
+
//获取下一月
|
|
444
|
+
let TempMonthNext;
|
|
445
|
+
let TempYearNext;
|
|
446
|
+
if (that.month == 12) { //跨年
|
|
447
|
+
TempMonthNext = 1;
|
|
448
|
+
TempYearNext = that.year + 1;
|
|
449
|
+
} else {
|
|
450
|
+
TempYearNext = that.year;
|
|
451
|
+
TempMonthNext = that.month + 1;
|
|
452
|
+
}
|
|
605
453
|
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
let
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
if (_dateStart > _tempDate || _tempDate > _dateEnd) {
|
|
628
|
-
return true;
|
|
629
|
-
} else
|
|
630
|
-
return false;
|
|
631
|
-
},
|
|
632
|
-
checkDateRange(year, month, type) { //判断范围界限值是否在当月内,yyyy-MM-dd,type；1 上限值,其他：下限值
|
|
633
|
-
let that = this;
|
|
634
|
-
|
|
635
|
-
let totalDay = that.getTotalDay(year + '/' + month + '/01');
|
|
636
|
-
let firstD = that.toDateByStr1(year + '/' + month + '/01');
|
|
637
|
-
let lastD = that.toDateByStr1(year + '/' + month + '/' + totalDay);
|
|
638
|
-
|
|
639
|
-
if (type == 1) { //上限值
|
|
640
|
-
let _dateEnd = that.toDateByStr1(that.dateEnd);
|
|
641
|
-
if (firstD <= _dateEnd && _dateEnd <= lastD) {
|
|
642
|
-
return true;
|
|
643
|
-
} else
|
|
644
|
-
return false;
|
|
645
|
-
} else { //下限值
|
|
646
|
-
let _dateStart = that.toDateByStr1(that.dateStart);
|
|
647
|
-
if (firstD <= _dateStart && _dateStart <= lastD) {
|
|
648
|
-
return true;
|
|
649
|
-
} else
|
|
650
|
-
return false;
|
|
651
|
-
}
|
|
652
|
-
},
|
|
653
|
-
},
|
|
654
|
-
watch: {
|
|
655
|
-
currentTime: function(val, oldVal) { //时间改变
|
|
656
|
-
let dateNew = this.toDateByStr1(val);
|
|
657
|
-
if (dateNew.getFullYear() === this.year && (dateNew.getMonth() + 1) === this.month) {
|
|
658
|
-
console.log('time is not change')
|
|
659
|
-
} else {
|
|
660
|
-
this.currentSelectTime = dateNew.getDate();
|
|
661
|
-
this.render();
|
|
662
|
-
}
|
|
663
|
-
},
|
|
664
|
-
range: function(val, oldVal) { //范围改变
|
|
665
|
-
if (val.rangeStart !== oldVal.rangeStart || val.rangeEnd !== oldVal.rangeEnd) {
|
|
666
|
-
this.rangeStart_ = val.rangeStart;
|
|
667
|
-
this.rangeEnd_ = val.rangeEnd;
|
|
668
|
-
this.setRange();
|
|
669
|
-
}
|
|
670
|
-
},
|
|
671
|
-
mark: function(val, oldVal) { //标记改变
|
|
672
|
-
this.render();
|
|
673
|
-
},
|
|
674
|
-
rangeMode: function(val, oldVal) { //范围改变
|
|
675
|
-
if (!val) { //如果是关闭范围模式
|
|
676
|
-
this.rangeStart_ = undefined; //标记范围开始，yyyyMM-dd
|
|
677
|
-
this.rangeEnd_ = undefined; //标记范围结束，yyyyMM-dd
|
|
678
|
-
this.firstRangeSelected = false;
|
|
679
|
-
this.clearRange()
|
|
680
|
-
}
|
|
681
|
-
},
|
|
682
|
-
},
|
|
683
|
-
computed: {
|
|
684
|
-
transformObj:function () {
|
|
685
|
-
return 'translate3d(' + this.transform_x + 'px, 0px, 0px) translateZ(0px)';
|
|
686
|
-
},
|
|
687
|
-
transformTimeObj:function () {
|
|
688
|
-
return this.transform_time + 'ms';
|
|
454
|
+
for (let i = grid_sum; i < 42; i++) {
|
|
455
|
+
j++;
|
|
456
|
+
|
|
457
|
+
let tempObj = {
|
|
458
|
+
dateIndex: j,
|
|
459
|
+
key: 'after_' + j
|
|
460
|
+
};
|
|
461
|
+
//获取农历
|
|
462
|
+
if (that.showLunar) {
|
|
463
|
+
let LunarDate = that.sloarToLunar(TempYearNext, TempMonthNext, j);
|
|
464
|
+
let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay;
|
|
465
|
+
tempObj.markText = tempLunarDay;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
//判断是否超出日期范围
|
|
469
|
+
let _tempAfterDate = new Date(TempYearNext + "/" + TempMonthNext + "/" + j);
|
|
470
|
+
if (_dateStart > _tempAfterDate || _tempAfterDate > _dateEnd) {
|
|
471
|
+
tempObj.outOfDate = true;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
that.afterDateList.push(tempObj);
|
|
689
475
|
}
|
|
476
|
+
}
|
|
477
|
+
},
|
|
478
|
+
sloarToLunar(year, month, day) {
|
|
479
|
+
// console.log('----')
|
|
480
|
+
// console.log(year + "--" +month+ "--" + day)
|
|
481
|
+
let result = lunarYearTool.sloarToLunar(year, month, day);
|
|
482
|
+
//console.log(result)
|
|
483
|
+
return result;
|
|
484
|
+
},
|
|
485
|
+
getTotalDay(time) { //获取月 日期总数
|
|
486
|
+
time = time.replace(/-/g, "/");
|
|
487
|
+
let selectedDate = new Date(time);
|
|
488
|
+
if (selectedDate == "Invalid Date") {
|
|
489
|
+
selectedDate = new Date(time + "/01");
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
let dayMany = new Date(selectedDate.getFullYear(), (selectedDate.getMonth() + 1), 0).getDate()
|
|
493
|
+
return dayMany;
|
|
494
|
+
},
|
|
495
|
+
toDateByStr(timeStr) { //字符串转换时间，转换失败或者不传字符串则返回当前
|
|
496
|
+
let timeObj;
|
|
497
|
+
if (timeStr) {
|
|
498
|
+
timeObj = new Date(timeStr.replace(/-/g, "/"));
|
|
499
|
+
}
|
|
500
|
+
if (!timeStr || timeObj == "Invalid Date")
|
|
501
|
+
timeObj = new Date();
|
|
502
|
+
return timeObj;
|
|
503
|
+
},
|
|
504
|
+
toDateByStr1(timeStr) { //字符串转换时间，转换失败或者不传字符串则null
|
|
505
|
+
try {
|
|
506
|
+
let timeObj;
|
|
507
|
+
if (timeStr) {
|
|
508
|
+
timeObj = new Date(timeStr.replace(/-/g, "/"));
|
|
509
|
+
}
|
|
510
|
+
if (!timeStr || timeObj == "Invalid Date")
|
|
511
|
+
return null;
|
|
512
|
+
return timeObj;
|
|
513
|
+
} catch (e) {
|
|
514
|
+
return null;
|
|
515
|
+
}
|
|
516
|
+
},
|
|
517
|
+
selectedDateFun(index) { //点击日期
|
|
518
|
+
let that = this;
|
|
519
|
+
let selectObj = that.dateList[index - 1];
|
|
520
|
+
selectObj.year = that.year;
|
|
521
|
+
selectObj.month = that.month;
|
|
522
|
+
selectObj.day = index;
|
|
523
|
+
selectObj.time = that.year + "-" + that.month + "-" + index;
|
|
524
|
+
that.dayChange = selectObj.time
|
|
525
|
+
|
|
526
|
+
//判断是否超出日期范围
|
|
527
|
+
if (that.checkOutOfDate(selectObj.time)) {
|
|
528
|
+
return;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
that.currentSelectTime = index;
|
|
532
|
+
|
|
533
|
+
//开启了范围选择模式
|
|
534
|
+
if (that.rangeMode) {
|
|
535
|
+
if (!that.firstRangeSelected) { //选择开始时间
|
|
536
|
+
that.firstRangeSelected = !that.firstRangeSelected
|
|
537
|
+
that.rangeStart_ = selectObj.time;
|
|
538
|
+
that.rangeEnd_ = undefined;
|
|
539
|
+
that.clearRange();
|
|
540
|
+
} else { //选择了结束时间
|
|
541
|
+
that.rangeEnd_ = selectObj.time;
|
|
542
|
+
that.firstRangeSelected = !that.firstRangeSelected
|
|
543
|
+
that.setRange();
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
},
|
|
547
|
+
addMonth() { //加一个月
|
|
548
|
+
let that = this;
|
|
549
|
+
|
|
550
|
+
let _Month = that.month;
|
|
551
|
+
let _Year = that.year;
|
|
552
|
+
if (that.month == 12) { //跨年
|
|
553
|
+
_Month = 1;
|
|
554
|
+
_Year += 1;
|
|
555
|
+
} else {
|
|
556
|
+
_Month += 1;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
let str = _Year + "/" + _Month + "/01";
|
|
560
|
+
|
|
561
|
+
//判断是否超出日期范围
|
|
562
|
+
if (that.checkOutOfDate(str)) {
|
|
563
|
+
that.nextDisabled = true;
|
|
564
|
+
return;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
that.month = _Month;
|
|
568
|
+
that.year = _Year;
|
|
569
|
+
that.lastDisabled = false;
|
|
570
|
+
|
|
571
|
+
//检查日期上限值是否在当月内，如果在则不能再切换下个月
|
|
572
|
+
if (that.checkDateRange(that.year, that.month, 1)) {
|
|
573
|
+
that.nextDisabled = true;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
if (that.rangeMode) { //开启了范围模式
|
|
577
|
+
that.currentSelectTime = undefined;
|
|
578
|
+
}
|
|
579
|
+
that.render(str);
|
|
580
|
+
},
|
|
581
|
+
subMonth() { //减一个月
|
|
582
|
+
let that = this;
|
|
583
|
+
|
|
584
|
+
let _Month = that.month;
|
|
585
|
+
let _Year = that.year;
|
|
586
|
+
if (that.month == 1) { //跨年
|
|
587
|
+
_Month = 12;
|
|
588
|
+
_Year -= 1;
|
|
589
|
+
} else {
|
|
590
|
+
_Month -= 1;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
let str = _Year + "/" + _Month + "/01";
|
|
594
|
+
|
|
595
|
+
//判断是否超出日期范围
|
|
596
|
+
let _totalDay = that.getTotalDay(str);
|
|
597
|
+
if (that.checkOutOfDate(_Year + "/" + _Month + "/" + _totalDay)) {
|
|
598
|
+
that.lastDisabled = true;
|
|
599
|
+
return;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
that.month = _Month;
|
|
603
|
+
that.year = _Year;
|
|
604
|
+
that.nextDisabled = false;
|
|
605
|
+
|
|
606
|
+
//检查日期下限值是否在当月内，如果在则不能再切换上个月
|
|
607
|
+
if (that.checkDateRange(that.year, that.month)) {
|
|
608
|
+
that.lastDisabled = true;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
if (that.rangeMode) { //开启了范围模式
|
|
612
|
+
that.currentSelectTime = undefined;
|
|
613
|
+
}
|
|
614
|
+
that.render(str);
|
|
615
|
+
},
|
|
616
|
+
setRange() { //设置范围
|
|
617
|
+
let that = this;
|
|
618
|
+
let rangeStartDate = that.toDateByStr1(that.rangeStart_);
|
|
619
|
+
let rangeEndDate = that.toDateByStr1(that.rangeEnd_);
|
|
620
|
+
if (!rangeStartDate || !rangeEndDate)
|
|
621
|
+
return;
|
|
622
|
+
if (rangeStartDate > rangeEndDate) { //防止范围出错
|
|
623
|
+
let tempD = rangeEndDate;
|
|
624
|
+
rangeEndDate = rangeStartDate;
|
|
625
|
+
rangeStartDate = tempD;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
//循环判断范围
|
|
629
|
+
for (let i = 0; i < that.dateList.length; i++) {
|
|
630
|
+
let _TempDtStr = that.year + "/" + that.month + "/" + that.dateList[i].dateIndex;
|
|
631
|
+
let _TempDt = that.toDateByStr1(_TempDtStr);
|
|
632
|
+
that.dateList[i].isRanges = false;
|
|
633
|
+
if (rangeStartDate <= _TempDt && _TempDt <= rangeEndDate) //时间在范围内
|
|
634
|
+
that.dateList[i].isRanges = true;
|
|
635
|
+
}
|
|
636
|
+
},
|
|
637
|
+
clearRange() { //关闭范围模式范围
|
|
638
|
+
let that = this;
|
|
639
|
+
//循环判断范围
|
|
640
|
+
for (let i = 0; i < that.dateList.length; i++) {
|
|
641
|
+
that.dateList[i].isRanges = false;
|
|
642
|
+
}
|
|
643
|
+
},
|
|
644
|
+
checkOutOfDate(time) { //判断是否超出日期范围,yyyy-MM-dd
|
|
645
|
+
let that = this;
|
|
646
|
+
let _dateStart = that.toDateByStr1(that.dateStart);
|
|
647
|
+
let _dateEnd = that.toDateByStr1(that.dateEnd);
|
|
648
|
+
let _tempDate = that.toDateByStr1(time);
|
|
649
|
+
if (_dateStart > _tempDate || _tempDate > _dateEnd) {
|
|
650
|
+
return true;
|
|
651
|
+
} else
|
|
652
|
+
return false;
|
|
653
|
+
},
|
|
654
|
+
checkDateRange(year, month, type) { //判断范围界限值是否在当月内,yyyy-MM-dd,type；1 上限值,其他：下限值
|
|
655
|
+
let that = this;
|
|
656
|
+
|
|
657
|
+
let totalDay = that.getTotalDay(year + '/' + month + '/01');
|
|
658
|
+
let firstD = that.toDateByStr1(year + '/' + month + '/01');
|
|
659
|
+
let lastD = that.toDateByStr1(year + '/' + month + '/' + totalDay);
|
|
660
|
+
|
|
661
|
+
if (type == 1) { //上限值
|
|
662
|
+
let _dateEnd = that.toDateByStr1(that.dateEnd);
|
|
663
|
+
if (firstD <= _dateEnd && _dateEnd <= lastD) {
|
|
664
|
+
return true;
|
|
665
|
+
} else
|
|
666
|
+
return false;
|
|
667
|
+
} else { //下限值
|
|
668
|
+
let _dateStart = that.toDateByStr1(that.dateStart);
|
|
669
|
+
if (firstD <= _dateStart && _dateStart <= lastD) {
|
|
670
|
+
return true;
|
|
671
|
+
} else
|
|
672
|
+
return false;
|
|
673
|
+
}
|
|
674
|
+
},
|
|
675
|
+
},
|
|
676
|
+
watch: {
|
|
677
|
+
currentTime: function (val, oldVal) { //时间改变
|
|
678
|
+
let dateNew = this.toDateByStr1(val);
|
|
679
|
+
if (dateNew.getFullYear() === this.year && (dateNew.getMonth() + 1) === this.month) {
|
|
680
|
+
console.log('time is not change')
|
|
681
|
+
} else {
|
|
682
|
+
this.currentSelectTime = dateNew.getDate();
|
|
683
|
+
this.render();
|
|
684
|
+
}
|
|
685
|
+
},
|
|
686
|
+
range: function (val, oldVal) { //范围改变
|
|
687
|
+
if (val.rangeStart !== oldVal.rangeStart || val.rangeEnd !== oldVal.rangeEnd) {
|
|
688
|
+
this.rangeStart_ = val.rangeStart;
|
|
689
|
+
this.rangeEnd_ = val.rangeEnd;
|
|
690
|
+
this.setRange();
|
|
691
|
+
}
|
|
692
|
+
},
|
|
693
|
+
mark: function (val, oldVal) { //标记改变
|
|
694
|
+
this.render();
|
|
695
|
+
},
|
|
696
|
+
rangeMode: function (val, oldVal) { //范围改变
|
|
697
|
+
if (!val) { //如果是关闭范围模式
|
|
698
|
+
this.rangeStart_ = undefined; //标记范围开始，yyyyMM-dd
|
|
699
|
+
this.rangeEnd_ = undefined; //标记范围结束，yyyyMM-dd
|
|
700
|
+
this.firstRangeSelected = false;
|
|
701
|
+
this.clearRange()
|
|
702
|
+
}
|
|
703
|
+
},
|
|
704
|
+
},
|
|
705
|
+
computed: {
|
|
706
|
+
transformObj: function () {
|
|
707
|
+
return 'translate3d(' + this.transform_x + 'px, 0px, 0px) translateZ(0px)';
|
|
690
708
|
},
|
|
709
|
+
transformTimeObj: function () {
|
|
710
|
+
return this.transform_time + 'ms';
|
|
711
|
+
}
|
|
712
|
+
},
|
|
691
713
|
}
|
|
692
714
|
</script>
|
|
693
715
|
|