vue的h5日历组件实现详解

第vue的h5日历组件实现详解本文实例为大家分享了vue的h5日历组件实现代码，供大家参考，具体内容如下

日历样式自定义

日历组件

template

section

div

div

li@click="PreMonth(myDate,false)"

div/div

/li

li{{dateTop}}/li

li@click="NextMonth(myDate,false)"

div/div

/li

/div

div

divv-for="(tag,index)intextTop":key="index"

div{{tag}}/div

/div

/div

div

div

v-for="(item,index)inlist"

@click="clickDay(item,index)"

:key="index"

!--div

:class="item.isToday'wh_isToday':item.isPreDay'wh_chose_day':item.isChosedDay'wh_chose_day':''"

{{item.id}}/div--

div

v-bind:class="[{wh_isMark:item.isMark},

{wh_other_dayhide:item.otherMonth!=='nowMonth'},

{wh_want_dayhide:item.dayHide},

{wh_isToday:item.isToday},

{wh_chose_day:item.chooseDay},setClass(item)]"

{{item.id}}/div

/div

/div

/div

/section

/template

script

importmomentfrom"moment";

importtimeUtilfrom"./calendar";

importVuefrom"vue";

exportdefault{

data(){

return{

myDate:[],

list:[],

historyChose:[],

dateTop:"",

};

props:{

rangeDate:{

type:Array,

default:()=[],

},

markDate:{

type:Array,

default:()=[],

},

markDateMore:{

type:Array,

default:()=[],

},

textTop:{

type:Array,

default:()=["一","二","三","四","五","六","日"],

},

sundayStart:{

type:Boolean,

default:()=false,

},

agoDayHide:{

type:String,

default:`0`,

},

futureDayHide:{

type:String,

default:`2554387200`,

},

created(){

Start();

//获取今日的日期

varcurDate=newDate();

varpreDate=Date.parse(newDate(curDate.getTime()-24*60*60*1000));//前一天

this.myDate=newDate(preDate);

console.log(this.rangeDate);

methods:{

intStart(){

timeUtil.sundayStart=this.sundayStart;

},

setClass(data){

//console.log('data',data)

letobj={};

obj[data.markClassName]=data.markClassName;

returnobj;

},

//点击选择的日期

clickDay:function(item,index){

console.log("in","kkkkkk",item);

if(item.otherMonth==="nowMonth"!item.dayHide){

console.log("in","kkkkkk");

this.getList(this.myDate,item.date);

}

if(item.otherMonth!=="nowMonth"){

item.otherMonth==="preMonth"

this.PreMonth(item.date)

:this.NextMonth(item.date);

}

},

//选择月份

ChoseMonth:function(date,isChosedDay=true){

date=timeUtil.dateFormat(date);

this.myDate=newDate(date);

this.$emit("changeMonth",timeUtil.dateFormat(this.myDate));

if(isChosedDay){

this.getList(this.myDate,date,isChosedDay);

}else{

this.getList(this.myDate);

}

},

//上一个月的切换

PreMonth:function(date,isChosedDay=true){

date=timeUtil.dateFormat(date);

this.myDate=timeUtil.getOtherMonth(this.myDate,"preMonth");

this.$emit("changeMonth",timeUtil.dateFormat(this.myDate));

if(isChosedDay){

this.getList(this.myDate,date,isChosedDay);

}else{

this.getList(this.myDate);

}

},

//下一个月的切换

NextMonth:function(date,isChosedDay=true){

date=timeUtil.dateFormat(date);

this.myDate=timeUtil.getOtherMonth(this.myDate,"nextMonth");

this.$emit("changeMonth",timeUtil.dateFormat(this.myDate));

if(isChosedDay){

this.getList(this.myDate,date,isChosedDay);

}else{

this.getList(this.myDate);

}

},

//数据格式化的处理

forMatArgs:function(){

letmarkDate=this.markDate;

letmarkDateMore=this.markDateMore;

letrangeDate=this.rangeDate;

markDate=markDate.map((k)={

returntimeUtil.dateFormat(k);

});

rangeDate=rangeDate.map((k)={

returntimeUtil.dateFormat(k);

});

return[markDate,markDateMore,rangeDate];

},

//日期表格的的样式初始化

getList:function(date,chooseDay,isChosedDay=true){

console.log(date,chooseDay,"listCanshu",this.rangeDate);

const[markDate,markDateMore,rangeDate]=this.forMatArgs();//标签

this.dateTop=`${date.getFullYear()}年${date.getMonth()+1}月`;//顶部的头

letarr=timeUtil.getMonthList(this.myDate);//获取当前日期的整个月份

for(leti=0;iarr.length;i++){

letmarkClassName="";

letk=arr[i];

k.chooseDay=false;

constnowTime=k.date;//当前遍历的哪个时间

constt=newDate(nowTime).getTime()/1000;

//看每一天的class

for(constcofmarkDateMore){

if(c.date===nowTime){

markClassName=c.className||"";

}

}

//标记选中某些天设置class

k.markClassName=markClassName;

k.isMark=markDate.indexOf(nowTime)

if(this.rangeDate){

k.isMark=rangeDate.indexOf(nowTime)

}

//无法选中某天

k.dayHide=tthis.agoDayHide||tthis.futureDayHide;

if(k.isToday){

this.$emit("isToday",nowTime);

}

//if(this.rangeDate.length){

//

if(timeUtil.dateFormat(moment(this.rangeDate[0]).format("YYYY-MM-DD"))===nowTime||timeUtil.dateFormat(moment(this.rangeDate[6]).format("YYYY-MM-DD"))===nowTime){

//

k.chooseDay=true;

//

}else{

//

k.chooseDay=

false;

//

}

//}

varcurDate=newDate();

varpreDate=Date.parse(

newDate(curDate.getTime()-24*60*60*1000)

);//前一天

constpreDay=timeUtil.dateFormat(

moment(preDate).format("YYYY-MM-DD")

);

//处理默认当月的的前一天是被选中

if(nowTime===preDay!chooseDay!this.rangeDate.length){

k.chooseDay=true;

}else{

k.chooseDay=false;

}

letflag=!k.dayHidek.otherMonth==="nowMonth";

if(chooseDaychooseDay===nowTimeflag){

this.$emit("choseDay",nowTime);

this.historyChose.push(nowTime);

console.log(this.historyChose);

if(this.rangeDate.length){

k.chooseDay=false;

}else{

k.chooseDay=true;

}

}elseif(

this.historyChose[this.historyChose.length-1]===nowTime

!chooseDay

flag

){

console.log("进来这里了");

//处理日月的切换

if(this.rangeDate.length){

k.chooseDay=false;

}else{

if(this.chooseDay){

k.chooseDay=true;

}else{

k.chooseDay=false;

}

}

}

}

this.list=arr;

},

mounted(){

this.getList(this.myDate);

watch:{

rangeDate:{

handler(val,oldVal){

this.getList(this.myDate);

},

deep:true,

},

markDate:{

handler(val,oldVal){

this.getList(this.myDate);

},

deep:true,

},

markDateMore:{

handler(val,oldVal){

this.getList(this.myDate);

},

deep:true,

},

agoDayHide:{

handler(val,oldVal){

this.getList(this.myDate);

},

deep:true,

},

futureDayHide:{

handler(val,oldVal){

this.getList(this.myDate);

},

deep:true,

},

sundayStart:{

handler(val,oldVal){

Start();

this.getList(this.myDate);

},

deep:true,

},

/script

stylescoped

@mediascreenand(min-width:460px){

.wh_item_date:hover{

background:#00baff;

cursor:pointer;

margin:0;

padding:0;

.wh_container{

max-width:410px;

margin:auto;

list-style-type:none;

.wh_top_changge{

display:flex;

.wh_top_changgeli{

cursor:pointer;

display:flex;

color:#040b29;

font-size:18px;

flex:1;

justify-content:center;

align-items:center;

height:47px;

.wh_top_changge.wh_content_li{

cursor:auto;

flex:2.5;

.wh_content_all{

font-family:-apple-system,BlinkMacSystemFont,"PingFangSC",

"HelveticaNeue",STHeiti,"MicrosoftYahei",Tahoma,Simsun,sans-serif;

background-color:#ffffff;

width:100%;

overflow:hidden;

padding-bottom:8px;

border-radius:10px;

.wh_content{

display:flex;

flex-wrap:wrap;

padding:03%03%;

width:100%;

justify-content:center;

.wh_content:first-child.wh_content_item_tag,

.wh_content:first-child.wh_content_item{

color:#ddd;

font-size:16px;

.wh_content_item,

.wh_content_item_tag{

font-size:15px;

width:13.4%;

text-align:center;

color:#fff;

position:relative;

.wh_content_item{

height:40px;

.wh_top_tag{

width:40px;

height:40px;

line-height:40px;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

color:#9b9da9;

.wh_item_date{

width:40px;

height:40px;

line-height:40px;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

color:#040b29;

.wh_jiantou1{

width:12px;

height:12px;

border-top:2pxsolid#9b9da9;

border-left:2pxsolid#9b9da9;

transform:rotate(-45deg);

.wh_jiantou1:active,

.wh_jiantou2:active{

border-color:#040b29;

.wh_jiantou2{

width:12px;

height:12px;

border-top:2pxsolid#9b9da9;

border-right:2pxsolid#9b9da9;

transform:rotate(45deg);

.wh_content_item.wh_isMark{

margin:auto;

/*border-radius:10px;*/

background:rgba(235,246,255,1);

z-index:2;

.wh_content_item.wh_other_dayhide{

color:#bfbfbf;

.wh_content_item.wh_want_dayhide{

color:#9b9da9;

.wh_content_item.wh_isToday{

/*background:#00BAFF;

border-radius:10px;*/

color:rgba(130,183,225,1);

.wh_content_item.wh_pre_day{

color:red;

.wh_content_item.wh_chose_day{

background:rgba(168,208,240,1);

color:#fff;

border-radius:10px;

/style

calendar.js是生成月份盘，月数多少天的逻辑

importmomentfrom"moment";

exportdefault{

//当某月的天数

getDaysInOneMonth(date){

constyear=date.getFullYear();

constmonth=date.getMonth()+1;

constd=newDate(year,month,0);

returnd.getDate();

},

//向前空几个

getMonthweek(date){

constyear=date.getFullYear();

constmonth=date.getMonth()+1;

constdateFirstOne=newDate(year+'/'+month+'/1');

returnthis.sundayStart

dateFirstOne.getDay()==07:dateFirstOne.getDay():

dateFirstOne.getDay()==06:dateFirstOne.getDay()-1;

},

/**

*获取当前日期上个月或者下个月

*/

getOtherMonth(date,str='nextMonth'){

consttimeArray=this.dateFormat(date).split('/');

constyear=timeArray[0];

constmonth=timeArray[1];

constday=timeArray[2];

letyear2=year;

letmonth2;

if(str==='nextMonth'){

month2=parseInt(month)+1;

if(month2==13){

year2=parseInt(year2)+1;

month2=1;

}

}else{

month2=parseInt(month)-1;

if(month2==0){

year2=parseInt(year2)-1;

month2=12;

}

}

letday2=day;

constdays2=newDate(year2,month2,0).getDate();

if(day2days2){

day2=days2;

}

if(month210){

month2='0'+month2;

}

if(day210){

day2='0'+day2;

}

constt2=year2+'/'+month2+'/'+day2;

returnnewDate(t2);

},

//上个月末尾的一些日期

getLeftArr(date){

constarr=[];

constleftNum=this.getMonthweek(date);

constnum=this.getDaysInOneMonth(this.getOtherMonth(date,'preMonth'))-leftNum+1;

constpreDate=this.getOtherMonth(date,'preMonth');

//上个月多少开始

for(leti=0;ileftNum;i++){

constnowTime=preDate.getFullYear()+'/'+(preDate.getMonth()+1)+'/'+(num+i);

arr.push({

id:num+i,

date:nowTime,

isToday:false,

isPreDay:false,

otherMonth:'preMonth',

});

}

returnarr;

},

//下个月末尾的一些日期

getRightArr(date){

constarr=[];

constnextDate=this.getOtherMonth(date,'nextMonth');

constleftLength=this.getDaysInOneMonth(date)+this.getMonthweek(date);

const_length=7-leftLength%7;

for(leti=0;i_length;i++){

constnowTime=nextDate.getFullYear()+'/'+(nextDate.getMonth()+1)+'/'+(i+1);

arr.push({

id:i+1,

date:nowTime,

isToday:false,

isPreDay:false,

otherMonth:'nextMonth',

});

}

returnarr;

},

//format日期

dateFormat(date){

date=typeofdate==='string'newDate(date.replace(/-/g,'/')):date;

returndate.getFullYear()+'/'+(date.getMonth()+1)+'/'

+date.getDate();

},

//获取某月的列表不包括上月和下月

getMonthListNoOther(date){

constarr=[];

constnum=this.getDaysInOneMonth(date);

constyear=date.getFullYear();

constmonth=date.getMonth()+1;

consttoDay=this.dateFormat(newDate());

console.log(toDay,'今日日期的格式化');

varcurDate=newDate();

varpreDate=Date.parse(newDate(curDate.getTime()-24*60*60*1000));//前一天

constpreDay=this.dateFormat(moment(preDate).format('YYYY-MM-DD'));

console.log(preDay,'前一日日期的格式化');

for(leti=0;inum;i++){

constnowTime=year+'/'+month+'/'+(i+1);

arr.push({

id:i+1,

date:nowTime,

isToday:toDay===nowTime,

isPreDay:false,

otherMonth:'nowMonth',

});

}

//console.log(arr,'月份日期')

ret