适用vue，uniapp月份日期周几的选择

绝地灬酷狼 2022-12-03 01:44 440阅读 0赞

**下面引入的 common.js**

<template>
    	<view>
    		<view class="rqxz">
    			<view><button type="primary" size="mini" @click="lastMonth">上一月</button></view>
    			<view v-if="month >= 10">{
        {
         year }}-{
        {
         month }}</view>
    			<view v-else>{
        {
         year }}-0{
        {
         month }}</view>
    			<view><button type="primary" size="mini" @click="nextMonth">下一月</button></view>
    		</view>
    		<view class="weekBox">
    			<block v-for="item in weekList" :key="item">
    				<view>{
        {
         item.slice(1) }}</view>
    			</block>
    		</view>
    
    		<view class="BigBox">
    			<block v-for="(item, index) in everyDay" :key="item.day">
    				<view class="MWBox">
    					<view @click="selectDay(item, index)" :class="day == item.day ? 'daySelect' : ''">{
        {
         item.day }}</view>
    					
    				</view>
    			</block>
    		</view>
    		<button type="default" @click="submit">提交</button>
    	</view>
    </template>
    
    <script>
    import common from '../../common/common.js';//封装的格式化日期方法
    export default {
        
    	data() {
        
    		return {
        
    			weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    			year: 2020,
    			month: 0,
    			day: 0,
    			week: '',
    			everyDay: []
    		};
    	},
    	onLoad() {
        
    		this.year = Number(common.GetNowTime(new Date(), 2).slice(0, 4));
    		this.month = Number(common.GetNowTime(new Date(), 2).slice(5, 7));
    		this.day = Number(common.GetNowTime(new Date(), 2).slice(8, 10));
    		this.getEveryDay(this.year + '-' + this.month);
    	},
    	methods: {
        
    		//上一月
    		lastMonth() {
        
    			this.month -= 1;
    			if (this.month == 0) {
        
    				this.year -= 1;
    				this.month = 12;
    			}
    			this.getEveryDay(this.year + '-' + this.month);
    			this.zeroData();
    		},
    		//下一月
    		nextMonth() {
        
    			this.month += 1;
    			if (this.month > 12) {
        
    				this.year += 1;
    				this.month = 1;
    			}
    			this.getEveryDay(this.year + '-' + this.month);
    			this.zeroData();
    		},
    		//选择日期
    		selectDay(item, index) {
        
    			if (item.day != '') {
        
    				this.day = item.day;
    				this.week = item.week;
    			}
    		},
    		//提交按钮事件
    		submit() {
        
    			console.log(common.GetNowTime(new Date(this.year + '-' + this.month + '-' + this.day), 2));
    		},
    		//遍历月份日期
    		getEveryDay(data) {
        
    			let date = new Date(data);
    			let month = date.getMonth();
    			//设置月份
    			date.setMonth(month + 1);
    			//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
    			date.setDate(0);
    			let dayArry = [];
    			let day = date.getDate(); //获取当前月最后一天是几号
    
    			for (let i = 1; i <= day; i++) {
        
    				date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
    				dayArry.push({
         day: i, week: this.getWeekday(date.getDay()) }); //选中月份的每一天和当天是星期几
    			}
    
    			this.everyDay = dayArry;
    			this.resetDay();
    		},
    		getWeekday(day) {
        
    			return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day];
    		},
    		//重置日期与顶部周期相对应
    		resetDay() {
        
    			let arr = this.weekList;
    			let w = this.everyDay[0].week;
    			arr.forEach((v, index) => {
        
    				if (v == w) {
        
    					let id = index;
    					if (id != 0) {
        
    						for (let i = 0; i < id; i++) {
        
    							this.everyDay.unshift({
         day: '', week: '' });
    						}
    					}
    				}
    			});
    		},
    		//判断选择的日期是否在当前月份中存在，不存在默认当前月的第一天
    		zeroData() {
        
    			let that = this;
    			that.selectIndex = -1;
    			let arr = that.everyDay;
    			let day1 = that.day;
    			var ret = arr.findIndex(v => {
        
    				return v.day == day1;
    			});
    			if (ret == -1) {
        
    				that.day = 1;
    			}
    		}
    	}
    };
    </script>
    
    <style lang="less" scoped>
    .rqxz {
        
    	width: 100%;
    	display: flex;
    	justify-content: space-around;
    	align-items: center;
    	margin: 20upx 0;
    }
    .weekBox {
        
    	width: 100%;
    	display: flex;
    	align-items: center;
    	view {
        
    		text-align: center;
    		width: 14%;
    	}
    }
    .BigBox {
        
    	width: 100%;
    	display: flex;
    	flex-wrap: wrap;
    	background-color: #83cbac;
    	padding-bottom: 40upx;
    	.MWBox {
        
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		text-align: center;
    		color: #ffffff;
    		width: 14%;
    		margin-top: 40upx;
    		view {
        
    			height: 50upx;
    		}
    	}
    }
    .daySelect {
        
    	// width: 50upx;
    	height: 50upx;
    	background-color: #2b7c38;
    	border-radius: 25upx;
    	line-height: 50upx;
    }
    </style>

**效果图：**  
![不要在意样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxNjMwOQ_size_16_color_FFFFFF_t_70_pic_center]

`本文由自己开发，不足之处,欢迎大佬们指出（不要在意样式）`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxNjMwOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/58556571a5cd4708b5b27ede95f9233f.png