VUE自定义(有限)库存日历插件
开发过程中遇到一个令人发指的，一个element-ui无法满足的日历需求， 改造其日历插件的代价太大，于是索性自己手写一个，需求如下:
1. 根据开始、结束时间计算时间覆盖的月份，渲染有限的可选择日期
2. 日期下显示每日库存，库存为0的日期不可选择，同时不可作为中间日期被包含选择
3. 根据传入的默认选择日期初始化选择状态，若没有传入默认选择日期，初始化选择开始与结束时间
3. 其余功能与正常日历插件相同
基本思路： 1. 根据传入日期列表的开始与结束时间计算一共有几个月份，根据月份生成数组，数组内存放每月的覆盖天数，
2. 遍历月份数组 ，计算当前月份的一号是周几，根据这个补全当月时间，设置每天的选择状态（0：未选择，1：连带选择，2：被点击选择）为0，并初始化每个覆盖天数的库存，补全的其余天数库存设为0
3. 将每月补全的数据放入新数组，作为渲染每月Tab页的数据源
4. 设置全局的开始与结束日期的选择状态，点击日期，判断设置开始日期选择状态为false,则记录开始时间并将状态设置为true，若开始日期状态为true则记录结束日期并设置结束日期选择状态为true，若结束日期状态为true则关闭选择框，并为父组件的开始与结束时间重新赋值
5. 每次开启选择框则设置开始与结束日期选择状态为false
插件使用：
<data-picker :datedata="planDateList" :initstartdate='initstartdate' :initenddate='initenddate' :startdate='saleDate[0]' :enddate='saleDate[1]' :planid='resSalePlanId'></data-picker>
效果图 ：
插件代码如下：
1 Vue.component('data-picker', {
2 props: [
3 'datedata',
4 'startdate',
5 'enddate',
6 'planid',
7 'initstartdate',
8 'initenddate'
9 ],
10 data: function () {
11 return {
12 currentDay: 1,
13 currentMonth: 1,
14 premonthDays: 0,
15 currentYear: 2002,
16 currentWeek: 1,
17 days: [],
18 daysTemplate: [01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
19 monthCountArr: [31,29,31,30,31,30,31,31,30,31,30,31],
20 index: 0,
21 startWeekNum: 1,
22 monthArr: [],
23 monthDataArr:[],//整月数据
24 startDate: '',
25 startDateFlag: false,
26 startIndex: 0,
27 endDate: '',
28 endDateFlag: false,
29 endIndex: 0,
30 selStartMonthIndex: 0,
31 selEndMonthIndex: 0,
32 show: false,
33 errorFlag: true,//选择库存错误标志
34 allMonthData:[],//存放所有月份处理过后的数据
35 allMonthData:[],//存放所有月份处理过后的数据
36
37 }
38 },
39 mounted: function() { //在vue初始化时调用
40 this.initData();
41 },
42 component:{},
43 methods: {
44 initData: function(){
45 this.monthArr = []
46
47 this.startDate = this.startdate;
48 this.endDate = this.enddate;
49 //计算出有几个月 [{11:'11',days:['2-18-10-22']},{}]
50 var dateArr = this.datedata,
51 obj = {},
52 count = 0;
53 //按月份分组放数据
54 for(var i=0; i<dateArr.length;i++){
55 var month = dateArr[i].startDate.split("-")[1];
56 if(!obj[month]){
57 count++;
58 obj[month] = month;
59 var dateObj = {};
60 //dateObj.leftAmount = dateArr[i].leftAmount;
61 dateObj.days = [];
62 dateObj.days.push({date:dateArr[i].startDate, leftAmount:dateArr[i].leftAmount, hasAmount: true});
63 dateObj[month] = month;
64 this.monthArr.push(dateObj);
65 }else{
66 this.monthArr[count-1].days.push({date:dateArr[i].startDate, leftAmount:dateArr[i].leftAmount, hasAmount: true})
67 }
68 }
69 //console.log(this.monthArr);
70
71 //初始化所有月数据
72 for(var m=0; m<this.monthArr.length;m++){
73 this.getCurMonthData(m);
74 }
75
76 //this.getCurMonthData(this.index);
77
78 //初始化选择
79 var start='',end='';
80 this.startDateFlag = false;
81 this.endDateFlag = false;
82 if(this.initstartdate && this.initenddate ){//有初始值
83 start = this.initstartdate;
84 end = this.initenddate;
85 }else{
86 start = this.startDate;
87 end = this.endDate;
88 }
89 for(var j=0; j<this.allMonthData.length; j++){
90 for(var k=0; k<this.allMonthData[j].length; k++){
91
92 if(this.allMonthData[j][k].date == start){
93 this.index = j;
94 this.monthDataArr = this.allMonthData[j];
95 this.selectDay(k, this.allMonthData[j][k]);
96 }
97 if(this.allMonthData[j][k].date == end){
98 this.index = j;
99 this.monthDataArr = this.allMonthData[j];
100 this.selectDay(k, this.allMonthData[j][k]);
101 break;
102 }
103 }
104
105 }
106
107 //初始化第一页
108 this.index = 0;
109 this.currentMonth = this.monthArr[0].days[0].date.split("-")[1];
110 this.currentYear = this.monthArr[0].days[0].date.split("-")[0];
111 this.monthDataArr = this.allMonthData[0];
112 this.show = false;
113 },
114 pickPre: function(currentYear,currentMonth,index){
115 if(this.index >0){
116 this.index--;
117 if(!this.allMonthData[this.index]){//allMonthData
118 //更新数据
119 this.getCurMonthData(this.index);
120 }else{
121 this.currentMonth = this.monthArr[this.index].days[0].date.split("-")[1];
122 this.currentYear = this.monthArr[this.index].days[0].date.split("-")[0];
123 this.monthDataArr = this.allMonthData[this.index];
124 //重置其他月份的选择状态
125 //this.clearSelect(this.index);
126 }
127 }else{
128 return;
129 }
130 },
131 pickNext: function(currentYear,currentMonth,index){
132 if(this.index < this.monthArr.length-1){
133 this.index++;
134 if(!this.allMonthData[this.index]){//allMonthData
135 //更新数据
136 this.getCurMonthData(this.index);
137 }else{
138 this.currentMonth = this.monthArr[this.index].days[0].date.split("-")[1];
139 this.currentYear = this.monthArr[this.index].days[0].date.split("-")[0];
140 this.monthDataArr = this.allMonthData[this.index];
141 //重置其他月份的选择状态
142 //this.clearSelect(this.index);
143 }
144 }else{
145 return;
146 }
147 },
148 //重置其他月份的选择状态
149 clearSelect: function(curIndex){
150 for(var i=0; i<this.allMonthData.length; i++){
151 if(i !== curIndex){
152 for(var j=0; j<this.allMonthData[i].length; j++){
153 this.allMonthData[i][j].selectStatus = 0;
154 }
155 }
156 }
157 },
158 //根据当前选择月份整理数据 index
159 getCurMonthData: function(index){
160 this.currentMonth = this.monthArr[index].days[0].date.split("-")[1];
161 this.currentYear = this.monthArr[index].days[0].date.split("-")[0];
162
163 //判断是否是闰年
164 if(this.isLeapYear(this.currentYear)){
165 this.monthCountArr = [31,28,31,30,31,30,31,31,30,31,30,31];
166 }else{
167 this.monthCountArr = [31,29,31,30,31,30,31,31,30,31,30,31];
168 }
169
170 //计算当前月的第一天是周几 dateArr[0].startDate
171 this.startWeekNum = this.getStartWeekNum(this.monthArr[index].days[0].date);
172
173 //初始化当前默认月的天数
174 var monthDays = this.monthCountArr[parseInt(this.currentMonth)-1];
175 this.days = this.daysTemplate.slice(0,monthDays);
176 //获取前一个月有多少天
177 this.premonthDays=0;
178 if(this.currentMonth == 1){
179 this.premonthDays = 31;
180 }else{
181 this.premonthDays = this.monthCountArr[parseInt(this.currentMonth)-2];
182 }
183
184 //处理整月数据并格式化当前月的日期 31 -- 2018-10-31
185 for(var n=0;n<this.days.length; n++){
186 this.days[n] = this.currentYear + '-' + this.currentMonth + '-' + (this.days[n] > 9 ? this.days[n] : '0'+ this.days[n]);
187 }
188 //初始化当前框的日期数组 比如: 一号在周四 则数组前加入 28,29,30,31 或 27,28,29,30 或,26,27,28,29 或25,26,27,28
189 for(var k=parseInt(this.startWeekNum); k>0; k--){
190 this.days.unshift( (this.currentMonth == 1 ? this.currentYear-1 : this.currentYear) + '-' + (this.currentMonth == 1 ? 12 : this.currentMonth-1) + '-' + (this.daysTemplate[this.premonthDays-k] > 9 ? this.daysTemplate[this.premonthDays-k] : '0'+this.daysTemplate[this.premonthDays-k]) )
191 }
192 //console.log(this.days);
193 //处理形成整月数据
194 this.handelTheMonthData(this.days,this.monthArr,index);
195 },
196 //处理形成整月数据 monthDataArr
197 handelTheMonthData: function(days,monthArr,index){
198
199 this.monthDataArr = [];
200 var curMonthData = this.monthArr[index].days;
201 for(var n=0;n<days.length; n++){
202 var obj={},flag = false,leftAmount=0;
203 for(var m=0; m<curMonthData.length; m++){
204 if(new Date(curMonthData[m].date).getTime() == new Date(days[n]).getTime() ){//当前日期存在库存
205 flag = true;
206 leftAmount = curMonthData[m].leftAmount;
207 }
208 }
209 if(flag){
210 obj.date = days[n];
211 obj.leftAmount = leftAmount;
212 obj.selectStatus = 0; //0:未选择 1:连带选择 2:被选中
213 this.monthDataArr.push(obj);
214 }else{
215 obj.date = days[n];
216 obj.leftAmount = 0;
217 obj.selectStatus = 0; //0:未选择 1:连带选择 2:被选中
218 this.monthDataArr.push(obj);
219 }
220 }
221 this.allMonthData[index] = this.monthDataArr;
222 //console.log(this.allMonthData);
223 return this.monthDataArr;
224
225 },
226 //计算当前月的第一天是周几
227 getStartWeekNum: function(date){
228 var date = new Date(date);
229 date.setDate(1);
230 //console.log(date.getDay())
231 return date.getDay();
232 },
233 //判断是否是闰年
234 isLeapYear: function(year){
235 if((year%4==0 && year%100!=0) || year%400==0){
236 return true;
237 }else{
238 return false;
239 }
240 },
241 pickUp: function(){
242 this.show = !this.show;
243 this.startDateFlag = false;
244 this.endDateFlag = false;
245 },
246 selectDay: function(index,dayobject){//this.startDate this.endDate
247 //判断当前是否可点击
248 if(dayobject.leftAmount == 0){
249 return;
250 }
251 //console.log(dayobject);
252
253 self.errorFlag = true;
254 //初始化各日期selectStatus值
255 for(var i=0; i<this.monthDataArr.length; i++){
256 this.monthDataArr[i].selectStatus = 0;
257 }
258
259 if(this.startDateFlag){
260 this.endDate = dayobject.date;
261 this.endDateFlag = true;
262 this.endIndex = index;
263 this.selEndMonthIndex = this.index;
264 }else{
265 this.startDate = dayobject.date;
266 this.startDateFlag = true;
267 this.startIndex = index;
268 this.selStartMonthIndex = this.index;
269 //重置其他月份的选择状态
270 this.clearSelect(this.index);
271 }
272 //设置selectStatus值 :class="{{"select":(dayobject.selectStatus == 2),"subSelect":(dayobject.selectStatus == 1) }}"
273 this.monthDataArr[index].selectStatus = 2;
274
275 if(this.endDateFlag){//判断是否可连续选择 计算连续时间 若可连续设置selectStatus值 关闭弹窗
276 //判断大小是否颠倒
277 if(this.selStartMonthIndex > this.selEndMonthIndex || (this.selStartMonthIndex==this.selEndMonthIndex && this.startIndex>this.endIndex) ){
278 var box,dateBox,indexBox;
279 box = this.selStartMonthIndex;
280 this.selStartMonthIndex = this.selEndMonthIndex;
281 this.selEndMonthIndex = box;
282
283 indexBox = this.startIndex;
284 this.startIndex = this.endIndex;
285 this.endIndex = indexBox;
286
287 dateBox = this.startDate;
288 this.startDate = this.endDate;
289 this.endDate = dateBox;
290 }
291
292 //判断是否跨月
293 var startMonth = this.startDate.split("-")[1];
294 if(this.selEndMonthIndex !== this.selStartMonthIndex){//不同月 startMonth !== this.currentMont
295 //获取开始月的index 开始月到月尾 开始月到结束月的中间月的全部 以及结束月到点击时间 selectStatus变为1
296 for(var i=this.selStartMonthIndex; i<this.selEndMonthIndex+1; i++){
297 for(var j=0; j<this.allMonthData[i].length; j++){
298
299 // if(this.allMonthData[i][j].leftAmount == 0){//
300 // self.errorFlag = false;
301 // return;
302 // }
303
304 if(i==this.selStartMonthIndex && j == this.startIndex && this.allMonthData[i][j].leftAmount !==0){//开始月点击的第一天
305 this.allMonthData[i][j].selectStatus = 2;
306 }else if(i==this.selStartMonthIndex && j > this.startIndex && this.allMonthData[i][j].leftAmount !==0){//开始月其它天
307 this.allMonthData[i][j].selectStatus = 1;
308 }else if(i==this.selEndMonthIndex && j == this.endIndex && this.allMonthData[i][j].leftAmount !==0){//结束月电机的最后一天
309 this.allMonthData[i][j].selectStatus = 2;
310 }else if(i==this.selEndMonthIndex && j < this.endIndex && this.allMonthData[i][j].leftAmount !==0){
311 this.allMonthData[i][j].selectStatus = 1;
312 }else if(i<this.selEndMonthIndex && i>this.selStartMonthIndex && this.allMonthData[i][j].leftAmount !==0){//中间月
313 this.allMonthData[i][j].selectStatus = 1;
314 }
315 }
316 }
317 }else{//同一月
318 for(var i=this.startIndex; i<this.endIndex+1; i++){
319 if(this.monthDataArr[i].leftAmount !== 0){
320 if(i == this.startIndex || i == this.endIndex){
321 this.monthDataArr[i].selectStatus = 2;
322 }
323 // if(i == this.endIndex){
324 // this.monthDataArr[i].selectStatus = 2;
325 // }
326 else {
327 this.monthDataArr[i].selectStatus = 1;
328 }
329 }else{
330 self.errorFlag = false;
331 return;
332 }
333
334 }
335 }
336 //设置值
337 this.$parent.$parent.$parent.$parent.curEditData.saleDate=[];
338 this.$parent.$parent.$parent.$parent.curEditData.saleDate.push(this.startDate);
339 this.$parent.$parent.$parent.$parent.curEditData.saleDate.push(this.endDate);
340
341 //console.log('111111111~~~');
342 //console.log(this.allMonthData)
343
344 this.pickUp();
345 }
346
347 }
348 },
349 watch: {
350 'planid': function(){
351 this.clearSelect(-1);
352 this.allMonthData = [];
353 this.initData(true);
354 }
355 },
356 template:
357 '<div class="calendarBox">'+
358 '<div id="calendarDate" class="calendarInput" @click="pickUp()">'+
359 '<span>{{startDate}}</span> <span> ~ </span> <span>{{endDate}} <i slot="suffix" class="el-input__icon el-icon-date"></i></span>'+
360 '</div> '+
361 '<div class="calendar" v-show="show">'+
362 '<div class="month">'+
363 '<ul class="clearfix">'+
364 '<li v-if="index >= 1" class="arrow" @click="pickPre(currentYear,currentMonth,index)"> ❮ </li>'+
365 '<li v-if="index < 1" class="disabledArrow" @click="pickPre(currentYear,currentMonth,index)"> ❮ </li>'+
366 '<li class="year-month" @click="pickYear(currentYear,currentMonth)">'+
367 '<span class="choose-year">{{ currentYear }} 年 </span>'+
368 '<span class="choose-month">{{ currentMonth }} 月</span>'+
369 '</li>'+
370 '<li v-if="index < monthArr.length-1" class="arrow" style="text-align:right;" @click="pickNext(currentYear,currentMonth,index)"> ❯ </li>'+
371 '<li v-if="index >= monthArr.length-1" class="disabledArrow" style="text-align:right;" @click="pickNext(currentYear,currentMonth,index)"> ❯ </li>'+
372 '</ul>'+
373 '</div>'+
374 '<ul class="weekdays clearfix">'+
375 '<li>日</li>'+
376 '<li>一</li>'+
377 '<li>二</li>'+
378 '<li>三</li>'+
379 '<li>四</li>'+
380 '<li>五</li>'+
381 '<li>六</li>'+
382 '<p v-show="!errorFlag">不可选择库存为0的连续时间段</p>'+
383 '</ul>'+
384 '<ul class="days clearfix">'+
385 '<li v-for="(dayobject,index) in monthDataArr" @click="selectDay(index,dayobject)">'+
386 '<template v-if="dayobject.selectStatus == 0">'+
387 '<span v-if="dayobject.leftAmount == 0" class="other-month">{{ new Date(dayobject.date).getDate() }}</span>'+
388 '<span v-else >'+
389 '<span v-if="new Date(dayobject.date).getFullYear() == new Date().getFullYear() && new Date(dayobject.date).getMonth() == new Date().getMonth() && new Date(dayobject.date).getDate() == new Date().getDate()" class="active">'+
390 '{{ new Date(dayobject.date).getDate() }}'+
391 '<span style="color:#409EFF">库存:{{ dayobject.leftAmount }}</span>'+
392 '</span>'+
393 '<span v-else>{{ new Date(dayobject.date).getDate() }}</br><span style="color:#409EFF">库存:{{ dayobject.leftAmount }}</span></span>'+
394 '</span>'+
395 '</template>'+
396 '<template v-if="dayobject.selectStatus == 1">'+
397 '<span v-if="dayobject.leftAmount == 0" class="other-month subSelect">{{ new Date(dayobject.date).getDate() }}</span>'+
398 '<span class="subSelect" v-else >'+
399 '<span v-if="new Date(dayobject.date).getFullYear() == new Date().getFullYear() && new Date(dayobject.date).getMonth() == new Date().getMonth() && new Date(dayobject.date).getDate() == new Date().getDate()" class="active">'+
400 '{{ new Date(dayobject.date).getDate() }}'+
401 '<span class="inventory">库存:{{ dayobject.leftAmount }}</span>'+
402 '</span>'+
403 '<span v-else>{{ new Date(dayobject.date).getDate() }}</br><span class="inventory">库存:{{ dayobject.leftAmount }}</span></span>'+
404 '</span>'+
405 '</template>'+
406 '<template v-if="dayobject.selectStatus == 2">'+
407 '<span v-if="dayobject.leftAmount == 0" class="other-month select">{{ new Date(dayobject.date).getDate() }}</span>'+
408 '<span class="select" v-else >'+
409 // '<span class="selectFlag" v-if="dayobject.selectStatus == 1">开始</span>'+
410 // '<span class="selectFlag" v-if="dayobject.selectStatus == 2">结束</span>'+
411 '<span v-if="new Date(dayobject.date).getFullYear() == new Date().getFullYear() && new Date(dayobject.date).getMonth() == new Date().getMonth() && new Date(dayobject.date).getDate() == new Date().getDate()" class="active">'+
412 '{{ new Date(dayobject.date).getDate() }}'+
413 '<span class="inventory">库存:{{ dayobject.leftAmount }}</span>'+
414 '</span>'+
415 '<span v-else>{{ new Date(dayobject.date).getDate() }}</br><span class="inventory">库存:{{ dayobject.leftAmount }}</span></span>'+
416 '</span>'+
417 '</template>'+
418 '</li>'+
419 '</ul>'+
420 '</div> '+
421 '</div> '
422 })
VUE自定义(有限)库存日历插件的更多相关文章
- vue自定义全局组件(自定义插件)
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...
- vue自定义日期选择，类似美团日期选择，日历控件，vue日历区间选择
一个日历的控件,基于vue的,可以日历区间选择,可用于酒店日历区间筛选,动手能力强,可以修改成小程序版本的,先上效果图 里面的颜色样式都是可以修改的 选择范围效果 话不多说,直接上干货,代码可以直接复 ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- Vue自定义日历组件
今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart ...
- vue自定义插件封装，实现简易的elementUi的Message和MessageBox
vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template> <transition ...
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
- 11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
- XgCalendar日历插件动态添加参数
在使用xgcalendar日历插件的时候,参数数组并非只有类型.显示时间.时区等这些参数,还可以根据extParam自定义参数扩展搜索条件,例如根据用户Id搜索不同用户的日历信息,需要将用户的Id存在 ...
- JQuery日历插件My97DatePicker日期范围限制
My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" ...
随机推荐
- Java知识系统回顾整理01基础03变量07final关键字
一.final赋值 final 修饰一个变量,有很多种说法,比如不能改变等等 准确的描述是 当一个变量被final修饰的时候,该变量只有一次赋值的机会 二.在声明的时候赋值 i已经被赋值为5,所以这里 ...
- 【题解】[SDOI2010]捉迷藏
题目链接:https://www.luogu.com.cn/problem/P2479 题目大意:求平面\(n\)个点中,到其它\(n-1\)个点的曼哈顿距离最大和最小距离之差最小的点,求出这个这个距 ...
- 匿名内部类和Lambda表达式是一样的吗？
先看一下匿名内部类长什么样子: 1 package com.jvm.demo.test2; 2 3 public class InnerClassTest { 4 5 public static vo ...
- Python 中 pip 工具的安装与使用
pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 目前如果你在 python.org 下载最新版本的安装包,则是已经自带了该工具. Python 2 ...
- 多测师讲解html _表格标签007_高级讲师肖sir
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表 ...
- 【7】进大厂必须掌握的面试题-Java面试-Jsp
1. jsp的生命周期方法是什么? 方法 描述 公共无效的jspInit() 与servlet的init方法相同,仅被调用一次. 公共无效_jspService(ServletRequest requ ...
- python BeautifulSoup的使用方法
BeautifulSoup的使用 我们学习了正则表达式的相关用法,但是一旦正则写的有问题,可能得到的就不是我们想要的结果了,而且对于一个网页来说,都有一定的特殊的结构和层级关系,而且很多标签都有id或 ...
- 在Linux终端中快速生成、解码二维码
我们要实现两个功能: 解码Linux屏幕上的二维码,将结果输出在终端 在终端中将字符串转为二维码,直接显示二维码在终端中以供扫描 实现方法 生成二维码 qrencode是一个常见的生成二维码的CLI程 ...
- linux设置系统变量
[root@localhost test]# export AUTHOR=brady [root@localhost test]# echo $AUTHOR brady [root@localhost ...
- Linux命令行扩展和被括起来的集合
命令行扩展:`` 和 $() 单引号'' 双引号"" 反向单引号`` 在很多场景下效果不同 [root@centos8 ~]#echo "echo $HOSTNAME&q ...