html
<view id="calendar">
<view class="calendar_box">
<wTitleBar title="选择日期和人数" isReturn="true" textAlign="center" returnColor="1"></wTitleBar>
<!-- 年月 -->
<view class="calendar_box_year">
<image v-show="now.month<month" src="../../static/calendar/[email protected]" mode="widthFix"
@click="lastMonth"></image>
<image v-show="now.year!=year" src="../../static/calendar/[email protected]" mode="widthFix"
@click="lastMonth"></image>
<view>{
{
year+'年'+month + '月'}}</view>
<image v-show="now.year==year" src="../../static/calendar/[email protected]" mode="widthFix"
@click="nextMonth"></image>
</view>
<!-- 周 -->
<view class="calendar_box_week">
<view class="week" v-for="(item,index) in week" :key="index">
{
{
item}}
</view>
</view>
<!-- 天 -->
<view v-if="!shrink" class="calendar_box_day">
<!-- (`${
year}-${
month}-${
item}` == selected && year == now.year && month == now.month && item == now.day)? 'today': '' 选中今天 -->
<!-- `${
year}-${
month}-${
item}` == selected && exhibit ==true ? 'selected': '' 点击选中-->
<view @click="selectDay(item)"
:class="['day',`${
year}-${
month}-${
item}` == selected && exhibit ==true ? 'selectday': '']"
v-for="(item,index) in dayList" :key="index">
<text v-show="now.month==month" :class="[item < now.day ?'day_number':'']">{
{
item}}</text>
<text v-show="now.month!=month">{
{
item}}</text>
</view>
</view>
<!-- <view class="footer">
<image @click="shrink = !shrink" :class="{shrink}" :src="arrowRightImg" mode="widthFix"></image>
</view> -->
</view>
</view>
js
export default {
data() {
return {
year: '',
month: '',
day: '',
week: ['日', '一', '二', '三', '四', '五', '六'],
dayList: [],
now: {
year: '',
month: '',
day: ''
},
selected: '',
shrink: false,
exhibit: false,
}
},
watch: {
month: function() {
this.setDayList();
}
},
created() {
this.init();
},
mounted() {
},
methods: {
getDateArray() {
if (!this.date) return [];
if (this.date.match(/\//g).length == 3) {
return this.date.split(' ')[0].split('/');
}
if (this.date.match(/-/g).length == 3) {
return this.date.split(' ')[0].split('-');
}
return [];
},
/**
* 初始化
*/
init() {
let date = new Date();
const dateArray = this.getDateArray().map(item => parseInt(item));
if (dateArray.length > 0) {
this.year = dateArray[0];
this.month = dateArray[1];
this.day = dateArray[2];
} else {
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.day = date.getDate();
}
this.setNow(date);
this.selected = `${
this.year}-${
this.month}-${
this.day}`;
},
/**
* 设置当前年月日
*/
setNow(date) {
this.now.year = date.getFullYear();
this.now.month = date.getMonth() + 1;
this.now.day = date.getDate();
},
/**
* 下一个月
*/
nextMonth() {
if (this.month + 1 > 12) {
this.year = this.year + 1;
this.month = 1;
} else {
this.month = this.month + 1;
}
},
/**
* 上一个月
*/
lastMonth() {
if (this.month - 1 < 1) {
this.year = this.year - 1;
this.month = 12;
} else {
this.month = this.month - 1;
}
},
/**
* 设置日历天
*/
setDayList() {
let date = new Date(this.year, this.month - 1, 1);
let date1 = new Date(this.year, this.month, 0);
//获取当前月第一天是周几，0等于周日
let oneDay = date.getDay();
//获取当前月天数
let monthDay = date1.getDate();
let dayList = [];
for (var i = 0; i < oneDay; i++) {
dayList.push('')
}
for (var i = 0; i < monthDay; i++) {
dayList.push(i + 1)
}
// const emptyNum = Math.ceil(dayList.length / 7) * 7 - dayList.length;
// for(var i =0; i < emptyNum; i++) {
// dayList.push('');
// }
this.dayList = dayList;
},
selectDay(day) {
// uni.showToast({
// title: '大于今天',
// icon:'none',
// duration: 2000
// });
if (day >= this.now.day) {
this.exhibit = true
this.day = day;
const timeStr = `${
this.year}-${
this.month}-${
this.day}`;
this.selected = timeStr;
// console.log('now.day',this.now.day)
} else {
this.exhibit = false
}
// if (!day) return;
// this.$emit('select', {
// time: timeStr,
// arr: [this.year, this.month, this.day]
// });
}
}
}
css
#calendar {
font-size: 30rpx;
.calendar_box {
width: 95%;
height: 100%;
margin: auto;
// 年月日
.calendar_box_year {
width: 100%;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
background: #EFEFEF;
image {
width: 26rpx;
height: 26rpx;
}
}
.calendar_box_year view {
margin: 0rpx 20rpx;
font-weight: 600;
color: #333333;
letter-spacing: 1rpx;
}
// 周
.calendar_box_week {
width: 100%;
height: 40rpx;
display: flex;
margin-top: 60rpx;
text-align: center;
}
.calendar_box_week .week {
width: 14.28%;
line-height: 40rpx;
font-size: 28rpx;
font-weight: 600;
color: #666666;
}
// 天
.calendar_box_day {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.day {
position: relative;
width: 14.28%;
height: 100rpx;
color: #333333;
letter-spacing: 1rpx;
display: flex;
line-height: 60rpx;
justify-content: center;
}
.day_number {
color: #CCCCCC;
}
// 选中天数
.selectday {
background: #53DDFD;
text {
color: white;
}
}
// 今天
.today {
background: #29B9FB;
text {
color: white;
}
}
.day_text {
display: inline-block;
width: 100%;
position: absolute;
bottom: 0rpx;
text-align: center;
font-size: 18rpx;
color: #E97911;
}
}
// .footer {
// margin-top: 16px;
// // @include flex(center);
// >image {
// width: 24px;
// height: 24px;
// transform: rotate(90deg);
// transition: all .3s ease;
// }
// .shrink {
// transform: rotate(-90deg);
// }
// }
}
}