uniapp自定义的日历(纯手写)

效果图:

uniapp自定义的日历(纯手写)_第1张图片

html:


		
			
				
					
					
					{{year}}年{{month}}月
					
					
				
			
		
		
		
			
				{{item}}
			
		
		
		
			
				
					
						
						{{item.day}}
						
							

参数描述:

day:获取每个月有几天

js:

year: '', //现在的年份  会变
years: '', //现在的年份不  会变
month: '', //现在的月份  会变
months: '', //现在的月份  不会变
day: '', //指定年月的天数
sun: '', //今天的日
week: '', //指定日期的第一天的星期几
more_status: false, //是否展开更多
date: '', //现在的时分秒
onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let myDate = new Date();
			this.year = myDate.getFullYear();
			this.years = myDate.getFullYear();
			this.month = String(myDate.getMonth() + 1).padStart(2, '0');
			this.months = String(myDate.getMonth() + 1).padStart(2, '0');
			this.week = this.getweekday(this.year + '-' + this.month + '-' + '01')
			this.getMonthDays2()
			this.sun = String(myDate.getDate()).padStart(2, '0');
			this.san = String(myDate.getDate()).padStart(2, '0');
			let h = myDate.getHours(); //小时
			let m = myDate.getMinutes(); //分钟
			let s = myDate.getSeconds(); //秒
			this.date = h + ':' + m + ':' + s //时分秒
		},
// 获取指定年月份的天数
			getMonthDays2() {
				let time = this.year + '-' + this.month
				let year = time.split('-')[0];
				let month = time.split('-')[1];
				let date = new Date(year, month, 0); // 这里的month,比我们日常说的几 月份小1,10则表示11月份
				let ti = date.getDate()
				let array = []
				for (let i = 0; i < ti; i++) {
					array.push({
						day: i + 1,
						num: String(i + 1).padStart(2, '0')
					})
				}
				this.day = array;
			},
getweekday(date) {
				var weekArray = new Array("7", "1", "2", "3", "4", "5", "6");

				var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
				let array = []
				for (let i = 0; i < 7; i++) {
					let time = Number(week) + i
					if (time > 7) {
						time = time - 7
					}
					if (time == 1) time = '一'
					if (time == 2) time = '二'
					if (time == 3) time = '三'
					if (time == 4) time = '四'
					if (time == 5) time = '五'
					if (time == 6) time = '六'
					if (time == 7) time = '日'
					array.push(time)
				}
				return array;
			},

自行研究

你可能感兴趣的:(uniapp,uni-app)