实现的日历效果图
话不多说，上代码！
<template> <view class="page"> <safe-area></safe-area> <view class="calendar-wrapper"> <view class="calendar-toolbar"> <text class="prev" onclick="prevMonth">〈</text> <text class="current">{{ currentDateStr }}</text> <text class="next" onclick="nextMonth">〉</text> </view> <view class="calendar-week"> <text class="week-item" v-for="item of weekList" :key="item">{{ item }}</text> </view> <view class="calendar-inner"> <text class="calendar-item" v-for="(item, index) of calendarList" :key="index" :class="this.changestyle(item.disable,item.value)" onclick="selDate" :data-val="item.value" :data-status="item.disable" :data-num="item.date">{{ item.date }}</text> </view> </view> </view> </template> <script> export default { name: 'calendar', installed(){ this.setCurrent(); this.calendarCreator(); }, data() { return{ current:{}, weekList:['周日','周一','周二','周三','周四','周五','周六'], shareDate: new Date(), calendarList: [], seldate:'点击选择日期', selweek:'待定', } }, computed: { // 显示当前时间 currentDateStr() { let { year, month } = this.current; return `${year}年${this.pad(month + 1)}月`; } }, methods: { selDate (e){ // console.log(JSON.stringify(e.currentTarget.dataset.val)); let status = e.currentTarget.dataset.status; let num = e.currentTarget.dataset.num; if(status){ this.data.seldate = e.currentTarget.dataset.val; this.getWeek(); if(num>7){ this.prevMonth(); } else{ this.nextMonth(); } } else{ this.data.seldate = e.currentTarget.dataset.val; this.getWeek(); //重新加载一次日历 改变样式 this.calendarCreator(); } this.fire('clickDate', this.data.seldate); }, changestyle(status,date){ if(status){ return 'calendar-item-disabled'; } else{ if(date == this.data.seldate){ return 'calendar-item-checked'; } else{ return 'calendar-item'; } } }, // 判断当前月有多少天 getDaysByMonth(year, month) { // console.log("本月多少天："+new Date(year, month + 1, 0).getDate()); return new Date(year, month + 1, 0).getDate(); }, getFirstDayByMonths(year, month) { // console.log("本月第一天周几："+new Date(year, month, 1).getDay()); return new Date(year, month, 1).getDay(); }, getLastDayByMonth(year, month) { // console.log("本月最后一天周几："+new Date(year, month + 1, 0).getDay()); return new Date(year, month + 1, 0).getDay(); }, // 对小于 10 的数字，前面补 0 pad(str) { return str < 10 ? `0${str}` : str; }, // 点击上一月 prevMonth() { this.current.month--; // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算 this.correctCurrent(); // 生成新日期 this.calendarCreator(); }, // 点击下一月 nextMonth() { this.current.month++; // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算 this.correctCurrent(); // 生成新日期 this.calendarCreator(); }, // 格式化时间，与主逻辑无关 stringify(year, month, date) { let str = [year, this.pad(month + 1), this.pad(date)].join('-'); return str; }, // 设置或初始化 current setCurrent(d = new Date()) { let year = d.getFullYear(); let month = d.getMonth(); let date = d.getDate(); this.current = { year, month, date } }, // 修正 current correctCurrent() { let { year, month, date } = this.data.current; let maxDate = this.getDaysByMonth(year, month); // 预防其他月跳转到2月，2月最多只有29天，没有30-31 date = Math.min(maxDate, date); let instance = new Date(year, month, date); this.setCurrent(instance); }, // 生成日期 calendarCreator() { // 一天有多少毫秒 const oneDayMS = 24 * 60 * 60 * 1000; let list = []; let { year, month } = this.data.current; // 当前月份第一天是星期几, 0-6 let firstDay = this.getFirstDayByMonths(year, month); // 填充多少天 let prefixDaysLen = firstDay === 0 ? 7 : firstDay; // 毫秒数 let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen; // 当前月份最后一天是星期几, 0-6 let lastDay = this.getLastDayByMonth(year, month); // 填充多少天， 和星期的排放顺序有关 let suffixDaysLen = lastDay === 0 ? 6 : 6 - lastDay; // 毫秒数 let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen; while (begin <= end) { // 享元模式，避免重复 new Date this.data.shareDate.setTime(begin); let year = this.data.shareDate.getFullYear(); let curMonth = this.data.shareDate.getMonth(); let date = this.data.shareDate.getDate(); list.push({ year: year, month: curMonth, date: date, disable: curMonth !== month, value: this.stringify(year, curMonth, date) }); begin += oneDayMS; } this.data.calendarList = list; // console.log(JSON.stringify(this.data.calendarList)); }, //获取选中日期的周几 getWeek(){ let index =new Date(this.data.seldate).getDay(); let weekArr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五','星期六']; let week = weekArr[index]; this.data.selweek = week; }, } } </script> <style> .page { height: 100%; } .calendar-wrapper { margin: 10px 10px 0 10px; background-color:#3c40c6; border-top-left-radius: 10px; border-top-right-radius: 10px; max-height: 400px; } .calendar-toolbar { padding: 10px 10px; flex-flow: row nowrap; justify-content: space-between; align-items: center; border-bottom: 1px solid #fff; } .prev{ flex: 1; text-align: center; color: #fff; } .current { flex: 1; text-align: center; color: #fff; } .next{ flex: 1; text-align: center; color: #fff; } .calendar-week { padding: 5px 10px; flex-flow: row nowrap; justify-content: space-around; align-items: center; } .week-item { padding: 5px; font-weight: bolder; font-size: 12px; color: #fff; } .calendar-inner{ padding: 10px 10px; flex-flow: row wrap; justify-content: space-around; align-items: center; } .calendar-item { width:14%; font-weight: bolder; text-align: center; font-size: 15px; color: #fff; padding: 5px; background-color: #3c40c6; } .calendar-item-disabled { width:14%; font-weight: bolder; text-align: center; font-size: 15px; color: #999; } .calendar-item-checked { width:14%; font-weight: bolder; text-align: center; font-size: 15px; color: #000000; background-color: #ffffff; border-radius: 5px; } </style>
其他页面引用
<template> <view class="page"> <calendar onclickDate="getSelDate"></calendar> <view> <text>当前日期是</text> <text>{today}</text> </view> </view> </template> <script> import '../../components/calendar.stml' export default { name: 'test', apiready(){ }, data() { return{ today:'' } }, methods: { getSelDate(e){ console.log(JSON.stringify(e)); this.data.today = e.detail; api.toast({ msg:'当前选中日期是：'+e.detail }) } } } </script> <style> .page { height: 100%; } </style>
现在，APICloud 官方正在举办 AVM 组件的征集大赛，通过审核就能获得一定的奖金，大家感兴趣的也可以去围观一下。传送门：https://www.apicloud.com/activity2205
