├── README.md
├── datePicker.vue
└── git
    └── QQ20180508-153441.gif


/README.md:
--------------------------------------------------------------------------------
 1 | # vue-datepicker-infinite
 2 | easy datepicker of a vue 2.0 component
 3 | <p align="center">
 4 | 
 5 | 
 6 | <img src="https://github.com/leepyng/vue-datepicker-infinite/blob/master/git/QQ20180508-153441.gif" alt="Coverage Status">
 7 | 
 8 | 
 9 | </p>
10 | 
11 | # install
12 | 	
13 | 	npm install vue2-datepicker-infinite --save
14 | 	
15 | 
16 | # how to use
17 | 	template:
18 | 		<transition  name="slide" >
19 | 			<DatePicker @select="calendar.select" :start="calendar.start"  :last="calendar.last" :beginDate="calendar.begin" :endDate="calendar.end" :monthLength="calendar.monthLength"  v-show="calendar.show" ></DatePicker>
20 | 		</transition>
21 | 	
22 | 	script:
23 | 		//import
24 | 		import DatePicker from './../common/datePicker/datePicker.vue'
25 | 		//define
26 | 		components:{
27 | 			DatePicker
28 | 		},
29 | 		//set default data
30 | 		data(){
31 | 			return{
32 | 				calendar:{
33 | 					monthLength:6,
34 | 					show:false,
35 | 					start:'2019-08-01',
36 | 					last:'2019-08-03',
37 | 					begin:'2019-08-01',
38 | 					end:'2019-12-01',
39 | 					select:(begin,end)=>{
40 | 						this.calendar.show=false;
41 | 						this.calendar.begin=begin;
42 | 						this.calendar.end=end;
43 | 					}
44 | 				},
45 | 			}
46 | 		}
47 | 		
48 | 	
49 | # props description
50 | 	monthLength:max month lenght
51 | 	beginText:begin text name
52 | 	endText:end text name
53 | 	isReverseAllow:allow to reverse date when select,
54 | 	start:the calendar's begining date
55 | 	last:the calendar's last date
56 | 	beginDate: begin of the select
57 | 	endDate:end of the select
58 | 


--------------------------------------------------------------------------------
/datePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 
  3 | 		<div class="date-picker-box">
  4 | 			<div class="dpb-week">
  5 | 				<table>
  6 | 					<thead>
  7 | 						<tr>
  8 | 							<th>日</th>
  9 | 							<th>一</th>
 10 | 							<th>二</th>
 11 | 							<th>三</th>
 12 | 							<th>四</th>
 13 | 							<th>五</th>
 14 | 							<th>六</th>
 15 | 						</tr>
 16 | 					</thead>
 17 | 				</table>
 18 | 			</div>
 19 | 			<div class="dpb-week-days">
 20 | 				<div class="dpbwd-table" v-for="(item,index) in data">
 21 | 					<div class="dpbwd-table-month">
 22 | 						{{getNormalMonth(Number(index))}} 
 23 | 					</div>
 24 | 					<div class="dpbwd-table-items">
 25 | 						<table class="dpbwd-table-items-table">
 26 | 							<tbody >
 27 | 								<tr v-for="week in item">
 28 | 									<td :class="
 29 | 												isActive(day)
 30 | 												?'active':
 31 | 												(isInRange(day)
 32 | 													?'range':
 33 | 													isDisable(day)?'disable':'')
 34 | 												" v-for="day in week" @click="select(day)">
 35 | 										<div class="page-table-item">
 36 | 											<em class="page-table-note">
 37 | 												{{
 38 | 													isBegin(day)?beginText:(isEnd(day)?endText:'')
 39 | 												}}
 40 | 											</em>
 41 | 											<strong class="page-table-text">
 42 | 												<!-- {{day}} -->
 43 | 											{{day.day}}</strong>
 44 | 										</div>
 45 | 									</td>
 46 | 
 47 | 								</tr>
 48 | 							</tbody>
 49 | 						</table>
 50 | 					</div>
 51 | 				</div>
 52 | 
 53 | 			</div>
 54 | 		</div>
 55 | 
 56 | </template>
 57 | <script>
 58 | 	export default{
 59 | 		name:'datePicker',
 60 | 		data(){
 61 | 			return{
 62 | 				data:[],
 63 | 				year:(new Date()).getFullYear(),
 64 | 				month:(new Date()).getMonth()+1,
 65 | 				begin:'',
 66 | 				end:'',
 67 | 				lastDate:'',
 68 | 
 69 | 			}
 70 | 		},
 71 | 		props:{
 72 | 			monthLength:{
 73 | 				type:Number,
 74 | 				default:6
 75 | 			},
 76 | 			beginText:{
 77 | 				type:String,
 78 | 				default:'入住'
 79 | 			},
 80 | 			endText:{
 81 | 				type:String,
 82 | 				default:'离店'
 83 | 			},
 84 | 
 85 | 			start:{
 86 | 				type:String,
 87 | 				default:''
 88 | 			},
 89 | 			last:{
 90 | 				type:String,
 91 | 				default:''
 92 | 			},
 93 | 			beginDate:{
 94 | 				type:String,
 95 | 				default:''
 96 | 			},
 97 | 			endDate:{
 98 | 				type:String,
 99 | 				default:''
100 | 			}
101 | 		},
102 | 		watch:{
103 | 			beginDate(val){
104 | 				this.begin=val
105 | 
106 | 			},
107 | 			endDate(val){
108 | 				this.end=val
109 | 
110 | 			},
111 | 			last(val){
112 | 				this.lastDate=val;
113 | 
114 | 			}
115 | 		},
116 | 		methods:{
117 | 			//是否为不可选择日期
118 | 			isDisable(day){
119 | 				var day=day.year+'-'+day.month+'-'+day.day;
120 | 				var start=this.start;
121 | 				var lastDate=this.lastDate;
122 | 
123 | 				var s1 = (new Date(start)).getTime();
124 | 				var s2 = (new Date(lastDate)).getTime();
125 |             	var s = (new Date(day)).getTime();
126 | 
127 |             	return (s1>s||s2<s)?true:false;
128 | 
129 | 			},
130 | 			//是否选中
131 | 			isActive(day){
132 | 				var begin=this.begin;
133 | 				var end=this.end;
134 | 				var day=day.year+'-'+day.month+'-'+day.day;
135 | 				var s1 = (new Date(begin)).getTime();
136 | 				var s2 = (new Date(end)).getTime();
137 |             	var s = (new Date(day)).getTime();
138 |             	return (s==s1||s==s2)?true:false
139 | 
140 | 			},
141 | 			//是否为开始日期
142 | 			isBegin(day){
143 | 				var begin=this.begin;
144 | 				var end=this.end;
145 | 				var s1 = (new Date(begin)).getTime();
146 |             	var s = (new Date(day)).getTime();
147 |             	return s==s1?true:false
148 | 
149 | 			},
150 | 			//是否为结束日期
151 | 			isEnd(day){
152 | 				var begin=this.begin;
153 | 				var end=this.end;
154 | 				var s1 = (new Date(end)).getTime();
155 |             	var s = (new Date(day)).getTime();
156 |             	return s==s1?true:false
157 | 
158 | 			},
159 | 			//选中日期
160 | 			select(day){
161 | 				
162 | 				
163 | 				if(this.isDisable(day))return;
164 | 				
165 | 				var day=day.year+'-'+day.month+'-'+day.day;
166 | 
167 | 				if(!this.begin||(this.begin&&this.end)){
168 | 					this.begin=day;
169 | 					this.end='';
170 | 				}else if(this.begin&&!this.end){
171 | 					//反选日期
172 | 					if(this.isOpposite(day,this.begin)){
173 | 						this.end=this.begin;
174 | 						this.begin=day;
175 | 
176 | 					}else{
177 | 						this.end=day;
178 | 					}
179 | 					//选中日期
180 | 					this.$emit('select',this.begin,this.end)
181 | 				}
182 | 
183 | 			},
184 | 			cancel(){
185 | 				this.begin=this.beginDate;
186 | 				this.end=this.endDate;
187 | 
188 | 				this.$emit('select')
189 | 			},
190 | 			//获取日份,count=1为下一个月，count=-1为上一个月
191 | 	        getNormalMonth(count) {
192 | 
193 | 	            var date = new Date();
194 | 	            date.setMonth(date.getMonth()+count,1);
195 | 	            var year = date.getFullYear();
196 | 	            var month = date.getMonth() + 1;
197 | 	            if (month < 10) { month = '0' + month };
198 | 	            var time = String(year) + '-' + String(month);
199 | 
200 | 	            return time;
201 | 	        },
202 | 			//判断是否反转日期
203 | 			isOpposite(end,begin){
204 | 				var s1 = (new Date(begin)).getTime();
205 |             	var s2 = (new Date(end)).getTime();
206 | 
207 |             	return s2<s1?true:false;
208 | 			},
209 | 			//查看是否是已经选中的日期区间中
210 | 			isInRange(day){
211 | 
212 | 				if(!day)return;
213 | 				var day=day.year+'-'+day.month+'-'+day.day;
214 | 				var begin=this.begin;
215 | 				var end=this.end;
216 | 				var s1 = (new Date(begin)).getTime();
217 |             	var s2 = (new Date(end)).getTime();
218 |             	var s = (new Date(day)).getTime();
219 |             	if((s<s2)&&(s>s1))return true;
220 | 
221 | 			},
222 | 			//获取天数差
223 | 			getDaysSize(s1, s2){
224 | 				var s1 = new Date(s1);
225 | 	            var s2 = new Date(s2);
226 | 
227 | 	            var days = s2.getTime() - s1.getTime();
228 | 	            var time = parseInt(days / (1000 * 60 * 60 * 24));
229 | 	            return time;
230 | 			},
231 | 			//获取周几
232 | 			getWeekday(date){
233 | 	            var nowDate=new Date();
234 | 	            var days=this.getDaysSize(nowDate,date);
235 | 	            var mydate=new Date(date);
236 | 	            var myday=mydate.getDay()//注:0-6对应为星期日到星期六
237 | 	            return myday;
238 | 			},
239 | 
240 | 			//将数据格式化表格日期格式
241 | 	        monthDate(year,month){
242 | 
243 | 	            //或取当前月份最后一天的日期
244 | 	            var day = new Date(year,month,0);
245 | 	            var lastDay=day.getDate();
246 | 	            //计算当前月份第一天是星期几
247 | 	            var weekday=this.getWeekday(year+'-'+month+'-01');
248 | 	            //定义存放当前月份的数组
249 | 	            var data=[];
250 | 	            //定义日期表格数组
251 | 	            var result = [];
252 | 	            //计算出当前月份每一天到数组中
253 | 	            for(var day=1;day<=lastDay;day++){
254 | 	            	var day=day<10?'0'+day:day;
255 | 
256 | 					data.push({day,month,year });
257 | 	            }
258 | 
259 | 	            //补全日期前几天
260 | 	            for(var i=0;i<weekday;i++){
261 | 	                 data.unshift('');
262 | 	            }
263 | 	            //切成6行
264 | 	            for(var i=0,len=data.length;i<len;i+=7){
265 | 	               result.push(data.slice(i,i+7));
266 | 	            }
267 | 	            //补全日期后几天
268 | 	            var length=result[(result.length-1)].length;
269 | 	            if(length<7){
270 | 	                for(var i=0;i<(7-length);i++){
271 | 	                    result[(result.length-1)].push('');
272 | 	                }
273 | 	            }
274 | 
275 | 	            return result;
276 | 	        },
277 | 	        //初始化表格数据
278 | 	        tableDate(){
279 | 	        	var monthLength=this.monthLength;
280 | 	        	var data=[];
281 | 				// var date = new Date();
282 | 				var year=this.year; //获取完整的年份(4位)
283 | 				var month=this.month; //获取当前月份
284 | 				// console.log(year,month,monthLength)
285 | 
286 | 	        	for(var i=0;i<monthLength;i++){
287 | 	        		var y=(month+i)>12?year+1:year;
288 | 	        		var m=(month+i)>12?(month+i-12):(month+i);
289 | 	        		// console.log(y,m)
290 | 	        		var re=this.monthDate(y,m<10?'0'+m:m);
291 | 	        		data.push(re);
292 | 	        	}
293 | 	       		this.data=data;
294 | 
295 | 	        }
296 | 
297 | 
298 | 		},
299 | 		mounted(){
300 | 
301 | 			this.end=this.endDate;
302 | 			this.begin=this.beginDate;
303 | 			this.lastDate=this.last;
304 | 			this.tableDate();
305 | 
306 | 		}
307 | 
308 | 	}
309 | </script>
310 | <style scoped>
311 | 	.date-picker-box{
312 | 		width: 100%;
313 | 		height: 120%;
314 | 		position: fixed;
315 | 		top: 0;
316 | 		left: 0;
317 | 		background-color: #fff;
318 | 		z-index:24;
319 | 	}
320 | 	.dpb-title{
321 | 	    height: 50px;
322 | 	    text-align: center;
323 | 	    line-height: 50px;
324 | 	    background: #fff;
325 | 	    font-size: 15px;
326 | 		position: relative;
327 | 
328 | 	}
329 | 	.dpb-title>span{
330 | 		position: absolute;
331 | 		right: 12px;
332 | 		line-height: 50px;
333 | 		font-size: 13px;
334 | 	}
335 | 	.dpb-week>table{
336 | 		background: #fff;
337 | 	    font-size: 13px;
338 | 	    width: 100%;
339 | 	    border-collapse: separate;
340 | 	    table-layout: fixed;
341 | 	}
342 | 	.dpb-week>table>thead>tr>th{
343 | 		height: 30px;
344 | 	    text-align: center;
345 | 	    font-weight: 400;
346 | 	    border-bottom: 1px solid #e0e0e0;
347 | 	    width: 14.28571%;
348 | 	    vertical-align: middle;
349 | 	}
350 | 	.dpb-week-days{
351 | 		position: relative;
352 | 	    width: 100%;
353 | 	    height: 75%;
354 | 	    overflow: auto;
355 | 	    padding-bottom: 120px;
356 | 
357 | 	}
358 | 	.dpbwd-table-month{
359 | 		height: 30px;
360 | 	    display: -webkit-box;
361 | 	    -webkit-box-align: center;
362 | 	    -webkit-box-pack: center;
363 | 	    font-size: 15px;
364 | 	    font-weight: 700;
365 | 	    background: hsla(210,8%,95%,.9);
366 | 	    position: -webkit-sticky;
367 | 	    position: sticky;
368 | 	    top: 0;
369 | 	    z-index: 1;
370 | 	    border-bottom: 1px solid #e0e0e0;
371 | 	}
372 | 	.page-table-item{
373 | 
374 | 
375 | 		box-sizing: border-box;
376 | 		position: relative;
377 | 		/*display: -webkit-box;*/
378 | 		-webkit-box-orient: vertical;
379 | 		-webkit-box-align: center;
380 | 		-webkit-box-pack: end;
381 | 
382 | 	}
383 | 	.page-table-text{
384 | 	    font-size: 13px;
385 | 	    height: 15px;
386 | 	    line-height: 15px;
387 | 	    overflow: hidden;
388 | 	    text-overflow: ellipsis;
389 | 	    white-space: nowrap;
390 | 
391 | 	}
392 | 	.page-table-note{
393 | 		color: #ff5000;
394 | 	    font-size: 12px;
395 | 	    height: 15px;
396 | 	    line-height: 15px;
397 | 	    overflow: hidden;
398 | 	    text-overflow: ellipsis;
399 | 	    white-space: nowrap;
400 | 	    font-style: inherit;
401 | 	}
402 | 	.page-table-note,.page-table-text{
403 | 		display: block;
404 | 	    width: 100%;
405 | 	    text-align: center;
406 | 	    font-weight: 400;
407 | 	}
408 | 	.dpbwd-table-items-table>tbody>tr>td.disable .page-table-text, .dpbwd-table-items-table>tbody>tr>td.disable .page-table-note{
409 |    		color: #ccc!important;
410 |     	background: none!important;
411 | 	}
412 | 	.dpbwd-table-items-table>tbody>tr>td.range{
413 | 		background: #fff6d6;
414 |     	border-bottom-color: #fff6d6!important;
415 | 	}
416 | 	.dpbwd-table-items-table>tbody>tr>td.active{
417 | 	    background: #ffc900;
418 |     	border-bottom-color: #ffc900!important;
419 | 	}
420 | 	.dpbwd-table-items-table>tbody>tr>td.disable{
421 | 		background: #fafafa!important;
422 |     	border-bottom-color: #e0e0e0!important;
423 | 	}
424 | 	.dpbwd-table-items-table>tbody>tr>td{
425 | 	    height: 60px;;
426 | 		text-align: center;
427 | 		width: 14.28571%;
428 | 		position: relative;
429 | 		border-bottom: 1px solid #e0e0e0;
430 | 	}
431 | 	.dpbwd-table-items-table{
432 | 		width: 100%;
433 | 	    border-collapse: separate;
434 | 	    table-layout: fixed;
435 | 	}
436 | </style>
437 | 


--------------------------------------------------------------------------------
/git/QQ20180508-153441.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leepyng/vue-datepicker-infinite/54c6194010edba3ab242d9a77da04b26a8416357/git/QQ20180508-153441.gif


--------------------------------------------------------------------------------