vue寫一個自定義日曆元件
阿新 • • 發佈：2022-03-25
因為最近需求需要，寫一個自定義日曆。
廢話少說直接上效果圖， 日曆返回的起始時間
程式碼實現
首先根據當前月時間 組建日曆
構建日曆
createTime(){ let t = this; let Timesr = getTime(); t.Timesr = Timesr; t.$nextTick(()=>{ this.optTime(Timesr) }) },// 到時候需要什麼資料改這個函式 optTime(Timesr){ let t = this; let lastDay= new Date(Timesr.y,Timesr.month,0).getDate(); this.weekey = new Date(`${Timesr.y}-${Timesr.month}-01`).getDay(); let arr = [] arr[t.monthIndex] = {Yname:`${Timesr.y}年${Timesr.month}月`,chlid:[]}for(let i = 1; i<=lastDay; i++){ let _o = { day:i, about:Timesr.d > i?1:0, Reducible:Timesr.d >i?1:0, price:i==10?100:0, m:Timesr.month, y:Timesr.y, dayText:`${Timesr.y}-${Timesr.month<=9?'0'+Timesr.month:Timesr.month}-${i<=9?'0'+i:i}` } arr[t.monthIndex].chlid.push(_o) } t.dayList = arr },
完整程式碼
<template>
<view class="day_conter" v-if="isModal" >
<view class="day_head">
<view @click="rePath('upper')">上一月</view>
<view class="day_tille" >{{dayList[monthIndex].Yname}}</view>
<view @click="rePath('next')" >下一月</view>
</view>
<view class="day-wrap">
<view class="day-tit">
<view class="day-tit-cell" v-for="(item,index) in week" :key="index">{{item}}</view>
</view>
<view class="day-table">
<view class="day-list-cell" v-for="(item,index) in weekey" :key="index"></view>
<view class="day-list-cell" v-for="(item,index) in dayList[monthIndex].chlid"
:key="index"
:class="[item.about>0?'white':'',(item.dayText && selectDay.includes(item.dayText) )?'act':'']" @click="selectDate(item.about>0?item:'',index)"
>
<text class="day_about" v-if="!selectDay.includes(item.dayText)" :class="!item.about?'':'day_yabout'">{{!item.about?'已約滿':'可預約'}} </text>
<tex class="day_about" v-if="mode==true&&selectDay.length>0">{{selectDay[0]==item.dayText?'入住':selectDay[selectDay.length-1]==item.dayText?'離店':selectDay[index]==item.dayText?'選中':''}}</tex>
<text class="day-list-cell-day">{{item.day}}</text>
<text class="day-list-cell-price" v-if="item.about&&item.price">補差￥{{item.price}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import { getTime } from '../../untils/index.js'
export default{
props:{
isModal:{
type:Boolean,
default:false
},
mode:{ //單多選
type:Boolean,
default:true
}
},
data(){
return{
week:['日','一','二','三','四','五','六'],
weekey:0,
dayList:[],
monthIndex:0,
Timesr:'',
opt:[],
selectDay:[], //選中的
}
},
created(){
this.createTime()
},
watch:{
Timesr:{
deep:true,
handler(val){
this.optTime(val)
}
}
},
methods:{
init(){
let t = this;
t.createTime()
},
// 初始化日曆根據當前月組建日曆
createTime(){
let t = this;
let Timesr = getTime();
t.Timesr = Timesr;
t.$nextTick(()=>{
this.optTime(Timesr)
})
},
// 到時候需要什麼資料改這個函式
optTime(Timesr){
let t = this;
let lastDay= new Date(Timesr.y,Timesr.month,0).getDate();
this.weekey = new Date(`${Timesr.y}-${Timesr.month}-01`).getDay();
let arr = []
arr[t.monthIndex] = {Yname:`${Timesr.y}年${Timesr.month}月`,chlid:[]}
for(let i = 1; i<=lastDay; i++){
let _o = {
day:i,
about:Timesr.d > i?1:0,
Reducible:Timesr.d >i?1:0,
price:i==10?100:0,
m:Timesr.month,
y:Timesr.y,
dayText:`${Timesr.y}-${Timesr.month<=9?'0'+Timesr.month:Timesr.month}-${i<=9?'0'+i:i}`
}
arr[t.monthIndex].chlid.push(_o)
}
t.dayList = arr
},
//上下一個月
rePath(o){
let t = this;
let opt = t.Timesr
t.selectDay = []
t.opt = []
if(o == 'upper'){
opt.month--
if( opt.month==0 ){
opt.month = 12
opt.y--
}
}else{
opt.month++
if( opt.month>12 ){
opt.month = 1
opt.y++
}
}
},
//隨便亂選
selectDate(Node){
let opt = this.opt;
let arr = this.selectDay;
let t = this;
if(Node){
if(!this.mode){ //單選
t.selectDay = [Node.dayText]
t.$emit('select',Node)
}else{
//開始
if(arr.length>0&&arr.includes(Node.dayText)){
if(arr.length>1){
arr.map((item,indexs)=>{
if(item == Node.dayText ){
opt[1] = {... Node}
}
})
}else{
arr = arr.filter(item=>{
return item !== Node.dayText
})
opt = []
t.opt = []
}
}
else{
arr.push(Node.dayText);
if( arr.length==1 ){
opt[0] = {...Node }
}else if(arr.length>1){
opt[1] = {...Node}
}
}
t.selectDay = arr
if(opt.length == 2){
t.FnTime(opt,arr)
}
}
}
},
// 多選特效
FnTime(Node,list){
let t = this;
let arr = [];
let num = 0;
let isNum=false
if(Node[1].day>Node[0].day ){
num = Node[1].day-Node[0].day;
isNum=true
}else{
num = Node[0].day-Node[1].day;
isNum=false
}
let o = new Array(num);
for( let i =0; i <= o.length;i++){
arr.push( `${isNum?Node[0].y:Node[1].y}-${isNum?Node[0].m<=9?'0'+Node[0].m:Node[0].m:Node[1].m<=9?'0'+Node[1].m:Node[1]}-${isNum?(Node[0].day+i)<=9?'0'+(Node[0].day+i):(Node[0].day+i):(Node[1].day+i)<=9?'0'+(Node[1].day+i):(Node[1].day+i)}` )
}
t.selectDay = arr
if(!isNum){
Node.reverse()
}
t.$emit('select',Node) //返回 選中起始時間
}
}
}
</script>
<style lang="scss">
@import "./index.scss"
</style>