uniapp日历原生插件
2024-07-04 12:03:32
<template><!-- 打卡日历页面 --><view class='all'><view class="bar"><!-- 上一个月 --><view class="previous" @click="handleCalendar(0)"><button class="barbtn">上一月</button></view><!-- 显示年月 --><view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view><!-- 下一个月 --><view class="next" @click="handleCalendar(1)"><button class="barbtn">下一月</button></view></view><!-- 显示星期 --><view class="week"><view class="week_ri" v-for="(item,index) in weeks_ch" :key="index">{{item}}</view></view><view class="myDateTable"><view v-for="(item,j) in days" :key="j" class='dateCell'><view v-if="item.date==undefined || item.date == null" class='cell'><text :decode="true"> </text></view><view v-else @click="clickSignUp(item.date)"><!-- 已订餐到日期 --><view v-if="item.isSign == 5" class='cell yellow' style="background: #0000a8;color: #ffffff;"><text>{{item.date}}</text></view><view class="cell white bg-red" style="background: #0000e7;color: #ffffff;" v-else-if="item.isSign == 2"><text>{{item.date}}</text></view><!-- 点击的日期 --><view class="cell white bg-red" style="background: #ffaa7f;color: #ffffff;" v-else-if="item.isSign == 3"><text>{{item.date}}</text></view><!-- 当前日期之后 --><view class="whiteColor cell" v-else><text>{{item.date}}</text></view></view></view></view></view>
</template><script>export default {data() {return {days: [],//日历SignUp: [{'type':1,t:1},{'type':2,t:10}],//已经订餐cur_year: 0, //当前选的年cur_month: 0, //当前选的月today: parseInt(new Date().getDate()), //今天toMonth: parseInt(new Date().getMonth() + 1), //本月toYear: parseInt(new Date().getFullYear()), //本年weeks_ch: ['日', '一', '二', '三', '四', '五', '六'],};},props: {//年sendYear: {type: Number,default: new Date().getFullYear()},//月sendMonth: {type: Number,default: new Date().getMonth() + 1},},created() {this.cur_year = this.sendYear;//年this.cur_month = this.sendMonth;//月this.calculateEmptyGrids(this.cur_year, this.cur_month);this.calculateDays(this.cur_year, this.cur_month);//网络请求this.onJudgeSign(this.SignUp);},methods: {// 获取当月共多少天getThisMonthDays(year, month) {return new Date(year, month, 0).getDate()},// 获取当月第一天星期几getFirstDayOfWeek(year, month) {return new Date(Date.UTC(year, month - 1, 1)).getDay();},// 计算当月1号前空了几个格子，把它填充在days数组的前面calculateEmptyGrids(year, month) {//计算每个月时要清零this.days = [];const firstDayOfWeek = this.getFirstDayOfWeek(year, month);if (firstDayOfWeek > 0) {for (let i = 0; i < firstDayOfWeek; i++) {var obj = {date: null,isSign: false}this.days.push(obj);}}},// 绘制当月天数占的格子，并把它放到days数组中calculateDays(year, month) {const thisMonthDays = this.getThisMonthDays(year, month);for (let i = 1; i <= thisMonthDays; i++) {var obj = {date: i,isSign: false}this.days.push(obj);}//console.log(this.days);},//匹配判断当月与当月哪些日子订餐onJudgeSign(date) {var signs = date;var daysArr = this.days;//日期相同，订过餐for(var i=0;i<signs.length;i++){for (var j=0; j<daysArr.length;j++) {if (daysArr[j].date == signs[i]['t']) {if(signs[i]['type'] == 1){daysArr[j].isSign = 2;//订一餐}else{daysArr[j].isSign = 5;//订两餐}}}}this.days = daysArr;},// 切换控制年月，上一个月，下一个月handleCalendar(type) {const cur_year = parseInt(this.cur_year);const cur_month = parseInt(this.cur_month);var newMonth;var newYear = cur_year;if (type === 0) { //上个月newMonth = cur_month - 1;if (newMonth < 1) {newYear = cur_year - 1;newMonth = 12;}} else {newMonth = cur_month + 1;if (newMonth > 12) {newYear = cur_year + 1;newMonth = 1;}}this.calculateEmptyGrids(newYear, newMonth);this.calculateDays(newYear, newMonth);//网络请求this.SignUp =[{'type':1,t:3},{'type':2,t:11}],//已经订餐this.onJudgeSign(this.SignUp);this.cur_year = newYear;this.cur_month = newMonth;// this.SignUp = []; //清空this.$emit('dateChange',this.cur_year+"-"+this.cur_month); //传给调用模板页面去拿新数据 },//点击日期clickSignUp(t){// console.log(this.cur_year)//年// console.log(this.cur_month)//月var t = t;//点击的天var signs = this.SignUp;var daysArr = this.days;//日期相同，订过餐,点击的日期for(var i=0;i<signs.length;i++){for (var j=0; j<daysArr.length;j++) {if (daysArr[j].date == signs[i]['t']) {if(signs[i]['type'] == 1){daysArr[j].isSign = 2;//订一餐}else{daysArr[j].isSign = 5;//订两餐}}if(t == daysArr[j].date){daysArr[j].isSign = 3}if(daysArr[j].isSign != 2 && t != daysArr[j].date && daysArr[j].isSign != 5){daysArr[j].isSign = 1;}}}this.days = daysArr;}}}
</script><style>.all .bar {display: flex;flex-direction: row;justify-content: space-between;padding: 10rpx;}.bar .barbtn {height: 30px;line-height: 30px;font-size: 12px;}/* 星期 */.all .week {display: flex;/* flex-direction: row; *//* justify-content: space-between; */padding: 20rpx;border-radius: 10px;background-color: #fff;width: 90%;margin-left: 2%;}.week_ri{margin-left: 19rpx;padding: 0 48rpx 0 0;}.myDateTable {margin: 2.5vw;border-radius: 10px;background: #fff;}.myDateTable .dateCell {width: 11vw;padding: 1vw;display: inline-block;text-align: center;font-size: 16px;}.dateCell .cell {display: flex;border-radius: 50%;height: 9vw;justify-content: center;align-items: center;}.greenColor {color: #01b90b;font-weight: bold;}.bgWhite {background-color: #fff;}.bgGray {background-color: rgba(255, 255, 255, 0.42);}.bgBlue {font-size: 14px;background-color: #4b95e6;}.redColor {color: #ff0000;}.TipArea{word-break:break-all;word-wrap:break-word;font-size: 14px;padding: 10px;}.impTip{display: inline-block;color: #ff0000;}
</style>uniapp日历原生插件相关推荐
- Android uni-app 封装原生插件
前言 据广大用户的需求,需要把我们anyRTC的SDK,封装到uni-app来使用,并且实现音视频通话.这边文章图文讲解一下怎么封装原生插件,并且在下一章uni-app实现音视频通话. anyRTC开 ...
- uniapp 常用原生插件大全（2023年最新）
文章目录 前言 1.扫码 2.文件选择 3.图片选择 4.图片编辑(涂鸦.贴图.滤镜.裁剪.美颜.文字等) 5.图片压缩 6.图片水印 7.视频压缩.剪辑 8.应用消息通知 6.应用未读角标 7.保活 ...
- uniapp ios原生插件开发之component
文章目录 一.前言 二.扩展component 2.1 组件的生命周期 2.2 插件打包配置 2.3 在 uni-app 中使用组件 2.4 自定义component事件 2.5 自定义compone ...
- uniapp ios原生插件引入图片等资源文件方式
文章目录 一.前言 二.资源文件.bundle的存放位置 三.package.json 配置文件简单说明 resources 四.参考 一.前言 在uniapp官方文档上,对于依赖资源文件处理的提示是 ...
- uniapp ios原生插件开发之插件包格式(package.json)
文章目录 一.前言 二.插件包格式介绍 2.1 package.json 2.2 iOS 插件包配置 plugins integrateType 依赖资源文件 resources embedSwift ...
- 【java笔记-006】【uni-app】当前运行的基座不包含原生插件[xxx]，请在manifest中配置该插件，重新制作包括该原生插件的自定义运行基座
uni-app引入原生插件的步骤如下:https://nativesupport.dcloud.net.cn/NativePlugin/course/android 将制作好的原生安卓插件包 复制到 ...
- 六、UniApp 调试自定义原生插件的两种方式
文章目录 一.前言 二.原生插件的导入 步骤1:指定存放位置 步骤2:插件导入配置 三.自定义基座调试 3.1 制作自定义基座 3.2 编写调试插件的vue页面 3.3 运行到手机 四.生成原生打包资 ...
- Uniapp——使用安卓原生插件
Uniapp--使用安卓原生插件 1. 开发环境 2. 解压SDK压缩包 3. 导入UniPlugin-Hello-AS项目.并切换为project显示 4. 可删除提供的demo文件 5. 新建mo ...
- uniapp 调用安卓原生插件 安卓原生又调用了第三方sdk（第三方原生开发的aar怎么转成uni可以使用的aar）
最近在做一个关于uniapp的项目,遇到一个需求.有一个原生开发的aar的原生插件,不是插件市场的,开发说明原生开发的插件不可以直接提供给uniapp使用,需要按照uniapp原生插件开发文档重新制作 ...
最新文章
- 用类模拟C风格的赋值+返回值
- 不要对对象进行粗暴的等号赋值
- C# SqlBulkCopy数据批量入库
- metamask中的import account的代码实现
- android 智能指针的学习先看邓凡平的书扫盲 再看前面两片博客提升
- Codeforces Round #149 (Div. 2)【AK】
- Android Activity和Fragment的生命周期图
- php实现无限级分类（递归方法）
- shell 查看空行与删除空行
- HFSS阵列天线仿真
- SG函数（hdu1847）
- 【POCKET 51】用 pocket 51学51单片机 ：使用pocket 51播放音乐
- 计算机四级网络工程师知识点（非常全面！）
- 51单片机8位数码管显示学号变化
- 供应链管理-降低产品复杂度
- viso 画背景框_officevisio怎么设置背景图和图纸...
- 阿里云服务器ECS和VPS主机的区别在哪里
- 奥威软件大数据bi_2018中国大数据BI领域影响力企业 奥威实至名归
- vuetify calendar实现日历考勤
- 微软 Surface Laptop 系统恢复