uni-app 插件 Calendar 日历多选（不是范围选择）

1.如果你们要的是这种就继续往下看哈（日历多选）

2.日期设置时间段仍可以选择当前日期区间，而我们要的是（今天4.22 我设置开始日期5.5，结束日期5.11，只有这个区间可以选择才符合我们的需求）如图

先说说第一点
Calendar 插件有一个change方法，返回选择的日期信息，so我们就要对这个方法进行下手。查看组件uni-calendar.vue中的choiceDate方法可得知每次选择日期信息，进而我们定义一个数组来接受我们每次选择的信息

choiceDate(weeks) {if (weeks.disable) returnthis.calendar = weeks//定义数组dateArr添加或删除日期值  fullDate 为选择的日期 2021-04-22if(this.dateArr.indexOf(this.calendar.fullDate)==-1) {console.log('tianjia')this.dateArr.push(this.calendar.fullDate)}else {var index= this.dateArr.indexOf(this.calendar.fullDate)this.dateArr.splice(index,1)}console.log(this.dateArr)// 设置多选console.log(this.calendar)this.cale.setMultiple(this.calendar.fullDate)this.weeks = this.cale.weeks//在change事件中返回值this.change()},

change事件种返回dateArr （setEmit方法中）

这一步完成后我们就可看到自己选择的多个日期信息

接下来是回显所选日期的样式了找到uni-calendar-item.vue子组件，父子组件传值dateArr，在子组件操作：

当然我们也可以更改背景色等

.uni-calendar-item--checked {background-color: $uni-color-primary;color: #fff;opacity: 0.8;background-color: #FFD622;}

多选日历完成

第二点日期范围不可选问题
找到插件的utils.js文件找到**_currentMonthDys**这个方法，（图片为该方法中每天的日期信息，我们需要更改disable的值）

进而找到 dateCompare方法，更改这个方法的用途及逻辑

更改逻辑（_currentMonthDys方法中）

更改方法（拿一个月的每一天与开始和结束日期作比较，满足返回false，false为可选）

/*** 比较时间大小*/dateCompare(startDate, nowDate, endDate) {// 计算截止时间startDate = new Date(startDate.replace('-', '/').replace('-', '/'))nowDate = new Date(nowDate.replace('-', '/').replace('-', '/'))// 计算详细项的截止时间endDate = new Date(endDate.replace('-', '/').replace('-', '/'))if(startDate<=nowDate&&nowDate<=endDate) {return false}else {return true}// if (startDate <= endDate) {//   return true// } else {//    return false// }}
```第二点搞定~，原创不易，点赞支持i谢谢

uni-app 插件 Calendar 日历多选（不是范围选择）相关推荐

php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...
记一次easyui使用calendar日期插件实现日期多选
easyui使用calendar日期插件实现日期多选写在前面需求知己知彼百战百胜写完收工写在前面 java开发,17年大专毕业.好不容易找个工作做了一年半左右结果行业不景气,我还没凉公司先 ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
日历 android 周历,Android Studio 基础之获取系统Calendar 日历日程（涉及指定日期时间判断是星期几的方法使用）的方法整理...
Android Studio 基础之获取系统Calendar 日历日程 (涉及指定日期时间判断是星期几的方法使用)的方法整理目录 Android Studio 基础之获取系统Calendar ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
uniapp 日期插件_Calendar 日历
更新记录 1.3.14(2020-05-22) 修复自定义easycom规则,子组件提示未找到的Bug 1.3.13(2020-05-22) 修复自定义easycom规则,子组件提示未找到的Bug ...
Android Studio 基础之获取系统Calendar 日历日程（可获得当天以后可设定天数范围内的日历日程）（涉及指定日期时间判断是星期几的方法使用）的方法整理
Android Studio 基础之获取系统Calendar 日历日程(可获得当天以后可设定天数范围内的日历日程) (涉及指定日期时间判断是星期几的方法使用)的方法整理目录 Android St ...

uni-app 插件 Calendar 日历多选（不是范围选择）

uni-app 插件 Calendar 日历多选（不是范围选择）相关推荐

最新文章

热门文章

uni-app 插件 Calendar 日历多选 （不是范围选择）

uni-app 插件 Calendar 日历多选 （不是范围选择）相关推荐

最新文章

热门文章

uni-app 插件 Calendar 日历多选（不是范围选择）

uni-app 插件 Calendar 日历多选（不是范围选择）相关推荐