效果图:
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.monthlet 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一个Datelet array = []for (let i = 0; i < 7; i++) {let time = Number(week) + iif (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;},
自行研究