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

效果图:

html:

<!-- 年月 -->
		<view class="box">
			<view class="box_time">
				<view class="time">
					<image @click="lefts" :src="url+'/uploads/20231206/9d1fb520b12383960dca3c214d84fa0a.png'" mode="">
					</image>
					<text>{
  {year}}年{
  {month}}月</text>
					<image @click="right" :src="url+'/uploads/20231206/c2f706c19e0de31b2139939c3cb089e4.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 周 -->
		<view class="box_week">
			<view class="week">
				<text v-for="(item,index) in week" :key="index">{
  {item}}</text>
			</view>
		</view>
		<!-- 日期 -->
		<view class="date">
			<view class="date_list">
				<view class="dates" v-for="(item,index) in day" :key="index">
					<view
						:class="item.num == sun ? 'list_yes' : (month > months ? 'list_null' :(year > years ? 'list_null' :(month == months && year == years && item.num > san ? 'list_null' :'list')))"
						@click="click(item)" :style="item.day  > 7 && !more_status ? 'display:none;':''">
						<!-- <view class="list"> -->
						<text>{
  {item.day}}</text>
						<view
							:class="item.status ? 'bars' : (item.num > san ? '' : (month > months ? '' :(year > years ? '' :(month == months && year == years && item.num > san ? '' :'bar'))))">
							<p></p>
						</view>
					</view>
				</view>
			</view>
		</view>

参数描述:

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;
			},

自行研究

相关推荐

  1. uniapp——定义导航栏封装

    2023-12-11 08:26:06       35 阅读
  2. IOS 代码定义UIView案例

    2023-12-11 08:26:06       9 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-11 08:26:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-11 08:26:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-11 08:26:06       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-11 08:26:06       20 阅读

热门阅读

  1. 20231210 随机矩阵和M矩阵

    2023-12-11 08:26:06       35 阅读
  2. HTTPS加密协议:保护你的隐私与安全的铠甲

    2023-12-11 08:26:06       35 阅读
  3. 【Spring】Spring 微服务中的数据分区和分片

    2023-12-11 08:26:06       32 阅读
  4. 深入理解 Flask 中的 Session 和 Cookies

    2023-12-11 08:26:06       38 阅读
  5. oracle 清理归档日志

    2023-12-11 08:26:06       40 阅读
  6. SQL Server查询计划(Query Plan)——SQL处理过程

    2023-12-11 08:26:06       36 阅读
  7. 【前端设计模式】之备忘录模式

    2023-12-11 08:26:06       31 阅读
  8. vue项目搭建---1.搭建基础的框架

    2023-12-11 08:26:06       31 阅读