vue自定义日期选择，类似美团日期选择，日历控件，vue日历区间选择
程序员文章站
2022-10-04 10:49:24
一个日历的控件，基于vue的，可以日历区间选择，可用于酒店日历区间筛选，动手能力强，可以修改成小程序版本的，先上效果图 里面的颜色样式都是可以修改的 选择范围效果 话不多说，直接上干货，代码可以直接复制访问 1 2 3 ......
一个日历的控件，基于vue的，可以日历区间选择，可用于酒店日历区间筛选，动手能力强，可以修改成小程序版本的，先上效果图
里面的颜色样式都是可以修改的
选择范围效果
话不多说，直接上干货，代码可以直接复制访问
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
6 <meta name="renderer" content="webkit">
7 <title></title>
8 </head>
9 <style>
10 html,body{padding:0;margin:0;height:100%;}
11 .header{
12 width:100%;
13 height:40px;
14 text-align: center;
15 position: relative;
16 line-height: 40px;
17 }
18 .body{
19 width: 100%;
20 height:87%;
21 height: -moz-calc(100% - 80px);
22 height: -webkit-calc(100% - 80px);
23 height: calc(100% - 80px);
24 overflow-y: auto;
25 position:absolute;
26 }
27 .golbal-left{
28 width: 13px;
29 height: 13px;
30 border-top: 2px solid gainsboro;
31 border-right: 2px solid gainsboro;
32 transform: rotate(225deg);
33 -webkit-transform: rotate(225deg);
34 position: absolute;
35 left: 16px;
36 top: 15px;
37 }
38 .calendar {
39 width: 100vw;
40 text-align: center;
41 }
42 .week-title {
43 overflow: hidden;
44 position: fixed;
45 margin-bottom: 1.5rem;
46 background-color: #f6f6f8;
47 z-index: 2;
48 }
49 .week-title>div {
50 width: 14.28vw;
51 height: 2rem;
52 line-height: 2rem;
53 float: left;
54 }
55 .box {
56 position: absolute;
57 top: 2rem;
58 z-index: 1;
59 }
60 .data-title {
61 height: 2rem;
62 line-height: 2rem;
63 border-top: 1px solid #ededed;
64 border-bottom: 1px solid #ededed;
65 clear: both;
66 }
67 .calendar-data {
68 width: 100vw;
69 clear: both;
70 }
71 .day {
72 width: 14.28vw;
73 height: 3rem;
74 line-height: 1.6rem;
75 float: left;
76 display: flex;
77 flex-direction: column;
78 }
79 .day.disabled{
80 color:#ddd;
81 }
82 .active-start {
83 color: white;
84 background-color: #30b6af;
85 }
86 .active-start::after {
87 content: '入住';
88 font-size: .5rem;
89 }
90 .active {
91 color: white;
92 background-color: rgba(63,182,175,.5);
93 }
94 .active-end {
95 color: white;
96 background-color: #30b6af;
97 position: relative;
98 }
99 .active-end::after {
100 content: '离开';
101 font-size: .5rem;
102 }
103 .active-end i{
104 position: absolute;
105 top:-120%;
106 width:100%;
107 height:100%;
108 background:rgba(0,0,0,1);
109 opacity:0.6;
110 border-radius:8px;
111 display: flex;
112 align-items: center;
113 justify-content: center;
114 font-style: normal;
115 font-size: 15px;
116 color:#fff;
117 }
118 .active-end i::after{
119 position: absolute;
120 content: '';
121 float: left;
122 width: 0;
123 height: 0;
124 border-width: 10px;
125 border-style: solid;
126 border-color:#000 transparent transparent transparent;
127 opacity:1;
128 bottom:-20px;
129 left:50%;
130 margin-left:-10px;
131 }
132 .screenbottom{
133 height:35px;
134 width:100%;
135 display: flex;
136 }
137 .reset{
138 width:50%;
139 height:40px;
140 line-height: 40px;
141 color:#3e3e3e;
142 text-align: center;
143 background: #fff;
144 }
145 .determine{
146 width:50%;
147 height:40px;
148 line-height: 40px;
149 background: #48d8bf;
150 color:#fff;
151 text-align: center;
152 }
153 footer{
154 position: fixed;
155 bottom:0;
156 width:100%;
157 }
158 [v-cloak]
159 {
160 display: none;
161 }
162 </style>
163 <body>
164 <div id='app' v-cloak>
165 <header class="header">
166 <span>时间范围</span>
167 </header>
168 <div class="body">
169 <div class='calendar'>
170 <div class='week-title'>
171 <div>日</div>
172 <div>一</div>
173 <div>二</div>
174 <div>三</div>
175 <div>四</div>
176 <div>五</div>
177 <div>六</div>
178 </div>
179 <div class='box'>
180 <div class='calendar-body'>
181 <div v-for="(item,index) in calendar">
182 <!-- 标题 -->
183 <div class='data-title'>
184 {{item.fullyear + '年' + item.fullmonth+'月'}}
185 </div>
186 <!-- 日期 -->
187 <div class='calendar-data'>
188 <div class="day"
189 :class="item2.disabled + ' '+ item2.disabled2 + ' ' +item2.start_date + ' ' + item2.end_date +' ' + item2.active_date"
190 v-for="(item2,index) in item.days"
191 @click="selectdate(item2)">
192 {{item2.day}}
193 </div>
194 </div>
195 </div>
196 </div>
197 </div>
198 </div>
199 </div>
200 <footer>
201 <div class="screenbottom">
202 <div class="reset">取消</div>
203 <div class="determine">确定</div>
204 </div>
205 </footer>
206 </div>
207 </body>
208 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
209 <script type="text/javascript">
210 let vm = new vue({
211 el:'#app',
212 data:{
213 start:'', //开始时间。从当天开始。
214 calendar:[],
215 month_length: 6, //最长预定多少个月后的房间 读取总店配置。
216 max_reserve_days: 0, //最长预定天数。，一个月按30天计划
217 max_reserve_date: '', //最长可预定的日期。例如：2019-09-12
218 select_start_ymd : '', //入住开始提交时间 例如：2019-5-8
219 select_start_show: '', //入住开始显示时间 例如：05月08日
220 select_end_ymd: '', //离店开始提交时间 例如：2019-5-8
221 select_end_show: '', //离店开始显示时间 例如：05月08日
222 select_index:'start', //记录当前点击时间，所对应的时间是开始时间还是结束时间
223 select_all_day:''
224 },
225 methods:{
226 initdate:function(){
227 var _this = this;
228 // 创建时间对象
229 let date = new date();
230 //如果当前时间为凌晨6点前。则当前日期往前一天
231 if (date.gethours() < 6) {
232 date = new date(date.gettime() - 86400 * 1000);
233 }
234 // 获取完整年月
235 let fulldate = [
236 date.getfullyear(),
237 date.getmonth() + 1,
238 date.getdate(),
239 date.getfullyear() + '-' + (date.getmonth() + 1) + '-' + date.getdate()
240 ];
241 /**
242 * 从缓存拿已经设置的开始和结束日期
243 * 如果第一次用户是第一次进入。则设置默认值为,并且保存进缓存。
244 */
245 var select_start_ymd = '';
246 var select_start_ymd_show = '';
247 var select_end_ymd = '';
248 var select_end_ymd_show = '';
249
250 if (select_start_ymd == '' || select_start_ymd == undefined || select_start_ymd == 'undefined' || _this.comparedate(select_start_ymd, fulldate[3]) == 3) {
251 select_start_ymd = date.getfullyear() + '-' + (date.getmonth() + 1) + '-' + date.getdate();
252 select_start_ymd_show = _this.parsemonth(date.getmonth() + 1) + '月' + _this.parseday(date.getdate()) + '日';
253 }
254
255 if (select_end_ymd == '' || select_end_ymd == undefined || select_end_ymd == 'undefined' || _this.comparedate(select_end_ymd, fulldate[3]) == 3) {
256 let temp_date = new date(date.gettime() + 86400 * 1000)
257 select_end_ymd = temp_date.getfullyear() + '-' + (temp_date.getmonth() + 1) + '-' + temp_date.getdate();
258 select_end_ymd_show = _this.parsemonth(temp_date.getmonth() + 1) + '月' + _this.parseday(temp_date.getdate()) + '日';
259 }
260 //设置数据。并且保存缓存
261 _this.select_start_ymd = select_start_ymd
262 _this.select_end_ymd = select_end_ymd
263
264 //通过月份。计划最长可预定天数和日期 ,最后一天为离店时间。所以多加一天可选择
265 let max_reserve_days = _this.month_length * 30 + 1;
266
267 //最大天数转换成毫秒数。再转换成时间
268 let max_date = new date(date.gettime() + max_reserve_days * 24 * 60 * 60 * 1000);
269 let max_reserve_date = max_date.getfullyear() + '-' + (max_date.getmonth() + 1) + '-' + max_date.getdate() + '';
270 _this.max_reserve_days = max_reserve_days
271 _this.max_reserve_date = max_reserve_date
272
273 //获取当前月份完整日期天数
274 let cur_month_date = new date(fulldate[0] + '-' + _this.parsemonth(fulldate[1]) + '-01')
275 let cur_month = {};
276 cur_month.fullyear = fulldate[0]; // 年
277 cur_month.fullmonth = fulldate[1]; //月
278 cur_month.daylength = _this.getmonthdays(cur_month.fullmonth, cur_month.fullyear);//当前月份总共有多少天
279 cur_month.firstdayweek = cur_month_date.getday(); //当前月份第一天星期几0~7
280 cur_month.curday = date.getdate(); //当前天
281 cur_month.days = [];
282 //初始化天数
283 var item = {};
284 for (let i = 1; i <= cur_month.daylength; i++) {
285 item = {
286 ymd: cur_month.fullyear + '-' + cur_month.fullmonth + '-' + i,
287 ymd_cn: _this.parsemonth(cur_month.fullmonth) + '月' + _this.parseday(i) + '日',
288 day: i,
289 disabled: i < cur_month.curday ? 'disabled' : '',
290 };
291 //开始时间
292 item.start_date = _this.comparedate(_this.select_start_ymd, item.ymd) == 2 ? 'active-start' : '';
293 //中间的日期
294 item.active_date = (_this.comparedate(_this.select_start_ymd, item.ymd) == 3 && _this.comparedate(_this.select_end_ymd, item.ymd) == 1) ? 'active' : '';
295 //结束时间
296 item.end_date = _this.comparedate(_this.select_end_ymd, item.ymd) == 2 ? 'active-end' : '';
297 //超过设置最长日期。禁止选择
298 item.disabled2 = _this.comparedate(max_reserve_date, item.ymd) == 3 ? 'disabled' : '';
299 cur_month['days'].push(item);
300 }
301
302 //前补0
303 if (cur_month.firstdayweek > 0) {
304 for (let i = 0; i < cur_month.firstdayweek; i++) {
305 cur_month['days'].unshift('');
306 }
307 }
308
309 _this.calendar.push(cur_month)
310
311 var next_month_date;
312 var nextfulldate = [];
313 for (let i2 = 0; i2 < _this.month_length; i2++) {
314 //下一个朋的天数信息
315 next_month_date = new date(fulldate[0], fulldate[1] + i2, '1');
316 nextfulldate = [
317 next_month_date.getfullyear(),
318 next_month_date.getmonth() + 1,
319 ]
320 var next_month = {};
321 next_month.fullyear = nextfulldate[0]; // 年
322 next_month.fullmonth = nextfulldate[1]; //月
323 next_month.daylength = _this.getmonthdays(next_month.fullmonth, next_month.fullyear);//当前月份总共有多少天
324 next_month.firstdayweek = next_month_date.getday(); //当前月份第一天星期几0~6
325 next_month.days = [];
326 //初始化天数
327 for (let i = 1; i <= next_month.daylength; i++) {
328 item = {
329 ymd: next_month.fullyear + '-' + next_month.fullmonth + '-' + i,
330 ymd_cn: _this.parsemonth(next_month.fullmonth) + '月' + _this.parseday(i) + '日',
331 day: i,
332 active: '',
333 disabled: '',
334 };
335 //开始时间
336 item.start_date = _this.comparedate(_this.select_start_ymd, item.ymd) == 2 ? 'active-start' : '';
337 //中间的日期
338 item.active_date = (_this.comparedate(_this.select_start_ymd, item.ymd) == 3 && _this.comparedate(_this.select_end_ymd, item.ymd) == 1) ? 'active' : '';
339 //结束时间
340 item.end_date = _this.comparedate(_this.select_end_ymd, item.ymd) == 2 ? 'active-end' : '';
341 //超过设置最长日期。禁止选择
342 item.disabled2 = _this.comparedate(max_reserve_date, item.ymd) == 3 ? 'disabled' : '';
343 next_month['days'].push(item);
344 }
345 //前补0
346 if (next_month.firstdayweek > 0) {
347 for (let i = 0; i < next_month.firstdayweek; i++) {
348 next_month['days'].unshift('');
349 }
350 }
351 _this.calendar.push(next_month)
352 }
353 console.log(_this.calendar);
354 },
355 //格式月份期
356 parsemonth: function(month){
357 month = parseint(month);
358 if(month <10){
359 month = '0'+month
360 }
361 return month;
362 },
363
364 //格式天
365 parseday: function (day) {
366 day = parseint(day);
367 if (day < 10) {
368 day = '0' + day
369 }
370 return day;
371 },
372 // 获取每个月的天数
373 getmonthdays(m, year) {
374 let days = [0, 31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
375 if (m != 2) {
376 return days[m];
377 }
378 if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0 && year % 100 === 0)) {
379 return 29
380 } else {
381 return 28
382 }
383 },
384 comparedate(date1, date2){
385 var dateone = date1.replace(/-/g,'/');
386 var datetwo = date2.replace(/-/g,'/');
387 var odate1 = new date(dateone)
388 var odate2 = new date(datetwo)
389 if(odate1.gettime() > odate2.gettime()){
390 return 1; //大于
391 } else if (odate1.gettime() == odate2.gettime()) {
392 return 2; //等于
393 }else{
394 return 3; //小于
395 }
396 },
397 //点击日期按钮
398 selectdate:function(item){
399 var _this = this;
400 let select_data = item;
401 console.log(select_data)
402 let select_start_ymd = _this.select_start_ymd;
403 let select_end_ymd = _this.select_end_ymd;
404 //如果是点击不能用的地址
405 if (select_data.disabled != ''){
406 return false;
407 }
408 if (_this.select_index == 'start') {
409 select_start_ymd = select_data.ymd;
410 //如果选择的日期。是当前日期。或者比当前开始日期还早的。就 要把当前日期变为开始日期
411
412 _this.select_start_ymd = select_start_ymd;
413 _this.select_start_ymd_show = select_data.ymd_cn;
414 _this.select_end_ymd = '';
415 _this.select_end_ymd_show = '';
416
417 //将索引改为结束时间
418
419 _this.select_index = 'end';
420
421 } else if (_this.select_index == 'end'){
422 let v = _this.comparedate(select_start_ymd, select_data.ymd)
423 //如果选择的时间大于开始时间。则有效。否则重置开始时间
424 if(v == 3 ){
425 _this.select_end_ymd = select_data.ymd;
426 _this.select_end_ymd_show = select_data.ymd_cn;
427 //将索引改为结束时间
428 _this.select_index = 'start';
429 //保存数据到缓存
430 _this.savedate();
431 }else{
432 _this.select_start_ymd = select_data.ymd;
433 _this.select_start_ymd_show = select_data.ymd_cn;
434 _this.select_end_ymd = '';
435 _this.select_end_ymd_show = '';
436 //将索引改为结束时间
437 _this.select_index = 'end';
438 }
439
440 }
441 _this.resetcalendar();
442 },
443 //重新计算一下日历
444 resetcalendar:function(){
445 let _this = this;
446 let calendar = _this.calendar;
447 if(calendar.length > 0 ){
448 for (var i in calendar){
449 if(calendar[i]['days'].length > 0 ){
450 for (var i2 in calendar[i]['days']) {
451 if (calendar[i]['days'][i2] != ''){
452 //开始时间
453 calendar[i]['days'][i2]['start_date'] = _this.comparedate(_this.select_start_ymd, calendar[i]['days'][i2]['ymd']) == 2 ? 'active-start' : '';
454 //中间的日期
455 calendar[i]['days'][i2]['active_date'] = (_this.comparedate(_this.select_start_ymd, calendar[i]['days'][i2]['ymd']) == 3 && _this.comparedate(_this.select_end_ymd, calendar[i]['days'][i2]['ymd']) == 1) ? 'active' : '';
456 //结束时间
457 calendar[i]['days'][i2]['end_date'] = _this.comparedate(_this.select_end_ymd, calendar[i]['days'][i2]['ymd']) == 2 ? 'active-end' : '';
458 }
459 }
460 }
461 }
462 }
463
464 _this.calendar = calendar;
465 },
466 //如果设置结束时间成功。保存一次当前时间。并且计算总天数。到缓存中
467 savedate:function(){
468 var _this = this;
469 var date1 = new date(this.select_start_ymd.replace(/-/g,'/'));
470 var date2 = new date(this.select_end_ymd.replace(/-/g,'/'));
471 //计算天数
472 var days = parseint((date2.gettime() - date1.gettime()) / 1000 / 86400);
473 //保存缓存
474 _this.select_all_day = days;
475 }
476 },computed:{
477
478 },mounted(){
479 var _this = this;
480 _this.$nexttick(function () {
481 _this.initdate()
482 })
483 }
484 })
485 </script>
486 </html>
里面的备注很清晰，需要存起来下个页面用可以在savedate这个函数中存进去localstorage中。
案例除了vue不基于任何插件，可以自定义修改，自定义程度高
上一篇： Vuex细说