uniapp日历组件

自己写的日历组件，欢迎指正

<template><view class="fu-calendar-wrap"><!-- 日历选择 start --><view class="fu-calendar-data fu-flex fu-justify-center fu-align-center fu-margin fu-height-72" v-if="changeTitle"><block v-if="changeYear"><view class="fu-arrow fu-left fu-flex fu-justify-between fu-align-center" @click="prevYear"><text class="iconfont icon-changyongicon-" :style="[yaColor]"></text></view></block><block v-if="changeMonth"><view class="fu-arrow single fu-left fu-flex fu-justify-between fu-align-center" @click="prevMonth"><text class="iconfont icon-jiantouyou" :style="[maColor]"></text></view></block><view class="fu-title fu-text-32 fu-text-333">{{ currentDate[0] }}年{{ currentDate[1] }}月</view><block v-if="changeMonth"><view class="fu-arrow single fu-right fu-flex fu-justify-between fu-align-center" @click="nextMonth"><text class="iconfont icon-jiantouyou" :style="[maColor]"></text></view></block><block v-if="changeYear"><view class="fu-arrow fu-flex fu-right fu-justify-between fu-align-center" @click="nextYear"><text class="iconfont icon-changyongicon-" :style="[yaColor]"></text></view></block></view><!-- 日历选择 end --><!-- 星期 start --><view class="fu-week fu-flex fu-justify-between fu-align-center fu-text-333 fu-height-72"><view class="fu-week-item fu-text-center" v-for="item in weekData" :key="item">{{ item }}</view></view><!-- 星期 end --><!-- 日历 start --><view class="fu-calendar fu-flex fu-justify-between fu-align-center fu-flex-wrap fu-text-333"><!-- mode == date || mode == range --><viewclass="fu-calendar-item  fu-text-center"@click="changeCalendar(item, index)":class="{ isNot: item.isNot, isFuture: item.isFuture && !item.isNot }"v-for="(item, index) in calendar":key="index"><viewclass="fu-calendar-num fu-flex fu-justify-center fu-align-center":class="{ signin: mode == 'signin', range: mode == 'range', start: item.start, end: item.end }":style="[(item.dayActive || item.start || item.end) && !item.isNot ? dayBg : {}, item.active && !item.isNot ? activeBg : {}]">{{ item.day }}<view class="fu-calendar-text" v-show="item.start">{{ startText }}</view><view class="fu-calendar-text" v-show="item.end">{{ endText }}</view></view></view></view><!-- 日历 end --></view>
</template><script>
/*** @author 邓东方*/
export default {props: {// 月份切换按钮箭头颜色'month-arrow-color':{type: String,default: '#666666'},// 年份切换按钮箭头颜色'year-arrow-color':{type: String,default: '#999999'},// 是否显示顶部年月'change-title': {type: Boolean,default: true},// 是否显示顶部的切换年份方向的按钮'change-year': {type: Boolean,default: true},// 是否显示顶部的切换月份方向的按钮'change-month': {type: Boolean,default: true},// 日期模式 date 单个日期选择模式  range 日期段选择模式  signin 签到日期展示模式mode: {type: String,default: 'date'},// 未来日期是否可选择 默认不可选择future: {type: Boolean,default: false},// 日期段回显时 若只传入一个日期则不显示//日期段选择时默认显示开始时间'start-time': {type: String,default: ''},//日期段选择时默认显示结束时间'end-time': {type: String,default: ''},// 起始日期底部的提示文字'start-text': {type: String,default: '开始'},// 结束日期底部的提示文字'end-text': {type: String,default: '结束'},// 选择日期开始结束当天背景色'active-bg-color': {type: String,default: 'rgba(41,121,255,1)'},// 选择日期中间的背景色'range-bg-color': {type: String,default: 'rgba(41,121,255,0.13)'},// 当前日期是否高亮isDefaultDay: {type: Boolean,default: true},// 单个日期选择默认选中时间 xxxx-yy-ddcurrenTime: {type: String,default: ''},// 签到模式数据 [xxxx-yy-dd]signinData: {type: Array,default: function() {return [];}}},data() {return {weekData: ['日', '一', '二', '三', '四', '五', '六'], //星期calendar: [], //日历数组currentDate: [], //当前日期currentDay: '', //当天时间start: '', //开始时间end: '', //结束时间isEmit: true //mode == range是否推送};},computed: {// 背景色dayBg() {return { background: this.activeBgColor, color: '#ffffff' };},// 时间段背景色activeBg() {return { background: this.rangeBgColor, color: '#ffffff' };},// 年份箭头颜色yaColor(){return { color: this.yearArrowColor };},// 月份箭头颜色maColor(){return { color: this.monthArrowColor };}},watch: {signinData: {deep: true,handler(newVal, oldVal) {if (mode == 'signin') {this.singinFun(this.calendar, newVal);}}}},mounted() {let currentDate = this.currentime();let y = currentDate[0];let m = currentDate[1] > 9 ? currentDate[1] : '0' + currentDate[1];let d = currentDate[2] > 9 ? currentDate[2] : '0' + currentDate[2];this.currentDate = currentDate;//  mode == 'date' 在传入单个时间时 currentDay不再显示默认的当前时间if (this.mode == 'date') {if (this.currenTime) {this.currentDay = this.currenTime;} else {if (this.isDefaultDay) {this.currentDay = `${y}-${m}-${d}`;}}}//  mode == 'date' isDefaultDay == true时 当前时间才显示if (this.mode == 'range') {if (this.isDefaultDay) {this.currentDay = `${y}-${m}-${d}`;}}// 日历赋值this.calendar = this.getCalendar(currentDate[0], currentDate[1], currentDate[2]);},methods: {/*** @description 获取当前时间函数*/currentime() {var date = new Date();var y = Number(date.getFullYear());var m = Number(date.getMonth() + 1);var d = Number(date.getDate());return [y, m, d];},isLeapYear(y){const cond1 = y % 4 == 0; //条件1：年份必须要能被4整除const cond2 = y % 100 != 0; //条件2：年份不能是整百数const cond3 = y % 400 == 0; //条件3：年份是400的倍数//当条件1和条件2同时成立时，就肯定是闰年，所以条件1和条件2之间为“与”的关系。//如果条件1和条件2不能同时成立，但如果条件3能成立，则仍然是闰年。所以条件3与前2项为“或”的关系。//所以得出判断闰年的表达式：return (cond1 && cond2) || cond3;}/*** @description 获取日历* @param {String,Number} y 年* @param {String,Number} m 月*/getCalendar(y, m) {// 求解cy年cm月cd日是星期几,parseInt代表取整 d=1是去每个月第一天var cc = parseInt(y / 100); //cvar cy = y - cc * 100; //yvar cm = m; //mvar cd = 1; //d// 某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算if (m == 1 || m == 2) {cc = parseInt((y - 1) / 100);cy = y - 1 - cc * 100;cm = 12 + m;}//w=y+[y/4]+[c/4]-2c+[26(m+1）/10]+d-1// var csum = y + [y / 4] + [c / 4] - 2c+[26(m + 1）/10]+d-1;var csum = cy + parseInt(cy / 4) + parseInt(cc / 4) - 2 * cc + parseInt((26 * (cm + 1)) / 10) + cd - 1;// 注意使用蔡勒公式时出现负数情况    fd 每月第一天星期几if (csum < 0) {var fd = parseInt(((csum % 7) + 7) % 7);} else {var fd = parseInt(csum % 7);}// 上个月天数var cond1 = y % 4 == 0; //条件1：年份必须要能被4整除var cond2 = y % 100 != 0; //条件2：年份不能是整百数var cond3 = y % 400 == 0; //条件3：年份是400的倍数//当条件1和条件2同时成立时，就肯定是闰年，所以条件1和条件2之间为“与”的关系。//如果条件1和条件2不能同时成立，但如果条件3能成立，则仍然是闰年。所以条件3与前2项为“或”的关系。//所以得出判断闰年的表达式：var cond = this.isLeapYear(y);//判断当月有多少天var allDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][m - 1];if (cond && m == 2) {allDays = 29;}//上个月是不是去年let prevYear = y;let prevMonth = m - 1;if (m == 1) {prevYear = y - 1;prevMonth = 12;}let _prevMonth = prevMonth > 9 ? prevMonth : '0' + prevMonth;let _m = m > 9 ? m : '0' + m;//判断上个月天数var prevDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][prevMonth - 1];if(prevMonth === 2 && cond)  prevDays = 29;var calendar = [];//这里塞入上个月末尾日期//day 日  active 是否选择 isNot 是不是这个月 formData 日期格式 isBg 是否加背景色（日期段筛选时使用）for (let i = 1; i <= fd; i++) {let prevDay = prevDays - fd + i;let _prevDay = prevDay > 9 ? prevDay : '0' + prevDay;calendar.push({day: prevDay,active: false,isNot: true,formData: prevYear + '-' + _prevMonth + '-' + _prevDay});}//这里塞入正常这个月的日期let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];for (let i = 1; i <= allDays; i++) {let _i = i > 9 ? i : '0' + i;calendar.push({day: i,active: false,isNot: false,formData: y + '-' + _m + '-' + _i,week: week[((i + fd - 1) % 7) % 7],year: y,month: m,allDays: allDays});}//下个月是不是下一年let nextYear = y;let nextMonth = m + 1;if (m == 12) {nextYear = y + 1;nextMonth = 1;}let _nextMonth = nextMonth > 9 ? nextMonth : '0' + nextMonth;//判断数组最后一排剩余几个位置塞入下个月日期let takedie = calendar.length % 7;if (7 - takedie > 0 && 7 - takedie < 7) {for (let i = 1; i <= 7 - takedie; i++) {let _i = i > 9 ? i : '0' + i;calendar.push({day: i,active: false,isNot: true,formData: nextYear + '-' + _nextMonth + '-' + _i});}}// 默认当天时间加背景色if (this.mode == 'date') {// 在range模式时  start end不存在时走这个if (this.isDefaultDay || this.currentDay) {this.currentDayFun(calendar, this.currentDay, true);}}if (this.mode == 'range') {// 在range模式时  start end不存在时走这个if (this.isDefaultDay || this.currentDay) {if (!this.startTime || !this.endTime) {this.currentDayFun(calendar, this.currentDay, true);}}// 当开始时间与结束时间存在时if (this.startTime && this.endTime && this.startTime != this.endTime) {// 当没有选择过时 进行赋值操作  若是已经点击过 start end存在值 就不需要赋值了if (!this.start && !this.end) {this.start = this.startTime;this.end = this.endTime;// 判断开始结束值存入本地if (!uni.getStorageSync('startItem')) {let startItem = calendar.find(item => item.formData == this.start);uni.setStorageSync('startItem', JSON.stringify(startItem));}if (!uni.getStorageSync('endItem')) {let endItem = calendar.find(item => item.formData == this.end);uni.setStorageSync('endItem', JSON.stringify(endItem));}}}this.rangeDayFun(calendar,true);}if (this.mode == 'signin') {this.singinFun(calendar, this.signinData);}// 判断未来日期是否可选择if (!this.future) {let nowData = new Date().getTime();calendar.forEach(val => {val.isFuture = false;if (new Date(val.formData).getTime() > nowData) {val.isFuture = true;}});}return calendar;},/*** @description 高亮日期  签到模式*/singinFun(calendar, data) {calendar.forEach(a => {a.dayActive = false;data.forEach(b => {if (a.formData == b) {a.dayActive = true;}});});this.calendar = calendar;this.$forceUpdate();},/*** @description 单个日期是否高亮* @param {Array} calendar 日历数组* @param {String} day 选择的日期* @param {Boolen} isInit 初始化触发change时间参数*/currentDayFun(calendar, day,isInit = false) {let that = this;calendar.forEach(item => {item.dayActive = false;if (Math.floor(new Date(item.formData).getTime() / 1000) == Math.floor(new Date(day).getTime() / 1000)) {item.dayActive = true;if (this.mode == 'date') {that.$emit('change', { day: item.day, time: item.formData, week: item.week, year: item.year, month: item.month, allDays: item.allDays,isInit:isInit });}}});this.calendar = calendar;this.$forceUpdate();},/*** @description 日期范围选择*/rangeDayFun(calendar,isInit = false) {// 判断 start  end  和中间的时间calendar.forEach(val => {val.start = false;val.end = false;val.active = false;val.dayActive = false;// 开始时间if (new Date(val.formData).getTime() == new Date(this.start).getTime()) {val.start = true;}// 结束时间if (new Date(val.formData).getTime() == new Date(this.end).getTime()) {val.end = true;}// 当开始结束时间选择完毕   开始时间大于结束时间时进行翻转if (this.start && this.end && new Date(this.start).getTime() > new Date(this.end).getTime()) {let start = this.start;this.start = this.end;this.end = start;}// 开始结束中间时间段if (new Date(val.formData).getTime() > new Date(this.start).getTime() && new Date(val.formData).getTime() < new Date(this.end).getTime()) {val.active = true;}});if (this.start && this.end && this.isEmit) {let startItem = JSON.parse(uni.getStorageSync('startItem'));let endItem = JSON.parse(uni.getStorageSync('endItem'));this.$emit('change', {start: this.start,startYear: startItem.year,startWeek: startItem.week,startMonth: startItem.month,startDay: startItem.day,end: this.end,endYear: endItem.year,endWeek: endItem.week,endMonth: endItem.month,endDay: endItem.day,isInit:isInit});this.isEmit = false;}this.calendar = calendar;this.$forceUpdate();},/*** @description 点击日期* @param {Object} item 入参 所点击日期信息*/changeCalendar(item, index) {// 签到模式纯展示模式if (this.mode == 'signin') return;// 未来日期 上下月日期不可选择if (item.isFuture || item.isNot) return;if (this.mode == 'date') {if(this.currentDay == item.formData) return;// 选择日期记录this.currentDay = item.formData;this.currentDayFun(this.calendar, item.formData);}if (this.mode == 'range') {// 当已经选择了开始结束时间时  再次点击时先清空之前的时间if (this.start && this.end) {this.start = '';this.end = '';this.isEmit = true;uni.removeStorageSync('startItem');uni.removeStorageSync('endItem');}// 默认先赋值开始时间if (!this.start && !this.end) {this.start = item.formData;uni.setStorageSync('startItem', JSON.stringify(item));} else if (this.start && !this.end) {// 当第二次选择时间和第一次相同时  不再触发赋值if (this.start == item.formData) return;this.end = item.formData;uni.setStorageSync('endItem', JSON.stringify(item));}this.rangeDayFun(this.calendar);}},/*** @description 上年今月*/prevYear() {let currentDate = this.currentDate;currentDate = [currentDate[0] - 1, currentDate[1]];this.currentDate = currentDate;this.calendar = this.getCalendar(currentDate[0], currentDate[1]);},/*** @description 下年今月*/nextYear() {let currentDate = this.currentDate;currentDate = [Number(currentDate[0]) + 1, Number(currentDate[1])];this.currentDate = currentDate;this.calendar = this.getCalendar(currentDate[0], currentDate[1]);},/*** @description 上月*/prevMonth() {let currentDate = this.currentDate;if (currentDate[1] - 1 == 0) {currentDate = [currentDate[0] - 1, 12];} else {currentDate = [currentDate[0], currentDate[1] - 1];}this.currentDate = currentDate;this.calendar = this.getCalendar(currentDate[0], currentDate[1]);},/*** @description 下月*/nextMonth() {let currentDate = this.currentDate;if (currentDate[1] == 12) {currentDate = [Number(currentDate[0]) + 1, 1];} else {currentDate = [Number(currentDate[0]), Number(currentDate[1]) + 1];}this.currentDate = currentDate;this.calendar = this.getCalendar(currentDate[0], currentDate[1]);}}
};
</script><style scoped lang="scss">
@import './css/iconfont.css';
.fu-flex {display: flex;
}
.fu-justify-center {justify-content: center;
}
.fu-justify-between {justify-content: space-between;
}
.fu-align-center {align-items: center;
}
.fu-text-32 {font-size: 32rpx;
}
.fu-text-333 {color: #333333;
}
.fu-text-center {text-align: center;
}
.fu-margin {margin: 10rpx 0;
}
.fu-height-72 {height: 72rpx;line-height: 72rpx;
}
.fu-flex-wrap {flex-wrap: wrap;
}
// 日历选择 start
.fu-calendar-data {.fu-title{padding: 0 10rpx;}.fu-arrow {height: 100%;// padding: 0 10rpx;text{font-size: 36rpx;}&.fu-left{transform: rotate(180deg);padding-left: 10rpx;}&.fu-right{padding-left: 10rpx;}&.single {text{font-size: 32rpx;}}}
}
// 日历选择 end
// 星期 start
.fu-week {.fu-week-item {width: calc(100% / 7);}
}
// 星期 end
// 日历 start
.fu-calendar {.fu-calendar-item {width: calc(100% / 7);padding-bottom: calc(100% / 7);position: relative;overflow: hidden;.fu-calendar-num {position: absolute;left: 0;top: 0;width: 100%;height: 100%;&.start {border-radius: 16rpx 0 0 16rpx;}&.end {border-radius: 0 16rpx 16rpx 0;}.fu-calendar-text {position: absolute;bottom: 4rpx;left: 0;width: 100%;font-size: 20rpx;color: #ffffff;text-align: center;}&.range {position: absolute;width: 100%;height: 90%;top: 50%;transform: translateY(-50%);}&.signin {position: absolute;width: 60%;height: 60%;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 50%;}}&.isNot {color: #eee;}&.isFuture {color: #999;}}
}
// 日历 end
</style>

引入的图标文件

@font-face {font-family: "iconfont";src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALkAAsAAAAABvQAAAKYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBTIE9ATYCJAMMCwgABCAFhG0HRRsSBhHVkxFkPwbH3d3uIhZlasTr/SlKTLHEYu+9d0fwtMZv3u7efRFJokmjeP3RFBKJ0DVBiTRCJCRCsigWyfd/00nH2qdalQSQnVuxbOa/48i4vMtnObCtXU4gJDVyrufbKis81nyey+mNAgpkfssCS3Ht+XxMwAQD2hujyC6QgLxh7Kql8pCeE2g3bUUcHJ5nYq0KvC4QzzgzY62FmKKYxVahbjhaxDuV1vQm3eGt+n78sRrdJFWGt548PXBiO98nHifaak3NpSDECfB0hYwVFOK6MXcqC5OTtetKd3WtCGmp5H+DkgWG+qB/vETUcGMnWID5xPcJJiL4PndCAhnUSWETR4g9GE6iH5fbFzf1KUY5w7eXE3BdG3eueiuSzcpXepr9EEdTYLTZB1tb2dEsqoK/nkZ/tsGbHW2UZHBKNrY13vs5yEJBzGw8dpfqdalmPF5yC6/Mu63T3KfPefK//sbx+2f1of639hXwZWXwWUWa+2JYgNaz+oO/KB84UAIltufiyZgsCmQzE7MJ7UFQE8Ohft+mK+5XJgKthjIkLaaQtZohC3sFlQ7rqLXaRrtlx6c7DHgui9KGJS8AQq8PSLp9RNbrE1nYX1EZ9g+13mhDOz4XY1f2WQ7euyfBRHCIVSXcFgGlTuyNm1PAip4p80rFzYGMeJIk1Hi5eAQByCV2RCWWRKSESuGTQ/AaeJ4goRQFsFHNI4armkabPqTawo/12iMBEwIOwlJFcDYhQMV41FthPgUwRR6T7Gjpi+cAKcInJxJU8QHkkS4Y1PIo70RKmCSEKIKSBB9xCDzAIzmBCJsXFQAbUuUnZEKrNDSKDtWp2xv8Hyg1O8B35EiRoxh8yJsBq4qA3f8UpbfAzQBFsUqtsRg=') format('woff2')
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-changyongicon-:before {content: "\e615";
}.icon-jiantouyou:before {content: "\e61b";
}

uniapp日历组件相关推荐

uni-app日历组件（calendar），兼容安卓、ios、微信、百度、抖音小程序
uni-app日历组件,兼容安卓.ios.微信.百度.抖音小程序效果图插件连接如何使用参数说明事件效果图插件连接插件链接: https://ext.dcloud.net.cn/plug ...
uni-app 日历组件的实现
以下是一个基于 uni-app 的简单日历组件实现代码,包括了日历的基本布局和日期选择功能: <template><view class="calendar"&g ...
uniapp封装日历组件
1.需求分析:获取当前日期的后5天,前15天日期组成一个数组.并按照3屏展示出来.且支持左右切换.如下图: 2.思路:先获取指定日期区间,放在数组中.7天为一个周期,切割成3个数组.使用uni的swi ...
仿钉钉考勤统计页面的日历组件，通过日历展示每日考勤打卡情况，支持在日历上打两种不同类型的点，大致适配各种分辨率效果图
原文链接:uniapp : 仿钉钉考勤统计页面的日历组件,通过日历展示每日考勤打卡情况,支持在日历上打两种不同类型的点,大致适配各种分辨率 - northwest - 博客园 (cnblogs.com ...
组件分享之前端组件——甘特图时间表时间线日历组件
组件分享之前端组件--甘特图时间表时间线日历组件背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组 ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
java月历组件_vue之手把手教你写日历组件
---恢复内容开始--- 1.日历组件 1.分析功能:日历基本功能,点击事件改变日期,样式的改变 1.结构分析:html 1.分为上下两个部分 2.上面分为左按钮,中间内容展示,右按钮下面分为周几展 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
Android一个漂亮的日历组件源码
简介: Android 一个漂亮的日历组件源码主要特性日历样式完全自定义,拓展性强左右滑动切换上下周月,上下滑动切换周月模式抽屉式周月切换效果标记指定日期(marker) 跳转到指定日期下载 ...
记：使用IScroll.js 开发picker日历组件遇到的问题及经验总结
IScroll中文文档第一个问题: 边界留白就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的.解决的办法是: 在HTML中,添加空白节点就行了. 第二个问题:初始化之后的滚动停 ...

uniapp日历组件

uniapp日历组件

uniapp日历组件相关推荐

最新文章

热门文章