11 |
12 |
13 |
14 | 
15 |
16 | ```html
17 |
18 |
19 |
20 | 
31 |
32 | ```js
33 | Page({
34 | data: {
35 | date: "",
36 | calendarShow: false,
37 | },
38 | select ({detail}) {
39 | this.setData({ date: detail.text });
40 | this.offCalendar();
41 | },
42 | openCalendar () {
43 | this.setData({calendarShow: true});
44 | },
45 | offCalendar () {
46 | this.setData({ calendarShow: false });
47 | }
48 | });
49 | ```
50 |
51 |
52 | ### 2.指定日期选择
53 | 
54 | 
查看源码
12 |
13 |
14 |
15 |
16 | ```html
17 |
18 |
19 |
20 |
31 |
32 | ```js
33 | Page({
34 | data: {
35 | date: "",
36 | calendarShow: false,
37 | },
38 | select ({detail}) {
39 | this.setData({ date: detail.text });
40 | this.offCalendar();
41 | },
42 | openCalendar () {
43 | this.setData({calendarShow: true});
44 | },
45 | offCalendar () {
46 | this.setData({ calendarShow: false });
47 | }
48 | });
49 | ```
50 |
55 |
56 |
57 |
58 |
59 |
60 | ```html
61 |
62 |
63 |
96 |
97 | ### 3.指定日期选择带文本
98 | 
99 | 查看源码
56 |
57 |
58 |
59 |
60 | ```html
61 |
62 |
63 |
74 |
75 | ```js
76 | Page({
77 | data: {
78 | actives: ["2019-06-23", "2019-06-25", "2019-06-30"],/*指定允许选择的日期*/
79 | date: "",
80 | calendarShow: false,
81 | },
82 | select ({detail}) {
83 | this.setData({ date: detail.text });
84 | this.offCalendar();
85 | },
86 | openCalendar () {
87 | this.setData({calendarShow: true});
88 | },
89 | offCalendar () {
90 | this.setData({ calendarShow: false });
91 | }
92 | });
93 | ```
94 |
95 |
100 |
101 |
102 |
103 |
104 |
105 | ```html
106 |
107 |
108 |
145 |
146 | ### 4.指定范围日期选择
147 | 
148 | 查看源码
101 |
102 |
103 |
104 |
105 | ```html
106 |
107 |
108 |
119 |
120 | ```js
121 | Page({
122 | data: {
123 | actives: [
124 | {date: "2019-06-24", text: "￥1333.3"}, //每个单元增加了text属性用于定义需要显示的文本
125 | {date: "2019-06-25", text: "￥998.01"},
126 | {date: "2019-06-26", text: "￥998.01"},
127 | {date: "2019-06-27", text: "￥998.01"}
128 | ],
129 | date: "",
130 | calendarShow: false,
131 | },
132 | select ({detail}) {
133 | this.setData({ date: detail.text });
134 | this.offCalendar();
135 | },
136 | openCalendar () {
137 | this.setData({calendarShow: true});
138 | },
139 | offCalendar () {
140 | this.setData({ calendarShow: false });
141 | }
142 | });
143 | ```
144 |
149 |
150 |
151 |
152 |
153 |
154 | ```html
155 |
156 |
157 |
194 |
195 |
196 | ### 5.基本日期范围选择
197 | 
198 | 查看源码
150 |
151 | 152 |
153 |
154 | ```html
155 |
156 |
157 |
171 |
172 | ```js
173 | Page({
174 | data: {
175 | date: "",
176 | calendarShow: false,
177 | },
178 | select ({detail :{text}}) {
179 | this.setData({
180 | date: text
181 | });
182 | this.offCalendar();
183 | },
184 | openCalendar () {
185 | this.setData({calendarShow: true});
186 | },
187 | offCalendar () {
188 | this.setData({ calendarShow: false });
189 | }
190 | });
191 | ```
192 |
193 |
199 |
200 |
201 |
202 |
203 |
204 | ```html
205 |
206 |
207 |
208 |
245 |
246 | ### 6.指定范围日期范围选择
247 | 
248 | 查看源码
200 |
201 | 202 |
203 |
204 | ```html
205 |
206 |
207 |
208 |
219 |
220 | ```js
221 | Page({
222 | data: {
223 | start: "",
224 | stop: "",
225 | calendarShow: false,
226 | },
227 | select ({detail :{begin: {text:begin}, over: {text: over}}}) {
228 | console.log(begin, over);
229 | this.setData({
230 | start: begin,
231 | stop: over
232 | });
233 | this.offCalendar();
234 | },
235 | openCalendar () {
236 | this.setData({calendarShow: true});
237 | },
238 | offCalendar () {
239 | this.setData({ calendarShow: false });
240 | }
241 | });
242 |
243 | ```
244 |
249 |
250 |
251 |
252 |
253 |
254 | ```html
255 |
256 |
257 |
258 |
297 |
298 | ### 7.自定义主题
299 | 
300 |
301 | *^-^我不是ui，配色大家随便看就行*
302 | 查看源码
250 |
251 | 252 |
253 |
254 | ```html
255 |
256 |
257 |
258 |
272 |
273 | ```js
274 | Page({
275 | data: {
276 | start: "",
277 | stop: "",
278 | calendarShow: false
279 | },
280 | select ({detail :{begin: {text: begin}, over: {text: over}}}) {
281 | console.log(begin, over);
282 | this.setData({
283 | start: begin,
284 | stop: over
285 | });
286 | this.offCalendar();
287 | },
288 | openCalendar () {
289 | this.setData({ calendarShow: true });
290 | },
291 | offCalendar () {
292 | this.setData({ calendarShow: false });
293 | }
294 | });
295 | ```
296 |
303 |
304 |
305 |
306 |
307 |
308 | ```html
309 |
310 |
313 |
314 |
315 |
386 |
387 | 查看源码
304 |
305 | 306 |
307 |
308 | ```html
309 |
329 |
330 | ```js
331 | Page({
332 | data: {
333 | start: "",
334 | stop: "",
335 | theme: null,
336 | themes: {
337 | green: {
338 | bg: "#67C23A",
339 | fontColor: "#fff",
340 | rangeStartColor: "#F56C6C",
341 | rangeColor: "#fde2f2",
342 | rangeEndColor: "#F56C6C"
343 | },
344 | pink: {
345 | bg: "#F56C6C",
346 | fontColor: "#fff",
347 | rangeStartColor: "#67C23A",
348 | rangeColor: "#e1f3d8",
349 | rangeEndColor: "#67C23A"
350 | },
351 | blue: {
352 | bg: "#409efe",
353 | fontColor: "#fff",
354 | rangeStartColor: "#79bbff",
355 | rangeColor: "#b3d8ff",
356 | rangeEndColor: "#79bbff"
357 | }
358 | },
359 | items: [
360 | { name: 'green', value: '绿色', checked: true },
361 | { name: 'pink', value: '粉色' },
362 | { name: 'blue', value: '蓝色' }
363 | ]
364 | },
365 | onLoad () {
366 | this.setData({
367 | theme: this.data.themes.green
368 | });
369 | },
370 |
371 | radioChange: function (e) {
372 | this.setData({
373 | theme: this.data.themes[e.detail.value]
374 | });
375 | },
376 |
377 | select ({detail: {begin: {text: brgin}, over: {text: over}}}) {
378 | this.setData({
379 | start: begin,
380 | stop: over
381 | });
382 | }
383 | })
384 | ```
385 | 388 |
389 | 390 | ## 属性、事件 391 | ### 1.通用属性 392 | |属性|说明|数据类型|默认值|可选值|备注/注意| 393 | |-|-|-|-|-|-| 394 | |title|标题|String|-|-|-| 395 | |useType|使用模式|String|"range"|"range"、"touch"|touch为日期单选模式，range为日期范围选择模式|-| 396 | |isChangeYear|是否启用年份切换|Boolean|false|-|-| 397 | |confirmText|确认按钮文本|String|"确定"|-|-| 398 | |confirmType|指定什么时候触发confirm事件|String|"button"|"button"、"end"|为button时表示要点击确定按钮才触发confirm，为end时选择结束就触发confirm| 399 | |min|设置最小选择日期（含）|String|-|"now"|格式必须为日期字符串如： xxxx-xx-xx, 为now时候表示以今天为最小选择日期起始| 400 | |max|设置最大选择日期（含）|String|-|-|格式必须为日期字符串如： xxxx-xx-xx| 401 | 402 | ### 2.日期单选模式属性 403 | |属性|说明|数据类型|默认值|可选值|备注/注意| 404 | |-|-|-|-|-|-| 405 | |date|初始化选中日期|String|-|-|格式必须为日期字符串如： xxxx-xx-xx| 406 | |actives|指定可选择日期|Array|-|-|普通用法["xxx-xx-xx", ...]；显示文本用法[{date: "xxxx-xx-xx", text: "￥998，,0"}, ...]| 407 | 408 | ### 3.日期范围选择模式属性 409 | |属性|说明|数据类型|默认值|可选值|备注/注意| 410 | |-|-|-|-|-|-| 411 | |start|指定范围开始选中|String|-|-|格式必须为日期字符串如： xxxx-xx-xx| 412 | |stop|指定范围结束选中|String|-|-|格式必须为日期字符串如： xxxx-xx-xx| 413 | 414 | ### 4.主题属性 415 | |属性|说明|数据类型|默认值|可选值|备注/注意| 416 | |-|-|-|-|-|-| 417 | |background|背景颜色|String|-|-|css\wxss支持的颜色都可以| 418 | |isShadow|是否显示阴影|Boolean|true|true、false|-| 419 | |isRound|是否显示圆角|Boolean|true|true、false|-| 420 | |touchColor|日期单选选中的颜色|String|-|-|css\wxss支持的颜色都可以| 421 | |rangeStartColor|日期范围选择起始选中颜色|String|-|-|css\wxss支持的颜色都可以| 422 | |rangeColor|日期范围选中起始和结束之间的颜色|String|-|-|css\wxss支持的颜色都可以| 423 | |rangeEndColor|日期范围选择结束选中颜色|String|-|-|css\wxss支持的颜色都可以| 424 | |fontColor|字体颜色|String|-|-|css\wxss支持的颜色都可以| 425 | 426 | ### 5.事件 427 | |事件|说明|参数|参数类型|备注/注意| 428 | |-|-|-|-|-| 429 | |cancel|点击取消按钮触发|-|-|没有传参| 430 | |confirm|点击确定或选择完成时候触发|{detail: {*}}|Object|日期范围选择模式、日期单选模式参数不同，请看下面的代码| 431 | ```js 432 | /** 433 | * @description confirm事件的携带参数说明 434 | */ 435 | 436 | //为日期单选模式时 437 | { 438 | detail: { 439 | text: "2019-12-12", 440 | time: 111111 //时间戳 441 | } 442 | } 443 | 444 | //为日期范围选择模式时 445 | { 446 | detail: { 447 | begin: { 448 | text: "2019-12-12", 449 | time: 111111 450 | }, 451 | over: { 452 | text: "2019-12-13", 453 | time: 111111 454 | } 455 | } 456 | } 457 | ``` 458 | -------------------------------------------------------------------------------- /My-calendar/my-calendar.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | 3 | properties: { 4 | /** 5 | * @description 背景颜色 6 | */ 7 | background:{ 8 | type: String, 9 | value: "#fff", 10 | }, 11 | /** 12 | * @description 是否需要阴影 13 | */ 14 | isShadow: { 15 | type: Boolean, 16 | value: true, 17 | }, 18 | /** 19 | * @description 是否圆角 20 | */ 21 | isRound: { 22 | type: Boolean, 23 | value: true 24 | }, 25 | /** 26 | * @description 字体颜色 27 | */ 28 | fontColor: { 29 | type: String, 30 | value: "#000" 31 | }, 32 | /** 33 | * @description 日期单选模式下选中的日期颜色 34 | */ 35 | touchColor: { 36 | type: String, 37 | value: "#409efe" 38 | }, 39 | /** 40 | * @description 日期范围选择模式下，范围开始日期的颜色 41 | */ 42 | rangeStartColor: { 43 | type: String, 44 | value: "#409efe" 45 | }, 46 | /** 47 | * @description 日期范围选择模式下，处于范围之间的日期颜色 48 | */ 49 | rangeColor: { 50 | type: String, 51 | value: "#a0cfff" 52 | }, 53 | /** 54 | * @description 日期范围选择模式下，范围结束的日期颜色 55 | */ 56 | rangeEndColor: { 57 | type: String, 58 | value: "#409efe" 59 | }, 60 | /** 61 | * @deacription 标题 62 | */ 63 | title: { 64 | type: String, 65 | value: "标题" 66 | }, 67 | /** 68 | * @description 使用类型（范围选择还是仅选择日期） [ "touch" | "range" ] 69 | */ 70 | useType: { 71 | type: String, 72 | value: "range", 73 | observer: function(newV, oldV){ 74 | if(oldV != ""){ 75 | this.init(); 76 | } 77 | } 78 | }, 79 | /** 80 | * @description 是否启用年份切换 81 | */ 82 | isChangeYear: { 83 | type: Boolean, 84 | value: false 85 | }, 86 | /** 87 | * @description 确定按钮文字 88 | */ 89 | confirmText: { 90 | type: String, 91 | value: "确定" 92 | }, 93 | /** 94 | * @description 完成类型，分为选择出发完成 和 点击按钮出发完成 95 | */ 96 | confirmType: { 97 | type: String, 98 | value: "button",//可选button和end 99 | }, 100 | /** 101 | * @description 起始日期(useType === 'range'时可用) 102 | */ 103 | start: { 104 | type: String, 105 | value: "", 106 | observer: function(newV, oldV){ 107 | if(oldV != ""){//判断不让第一次初始化时候触发更新动作 108 | this.initRange(); 109 | } 110 | } 111 | }, 112 | /** 113 | * @description 结束日期(useType === 'range'时可用) 114 | */ 115 | stop: { 116 | type: String, 117 | value: "", 118 | observer: function(newV, oldV){ 119 | if(oldV != ""){//判断不让第一次初始化时候触发更新动作 120 | this.initRange(); 121 | } 122 | } 123 | }, 124 | /** 125 | * @description 最小选择日期 126 | */ 127 | min: { 128 | type: String, 129 | value: "" 130 | }, 131 | /** 132 | * @description 最大选择日期 133 | */ 134 | max: { 135 | type: String, 136 | value: "" 137 | }, 138 | /** 139 | * @description 指定可选日期（单选多选都可用） 140 | */ 141 | actives: { 142 | type: Array, 143 | value: null 144 | }, 145 | /** 146 | * @description 单选模式日期 147 | */ 148 | date: { 149 | type: String, 150 | value: "", 151 | observer: function(newV, oldV) { 152 | if (oldV != "" && this.properties.useType === "touch") { 153 | this.initTouch(); 154 | } 155 | } 156 | } 157 | 158 | }, 159 | 160 | data: { 161 | 162 | begin: 0,//选择开始日期时间戳 163 | over: 0,//选择结束日期时间戳 164 | touch: 0,//为单选模式时候选择的日期 165 | spacingNum: 0,//日历开头空格数量 166 | days: [],//当月日期数据 167 | nowDate: { 168 | text: "", 169 | Y: 0, 170 | M: 0 171 | }, 172 | activesChildType: null//单选模式下，actives传值子元素类型标记 173 | 174 | }, 175 | 176 | ready () { 177 | this.init(); 178 | }, 179 | 180 | methods: { 181 | 182 | /** 183 | * @description 初始化 184 | */ 185 | init () { 186 | //单选模式 187 | if(this.properties.useType === "touch"){ 188 | this.setData({type: "touch"}); 189 | this.initTouch(); 190 | } 191 | //范围选择模式 192 | if(this.properties.useType === "range"){ 193 | this.setData({ type: "range" }); 194 | this.initRange(); 195 | } 196 | }, 197 | 198 | /** 199 | * @description 单选初始化 200 | */ 201 | initTouch () { 202 | if(this.properties.date === ""){ 203 | this.setData({touch: ""}); 204 | this.setMonth(); 205 | }else{ 206 | if(!/^\d{4}-\d{2}-\d{2}$/.test(this.properties.date)){ 207 | console.warn("[日历组件警告] 要使date传参生效，其值必须为xxxx-xx-xx日期字符串"); 208 | this.setMonth(); 209 | this.getMonthData(); 210 | return; 211 | } 212 | const arr = this.properties.date.split("-"), 213 | date = new Date(arr[0], arr[1] - 1, arr[2]); 214 | this.setData({touch: date.getTime()}); 215 | this.setMonth(date.getFullYear(), date.getMonth()); 216 | } 217 | this.getMonthData(); 218 | }, 219 | 220 | /** 221 | * @description 范围选择初始化 222 | */ 223 | initRange () { 224 | //显示开始日期 225 | if(this.properties.start === ""){ 226 | this.setData({begin: 0}); 227 | this.setMonth(); 228 | }else{ 229 | if (!/^\d{4}-\d{2}-\d{2}$/.test(this.properties.start)) { 230 | throw new Error("[日历组件报错] start传参错误，必须为xxxx-xx-xx日期字符串"); 231 | } 232 | const arr = this.properties.start.split("-"), 233 | date = new Date(arr[0], arr[1] - 1, arr[2]); 234 | this.setData({begin: date.getTime()}); 235 | this.setMonth(date.getFullYear(), date.getMonth()); 236 | } 237 | //显示结束日期 238 | if(this.properties.stop === ""){ 239 | this.setData({over: 0}); 240 | }else{ 241 | if (!/^\d{4}-\d{2}-\d{2}$/.test(this.properties.stop)) { 242 | throw new Error("[日历组件报错] stop传参错误，必须为xxxx-xx-xx日期字符串"); 243 | } 244 | const arr = this.properties.stop.split("-"), 245 | date = new Date(arr[0], arr[1] - 1, arr[2]); 246 | if(date.getTime() <= this.data.begin){//结束小于等于开始 247 | this.setData({over: 0 }); 248 | }else{ 249 | this.setData({over: date.getTime() }); 250 | } 251 | } 252 | this.getMonthData(); 253 | }, 254 | 255 | /** 256 | * @description 设置当前显示月份 257 | * @param {Number} y 年份 258 | * @param {Number} m 月份 259 | */ 260 | setMonth (y, m) { 261 | if(y && m){ 262 | const 263 | obj = new Date(y, m, 1), 264 | Y = obj.getFullYear(), 265 | M = obj.getMonth() + 1 < 10 ? "0" + (obj.getMonth() + 1) : obj.getMonth() + 1; 266 | this.setData({ 267 | ["nowDate.text"]: `${Y}-${M}`, 268 | ["nowDate.Y"]: obj.getFullYear(), 269 | ["nowDate.M"]: obj.getMonth() + 1, 270 | }); 271 | }else{ 272 | const 273 | obj = new Date(), 274 | Y = obj.getFullYear(), 275 | M = obj.getMonth() + 1 < 10 ? "0" + (obj.getMonth() + 1) : obj.getMonth() + 1; 276 | this.setData({ 277 | ["nowDate.text"]: `${Y}-${M}`, 278 | ["nowDate.Y"]: obj.getFullYear(), 279 | ["nowDate.M"]: obj.getMonth() + 1, 280 | }); 281 | } 282 | }, 283 | 284 | /** 285 | * @description 月份切换 286 | */ 287 | addOrSubMonth ({target:{dataset:{status}}}) { 288 | const 289 | Y = this.data.nowDate.Y, 290 | M = this.data.nowDate.M; 291 | if(status === "+"){ 292 | if(M === 12){ 293 | this.setData({ 294 | ["nowDate.Y"]: Y + 1, 295 | ["nowDate.M"]: 1, 296 | ["nowDate.text"]: `${Y + 1}-${1}` 297 | }); 298 | }else{ 299 | this.setData({ 300 | ["nowDate.M"]: M + 1, 301 | ["nowDate.text"]: `${Y}-${M + 1}` 302 | }); 303 | } 304 | } 305 | if(status === "-"){ 306 | if(M === 1){ 307 | this.setData({ 308 | ["nowDate.Y"]: Y - 1, 309 | ["nowDate.M"]: 12, 310 | ["nowDate.text"]: `${Y - 1}-${12}` 311 | }); 312 | }else{ 313 | this.setData({ 314 | ["nowDate.M"]: M - 1, 315 | ["nowDate.text"]: `${Y}-${M - 1}` 316 | }); 317 | } 318 | } 319 | //执行获取天数的函数 320 | this.getMonthData(); 321 | }, 322 | 323 | /** 324 | * @description 年份切换 325 | */ 326 | addOrSubYear ({target:{dataset:{status}}}) { 327 | const 328 | Y = this.data.nowDate.Y, 329 | M = this.data.nowDate.M; 330 | if (status === "-"){ 331 | this.setData({ 332 | ["nowDate.Y"]: Y - 1, 333 | ["nowDate.text"]: `${Y - 1}-${M}` 334 | }); 335 | } 336 | if (status === "+"){ 337 | this.setData({ 338 | ["nowDate.Y"]: Y + 1, 339 | ["nowDate.text"]: `${Y + 1}-${M}` 340 | }); 341 | } 342 | //执行获取天数的函数 343 | this.getMonthData(); 344 | }, 345 | 346 | /** 347 | * @description 获取月份里数据 348 | */ 349 | getMonthData () { 350 | //获取当前选择的date对象 351 | const 352 | Y = this.data.nowDate.Y, 353 | M = this.data.nowDate.M, 354 | obj = new Date(Y, M - 1, 1); 355 | //获取并设置日历开头空格数量 356 | obj.setDate(1); 357 | const Day = obj.getDay(); 358 | if(Day > 6){ 359 | this.setData({spacingNum: 0}); 360 | }else{ 361 | this.setData({spacingNum: Day}); 362 | } 363 | //获取该月每天对象 364 | obj.setMonth( M );//这里的M已经加过1了 365 | obj.setDate(0); 366 | const 367 | dayNum = obj.getDate(), 368 | days = []; 369 | obj.setMonth(M - 1); 370 | for(let i = 0; i < dayNum; i++){ 371 | obj.setDate(i + 1); 372 | const day = { 373 | date: i + 1,//号数 374 | day: obj.getDay(),//星期几 375 | time: obj.getTime(),//毫秒时间戳 376 | type: "",//选中类型 377 | } 378 | days.push(day); 379 | } 380 | this.setData({days: days}); 381 | 382 | //执行设置min-max处理 383 | this.setMinMax(); 384 | //执行设置actives处理 385 | this.setActives(); 386 | //执行渲染样式 387 | this.renderStyle(); 388 | }, 389 | 390 | /** 391 | * @description 设置月份里mix-max选择范围 392 | */ 393 | setMinMax () { 394 | console.log(this.properties.actives); 395 | if (this.properties.actives && (this.properties.min || this.properties.max)) { 396 | this.throwErr("min、max属性不能跟actives属性同时使用"); 397 | return; 398 | } 399 | if(!this.properties.min && !this.properties.max){ 400 | return; 401 | } 402 | if(!/^\d{4}-\d{2}-\d{2}$/.test(this.properties.min) && this.properties.min != "now" && !this.properties.min != ""){ 403 | console.warn("min属性只能为日期字符串或'now'"); 404 | return; 405 | } 406 | if(!/^\d{4}-\d{2}-\d{2}$/.test(this.properties.max) && this.properties.max != ""){ 407 | console.warn("max属性只能为日期字符串"); 408 | return; 409 | } 410 | if(this.properties.min != "" && this.properties.max != ""){ 411 | let minArr = this.properties.min.split("-"), maxArr = this.properties.max.split("-"); 412 | if(new Date(minArr[0],minArr[1]-1, minArr[2]).getTime() >= new Date(maxArr[0], maxArr[1]-1, maxArr[2]).getTime() ){ 413 | console.warn("max不能小于或等于min"); 414 | return; 415 | } 416 | } 417 | let days = this.data.days; 418 | if(this.properties.min == "now"){ 419 | let nowDate = new Date(); 420 | nowDate.setHours(0); 421 | nowDate.setMinutes(0); 422 | nowDate.setSeconds(0); 423 | nowDate.setMilliseconds(0); 424 | let minTime = nowDate.getTime(), maxTime = ""; 425 | if(this.properties.max != ""){ 426 | let arr = this.properties.max.split("-"); 427 | maxTime = new Date(arr[0], arr[1] - 1, arr[2]).getTime(); 428 | } 429 | days.forEach(day=>{ 430 | if(day.time < minTime){ 431 | day.hide = true; 432 | } 433 | if(maxTime != ""){ 434 | if(day.time > maxTime){ 435 | day.hide = true; 436 | } 437 | } 438 | }); 439 | this.setData({days: days}); 440 | }else{ 441 | let minTime = "", maxTime = ""; 442 | if(this.properties.min != ""){ 443 | let arr = this.properties.min.split("-"); 444 | minTime = new Date(arr[0], arr[1] - 1, arr[2]).getTime(); 445 | } 446 | if(this.properties.max != ""){ 447 | let arr = this.properties.max.split("-"); 448 | maxTime = new Date(arr[0], arr[1] - 1, arr[2]).getTime(); 449 | } 450 | days.forEach(day=>{ 451 | if(minTime != ""){ 452 | if(day.time < minTime){ 453 | day.hide = true; 454 | } 455 | } 456 | if(maxTime != ""){ 457 | if(day.time > maxTime){ 458 | day.hide = true; 459 | } 460 | } 461 | }); 462 | this.setData({days: days});//更新days 463 | } 464 | }, 465 | 466 | /** 467 | * @description 设置月份里actives选择范围 468 | */ 469 | setActives () { 470 | if (this.properties.useType === "range" && this.properties.actives) { 471 | this.throwErr("actives属性只能用于日期单选模式"); 472 | return; 473 | } 474 | 475 | let actives = this.properties.actives; 476 | 477 | //检查参数，类型不对则退出执行，如果数组为空则全部不允许选择 478 | if (!(actives instanceof Array)) return; 479 | if (actives.length === 0) { 480 | let days = this.data.days; 481 | days.forEach(day=>{ 482 | day.hide = true; 483 | }); 484 | return; 485 | } 486 | 487 | //判断actives参数元素类型，并设置data中的标记； ‘xxxx-xx-xx’ or {date: xxxx-xx-xx, price: 123.00} 两种类型 488 | { 489 | let isString = true, isObj = true; 490 | for(let i of actives){ 491 | if(typeof i === "string"){ 492 | isObj = false; 493 | } 494 | if(typeof i === "object"){ 495 | isString = false; 496 | } 497 | } 498 | if(!isString && !isObj) { 499 | this.throwErr("actives传参子元素只能为日期字符串或对象，请参阅相关说明"); 500 | return; 501 | } 502 | if(isString) this.setData({activesChildType: "string"}); 503 | if(isObj) this.setData({activesChildType: "object"}); 504 | } 505 | 506 | //actives可能横跨多个月，截取当前所选择月份的actives元素,为后面的算法省时间 507 | let _actives = []; 508 | actives.forEach(date => { 509 | let _arr = [], _Y, _M, _D; 510 | if(this.data.activesChildType === "string"){ 511 | _arr = date.split("-"), _Y = _arr[0], _M = _arr[1], _D = _arr[2]; 512 | } 513 | if(this.data.activesChildType === "object"){ 514 | _arr = date.date.split("-"), _Y = _arr[0], _M = _arr[1], _D = _arr[2]; 515 | } 516 | if( (_Y == this.data.nowDate.Y) && (_M == this.data.nowDate.M) ){ 517 | _actives.push({dayNum: _D, text: date.text || ""}); 518 | } 519 | }); 520 | 521 | //设置当月actives 设置当月那些天与actives里的数据匹配，则可以选择，反之不可以选择 522 | let days = this.data.days, daysClone = JSON.parse(JSON.stringify(days)); 523 | days.forEach(day=>{day.hide = true});//当月所有天都先初始化为不可选择 524 | for (let i = 0; i < daysClone.length; i++) { // ！！！ 这个循环时间复杂度还可以优化，后面再考虑 525 | 526 | for (let j = 0; j < _actives.length; j++) { 527 | if (daysClone[i].date == _actives[j].dayNum) {//如果当月某天与_actives中的某天匹配，则将当月某天设置为可以选择，后续循环将不再匹配当月的这一天 528 | days[i].hide = false; 529 | this.data.activesChildType === "object" && (days[i].text = _actives[j].text); 530 | daysClone.splice(i, 1, null); 531 | break; 532 | } 533 | } 534 | 535 | } 536 | 537 | //更新days 538 | this.setData({days: days}); 539 | }, 540 | 541 | /** 542 | * @description 范围选择回调 543 | */ 544 | select ({target:{dataset:{index}}}) { 545 | //选择起点 546 | if(this.data.begin == 0 || this.data.over != 0){ 547 | this.setData({ 548 | begin: this.data.days[index].time, 549 | over: 0 550 | }); 551 | this.renderStyle(); 552 | } 553 | //选择结束点 554 | else{ 555 | //当选择的结束日期小于等于开始日期时，则重置开始日期为当前选择 556 | if(this.data.days[index].time <= this.data.begin){ 557 | this.setData({ 558 | begin: this.data.days[index].time, 559 | over: 0 560 | }); 561 | this.renderStyle(); 562 | return; 563 | } 564 | this.setData({over: this.data.days[index].time}); 565 | this.renderStyle(); 566 | 567 | //confirmType为end时触发事件流程处理 568 | if(this.properties.confirmType == "end"){ 569 | this.triggerEvent("confirm", { 570 | begin:{ 571 | text: this.timeToString(this.data.begin), 572 | time: this.data.begin 573 | }, 574 | over: { 575 | text: this.timeToString(this.data.over), 576 | time: this.data.over 577 | } 578 | }); 579 | } 580 | } 581 | }, 582 | 583 | /** 584 | * @description 单选选择回调 585 | */ 586 | touch ({ currentTarget: {dataset: {index}} }) { 587 | const time = this.data.days[index].time; 588 | this.setData({touch: time}); 589 | this.renderStyle(); 590 | 591 | //confirmType为end时触发confirm事件 592 | if(this.properties.confirmType == "end"){ 593 | this.triggerEvent("confirm", { 594 | text: this.timeToString(this.data.touch), 595 | time: this.data.touch 596 | }); 597 | } 598 | }, 599 | 600 | /** 601 | * @description confirm按钮回调 602 | */ 603 | confirm () { 604 | if(this.properties.type == "range"){ 605 | if(this.data.begin != 0 && this.data.over != 0){ 606 | this.triggerEvent("confirm", { 607 | begin: { 608 | text: this.timeToString(this.data.begin), 609 | time: this.data.begin 610 | }, 611 | over: { 612 | text: this.timeToString(this.data.over), 613 | time: this.data.over 614 | } 615 | }); 616 | } 617 | } 618 | if(this.properties.type == "touch"){ 619 | if(this.data.touch != 0){ 620 | this.triggerEvent("confirm", { 621 | text: this.timeToString(this.data.touch), 622 | time: this.data.touch 623 | }); 624 | } 625 | } 626 | }, 627 | 628 | /** 629 | * @description cancel按钮回调 630 | */ 631 | cancel () { 632 | //防止重新选择后，取消，造成选中不跟随数据 633 | if(this.properties.useType == "touch"){ 634 | this.initTouch(); 635 | } 636 | if(this.properties.useType == "range"){ 637 | this.initRange(); 638 | } 639 | this.triggerEvent("cancel"); 640 | }, 641 | 642 | /** 643 | * @description 渲染日历选择后样式 644 | */ 645 | renderStyle () { 646 | const 647 | begin = this.data.begin, 648 | over = this.data.over, 649 | arr = this.data.days; 650 | 651 | //范围选择模式时 652 | if (this.properties.type == "range") { 653 | /*仅选择开始的时候*/ 654 | if (begin != 0 && over == 0) { 655 | for (let i of arr) { 656 | i.type = ""; 657 | if (i.time == begin) { 658 | i.type = "start-only"; 659 | } 660 | } 661 | this.setData({ days: arr }); 662 | } 663 | /*都选择的时候*/ 664 | if (begin != 0 && over != 0) { 665 | for (let i of arr) { 666 | //每个日期在开始与结束范围之间的样式 667 | if (i.time < this.data.over && i.time > this.data.begin) { 668 | //日期框为星期6时（位置在最右侧） 669 | if (i.day === 6) { 670 | if (i.date === 1) { 671 | i.type = "range-center"; 672 | } else { 673 | i.type = "range-right"; 674 | } 675 | } 676 | //日期框为星期天时（位置在最左侧） 677 | else if (i.day === 0) { 678 | if(i.date === arr.length){ 679 | i.type = "range-center"; 680 | }else{ 681 | i.type = "range-left"; 682 | } 683 | } 684 | //日期为1号时 685 | else if(i.date === 1){ 686 | i.type = "range-left"; 687 | } 688 | //日期为该月随后一天时 689 | else if(i.date === arr.length){ 690 | i.type = "range-right"; 691 | } 692 | //以上都不是，则设置为range 693 | else{ 694 | i.type = "range"; 695 | } 696 | } 697 | //设置开头样式 698 | if (i.time == this.data.begin) { 699 | if(i.day === 6){//如果开始处于星期六（最后一个） 700 | i.type = "start-only"; 701 | } 702 | else if (i.date == this.data.days.length) {//如果开始处于月末（月最后一个） 703 | i.type = "start-only"; 704 | }else{ 705 | i.type = "start"; 706 | } 707 | } 708 | //设置结束样式 709 | if (i.time == this.data.over) { 710 | if(i.day === 0){//如果结束为星期天（第一个） 711 | i.type = "stop-only"; 712 | } 713 | else if (i.day === 6 && i.date == 1) {//如果1号为星期六时 714 | i.type = "stop-only"; 715 | }else{ 716 | i.type = "stop"; 717 | } 718 | } 719 | } 720 | this.setData({days: arr}); 721 | } 722 | } 723 | //单选模式时候 724 | if (this.properties.type == "touch") { 725 | arr.forEach(day=>{ 726 | day.type = ""; 727 | if(day.time == this.data.touch){ 728 | //actives传参子元素为object的时候，就显示成方形样式（因为要显示价格参数） 729 | if(this.data.activesChildType === "object"){ 730 | day.type = "actives-point"; 731 | } 732 | //否则按照正常的单选选中样式处理 733 | else{ 734 | day.type = "point"; 735 | } 736 | } 737 | }); 738 | this.setData({days: arr}); 739 | } 740 | }, 741 | 742 | /** 743 | * @description 时间戳转日期字符串 744 | * @param {String|Number} 时间戳 745 | * @return {String} 日期时间字符串；如：xxxx-xx-xx 746 | */ 747 | timeToString (time) { 748 | const 749 | date = new Date(Number(time)), 750 | Y = date.getFullYear(), 751 | M = date.getMonth()+1 < 10 ? "0"+(date.getMonth()+1) : date.getMonth()+1, 752 | D = date.getDate()<10 ? "0"+date.getDate() : date.getDate(); 753 | return `${Y}-${M}-${D}`; 754 | }, 755 | 756 | /** 757 | * @desciption 抛错函数 758 | * @param {String} msg 错误信息 759 | */ 760 | throwErr (msg) { 761 | if (!msg) return; 762 | console.error("[my-calendar组件报错] " + msg); 763 | } 764 | 765 | } 766 | 767 | }); --------------------------------------------------------------------------------