282 lines
7.0 KiB
Vue
282 lines
7.0 KiB
Vue
<template>
|
|
<view class="select_time_range">
|
|
<view class="sche_calendar">
|
|
<view class="sche_month">
|
|
<view class="iconfont icon-arrows_left" @click="prev"></view>
|
|
<view>{{time}}</view>
|
|
<view class="iconfont icon-arrows_right" @click="next"></view>
|
|
</view>
|
|
<view class="calendar">
|
|
<view class='header'>
|
|
<view v-for="(item,index) in date" :key="item" :class='[(index == todayIndex) && isTodayWeek ? "weekMark" : ""]'>{{item}}
|
|
</view>
|
|
</view>
|
|
<!-- 每一天你的日期 -->
|
|
<view class='date-box'>
|
|
<view v-for="(item,index) in dateArr" :key="item.isToday" :class='[isToday == item.isToday ? "nowDay" : "",todayData == item.isToday ? "nowdate" : ""]'
|
|
@click="everyDay(item.isToday,item.dateNum)">
|
|
<view></view>
|
|
<view class='date-head' :class="[item.dateNum>=start && item.dateNum <= end?'red':'']">
|
|
<view class="date-style">{{item.dateNum}}</view>
|
|
<view v-if="item.dateNum >=start && item.dateNum <= end > 0">{{item.dateNum ==start?'起':''}}</view>
|
|
<view v-if="item.dateNum >=start && item.dateNum <= end > 0">{{item.dateNum ==end?'止':''}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
//
|
|
export default {
|
|
data() {
|
|
return {
|
|
date: ['日', '一', '二', '三', '四', '五', '六'],
|
|
todayIndex: 0, //表示星期几
|
|
dateArr: [], //储存每个月日期的数组
|
|
todayData: 0, //今天是几号
|
|
year: 0, //年
|
|
month: 0, //月
|
|
day: 0, //日
|
|
isToday: 0, //今天是几号
|
|
isTodayWeek: false, //
|
|
start: 0, //开始
|
|
end: 0, //结束
|
|
dataquan: true, //是否自定义选择区间
|
|
time: '' //当前月份
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
created() {
|
|
this.getDataInfo()
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
getDataInfo() {
|
|
let now = new Date();
|
|
let year = now.getFullYear();
|
|
let month = (now.getMonth() + 1 + '').padStart(2, 0);
|
|
let day = (now.getDate() + '').padStart(2, 0);
|
|
this.dateInit();
|
|
this.year = year;
|
|
this.month = month;
|
|
this.day = now.getDate()
|
|
this.isToday = '' + year + "/" + month + "/" + day
|
|
this.todayData = '' + year + "/" + month + "/" + day
|
|
this.time = `${year}年${month}月`
|
|
},
|
|
// 点击切换日期
|
|
everyDay(date, dateNum) {
|
|
// start 和 end 全不是0
|
|
if (this.dataquan === true) {
|
|
if (this.start != 0 && this.end != 0) {
|
|
this.start = 0 //暂时定义为开始时间
|
|
this.end = 0
|
|
}
|
|
// start 和 end 全部是0
|
|
if (this.start == 0 && this.end == 0) {
|
|
this.start = dateNum //暂时定义为开始时间
|
|
} else if (dateNum < this.start) {
|
|
this.end = this.start
|
|
this.start = dateNum
|
|
} else if (dateNum > this.start) {
|
|
this.end = dateNum
|
|
}
|
|
}
|
|
this.isToday = date
|
|
},
|
|
// 初始化当前日期格式 yyyy-mm-dd
|
|
dateInit: function(setYear, setMonth) {
|
|
let dateArr = []; //需要遍历的日历数组数据
|
|
let arrLen = 0; //dateArr的数组长度
|
|
let now = setYear ? new Date(setYear, setMonth) : new Date();
|
|
let year = setYear || now.getFullYear();
|
|
let nextYear = 0;
|
|
let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
|
|
let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
|
|
let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目标月1号对应的星期
|
|
let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
|
|
let obj = {};
|
|
let num = 0;
|
|
//
|
|
if (month + 1 > 11) {
|
|
nextYear = year + 1;
|
|
dayNums = new Date(nextYear, nextMonth, 0).getDate();
|
|
}
|
|
arrLen = startWeek + dayNums;
|
|
for (let i = 0; i < arrLen; i++) {
|
|
if (i >= startWeek) {
|
|
num = i - startWeek + 1;
|
|
obj = {
|
|
isToday: '' + year + "/" + ((month + 1) + '').padStart(2, 0) + "/" + (num + '').padStart(2, 0),
|
|
nowdate: '' + year + "/" + ((month + 1) + '').padStart(2, 0) + "/" + (num + '').padStart(2, 0),
|
|
dateNum: num,
|
|
}
|
|
} else {
|
|
obj = {};
|
|
}
|
|
dateArr[i] = obj;
|
|
}
|
|
this.dateArr = dateArr
|
|
let nowDate = new Date();
|
|
let nowYear = nowDate.getFullYear();
|
|
let nowMonth = nowDate.getMonth() + 1;
|
|
let nowWeek = nowDate.getDay();
|
|
let getYear = setYear || nowYear;
|
|
let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
|
|
if (nowYear == getYear && nowMonth == getMonth) {
|
|
this.isTodayWeek = true,
|
|
this.todayIndex = nowWeek
|
|
} else {
|
|
this.isTodayWeek = false,
|
|
this.todayIndex = -1
|
|
}
|
|
},
|
|
prev() {
|
|
this.year = parseInt(this.month) - 1 == 0 ? this.year - 1 : this.year
|
|
this.month = parseInt(this.month) - 1 == 0 ? 12 : parseInt(this.month) - 1;
|
|
let setYear = this.year;
|
|
let setMonth = this.month - 1
|
|
this.time = `${setYear}年${(this.month+'').padStart(2,0)}月`
|
|
this.dateInit(setYear, setMonth);
|
|
},
|
|
next() {
|
|
this.year = parseInt(this.month) + 1 > 12 ? this.year + 1 : this.year
|
|
this.month = parseInt(this.month) + 1 > 12 ? 1 : parseInt(this.month) + 1;
|
|
let setYear = this.year;
|
|
let setMonth = this.month - 1
|
|
this.time = `${setYear}年${(this.month+'').padStart(2,0)}月`
|
|
this.dateInit(setYear, setMonth);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sche_calendar {
|
|
background-color: #fff;
|
|
margin-bottom: 20rpx;
|
|
|
|
.sche_month {
|
|
display: flex;
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
justify-content: space-between;
|
|
padding: 0 50rpx;
|
|
|
|
.icon-arrows_left,
|
|
.icon-arrows_right {
|
|
font-size: 50rpx;
|
|
}
|
|
}
|
|
|
|
.calendar {
|
|
padding: 0 20rpx;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
background-color: #fff;
|
|
|
|
.header {
|
|
view {
|
|
display: inline-block;
|
|
width: 14.285%;
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.weekMark {
|
|
position: relative;
|
|
|
|
view {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
border-bottom: 1px solid #22A7F6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.date-box>view {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 14.285%;
|
|
color: #020202;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
margin: 10rpx 0;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.red {
|
|
background: #52c1f5 !important;
|
|
border-radius: 0 !important;
|
|
width: auto !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
|
|
|
|
.date-box {
|
|
font-size: 0;
|
|
padding: 10rpx 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.btn_fix {
|
|
position: fixed;
|
|
bottom: 100rpx;
|
|
right: 80rpx;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
}
|
|
}
|
|
|
|
.date-head {
|
|
height: 60rpx;
|
|
/* line-height: 60rpx; */
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: flex-start;
|
|
color: #999;
|
|
.date-style {
|
|
line-height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.nowDay .date-head {
|
|
width: 60rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
color: #fff !important;
|
|
background-color: #52c1f5;
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.nowdate .date-head {
|
|
color: #52c1f5;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.van-hairline--top-bottom {
|
|
position: fixed;
|
|
}
|
|
</style>
|