Jquery 封装日历
<template>
<div>
<van-cell is-link @click="pickDate">展示弹出层</van-cell>
<van-popup v-model="show" position="bottom" :style="{ height: '89%' }" >
<div @touchstart.capture="handleTouchStart"
@touchend="handleTouchEnd" style="height: 60%">
<div class="title">{{currentYearAndMoth}}</div>
<div class="tabls">
<table width="100%" height="70%" border="0px">
<thead>
<tr>
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) of totalRows' :key="index">
<td v-for='(item2,index2) of 7' :key="index2" v-if="totalArr[index*7+index2].statusGray==0" style="color: gainsboro;">
<span>{{totalArr[index*7+index2].date}}</span>
</td>
<td v-for='(item2,index2) of 7' :key="index2" v-if="totalArr[index*7+index2].statusGray==1" @click="pickInventory">
<span>{{totalArr[index*7+index2].date}}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="margin-bottom: 10px">
<span style="margin-right: 5px">1.过往</span>
<span style="margin-right: 5px" >2.可选择</span>
<span style="margin-right: 5px">3.选中</span>
<button style="margin-right: 5px;">>4选择全部可选日期(当月？)</button>
</div>
<div style="display: flex;justify-content:space-around;margin-bottom: 20px">
<div>已选</div>
<div>共计 8天 </div>
</div>
<div style="display: flex;justify-content: space-around">
<div style="width: 100px;border: 1px solid yellow">取消</div>
<div style="width: 100px;border: 1px solid yellow">确认</div>
</div>
</van-popup>
</div>
</template>
<style>
.title{
padding: 20px;
}
table td{
height: 40px;
}
</style>
<script>
import Vue from 'vue';
import { Popup } from 'vant';
Vue.use(Popup);
export default {
name: 'calander_new',
data(){
return {
show: false,
currentYearAndMoth:"",
totalRows:0,
totalArr:[],
touchStatus: false,
startX: 0,
}
},
watch: {
currentYearAndMoth:{
handler(newVal, oldVal) {
$("td").removeClass("clickCla");
}
},
},
methods:{
pickInventory(e){
var $Ele = $(e.currentTarget).find("span");
var currDate = this.currentYearAndMoth.substring(0,7)+($Ele.text().trim().length==1?"-0"+$Ele.text().trim():"-"+$Ele.text().trim());
console.log(currDate,"666")
if(!$(e.currentTarget).hasClass("clickCla")){
$(e.currentTarget).addClass("clickCla")
}else{
$(e.currentTarget).removeClass("clickCla") /*取消样式，就是把日期给清掉*/
}
},
showCalendar(currentYearAndMoth){
let currentMothDays = this.getMonthDays(currentYearAndMoth);
let currentMothFirstDayByWeek = this.getWeek(currentYearAndMoth + "-"+ "01");
let totalMothDay = parseInt(currentMothDays) + parseInt(currentMothFirstDayByWeek);
this.totalRows = Math.ceil(totalMothDay/7);
let arr= [];
for (var i = 0 ; i<this.totalRows*7;i++ ){
var day = {};
if (i<currentMothFirstDayByWeek){
day.date= '';
day.status = 'up'
day.statusGray = 0
arr.push(day);
}else if (i>=totalMothDay){
day.date= '';
day.status = 'next'
day.statusGray = 1
arr.push(day);
}else {
day.date= (i-currentMothFirstDayByWeek+1);
day.status = 'curr'
let currMonth = new Date().getMonth()+1<10? new Date().getFullYear()+"0"+new Date().getMonth()+1:new Date().getFullYear()+""+new Date().getMonth()+1;
let isGetcurr = new Date(this.currentYearAndMoth).getMonth()+1<10? new Date(this.currentYearAndMoth).getFullYear()+"0"+new Date(this.currentYearAndMoth).getMonth()+1:new Date(this.currentYearAndMoth).getFullYear()+""+new Date(this.currentYearAndMoth).getMonth()+1;
let isStatusGray = 0;
if(parseInt(currMonth) - parseInt(isGetcurr)<0){
isStatusGray = 0 ;
day.statusGray=1;
}else if(parseInt(currMonth) - parseInt(isGetcurr)>0){
isStatusGray = 1
day.statusGray=0;;
}else{
isStatusGray = 2 ;
day.statusGray = this.isGray(i-currentMothFirstDayByWeek+1,true)
}
arr.push(day);
}
}
this.totalArr = arr
console.log(this.totalArr,"totalArr")
},
pickDate() {
this.show = true;
this.showCalendar(this.currentYearAndMoth);
},
isGray(dateDay,isTrue){
if(isTrue){
if(dateDay<new Date().getDate()){
return 0
}
}
return 1
},
/*通过年月获取当前日期有几天*/
getMonthDays(dateStr){
/*new Date(datestr)*/
let date = new Date(dateStr);
let year = date.getFullYear();
let Moth = date.getMonth()+1;
return new Date(year,Moth, 0).getDate()
/*根据年月获取一个月有几天*/
},
/*通过指定日期获取对应周几*/
getWeek(dateStr){
let date = new Date(dateStr);
return date.getDay();
},
getYearAndMoth(date){
let year = date.getFullYear();
let Moth = date.getMonth()+1;
if (parseInt(Moth)<10){
Moth = "0"+ Moth
}
return year + "-"+ Moth
},
handleTouchStart (e) {
this.startX = e.changedTouches[0].clientX;
this.touchStatus = true
},
handleTouchEnd (e) {
if(this.touchStatus){
const touchX = e.changedTouches[0].clientX;
const index = Math.floor(Math.abs(touchX - this.startX) / 20)
if(index > 0 ){
if(touchX - this.startX>0){
this.currentYearAndMoth = this.getPreMonth(this.currentYearAndMoth+"-01")
this.showCalendar(this.currentYearAndMoth);
this.touchStatus = false
// 显示上一个月
}else if(touchX - this.startX < 0){
// 显示下一个月
this.currentYearAndMoth = this.getNextMonth(this.currentYearAndMoth+"-01")
this.showCalendar(this.currentYearAndMoth);
this.touchStatus = false
}
}
}
},
getPreMonth(date) {
var arr = date.split('-');
console.log(arr,"arr")
var year = arr[0]; //获取当前日期的年份
var month = arr[1]; //获取当前日期的月份
var day = arr[2]; //获取当前日期的日
var days = new Date(year, month, 0);
days = days.getDate(); //获取当前日期中月的天数
var year2 = year;
var month2 = parseInt(month) - 1;
if (month2 == 0) {
year2 = parseInt(year2) - 1;
month2 = 12;
}
var day2 = day;
var days2 = new Date(year2, month2, 0);
days2 = days2.getDate();
if (day2 > days2) {
day2 = days2;
}
if (month2 < 10) {
month2 = '0' + month2;
}
var t2 = year2 + '-' + month2 ;
return t2;
},
getNextMonth(date) {
var arr = date.split('-');
var year = arr[0]; //获取当前日期的年份
var month = arr[1]; //获取当前日期的月份
var day = arr[2]; //获取当前日期的日
var days = new Date(year, month, 0);
days = days.getDate(); //获取当前日期中的月的天数
var year2 = year;
var month2 = parseInt(month) + 1;
if (month2 == 13) {
year2 = parseInt(year2) + 1;
month2 = 1;
}
var day2 = day;
var days2 = new Date(year2, month2, 0);
days2 = days2.getDate();
if (day2 > days2) {
day2 = days2;
}
if (month2 < 10) {
month2 = '0' + month2;
}
var t2 = year2 + '-' + month2;
return t2;
}
},
created () {
this.currentYearAndMoth = this.getYearAndMoth(new Date());
},
mounted () {
},
}
</script>
<style scoped>
.clickCla{
background-color: yellow;
}
</style>
工作中如果有您解决不了的问题或者您花费2小时还没解决的问题，这里可以有偿帮您高效直接解决bug，wx号：18062748486,备注”bug解决“；
