wrs-calendar日历插件

2021-07-07 本文已影响0人浪人残风

前言

wrs-calendar是app原生日历控件插件

功能

支持单选、多选、单个范围选择日期
自定义选中日期颜色、选中日期背景色、连续选中日期范围的中间日期颜色和背景颜色

原生插件通用使用流程

HBuildX集成原生插件请参考:https://www.jianshu.com/p/1418c9e73eb3 或官网https://nativesupport.dcloud.net.cn/NativePlugin/use/use

wrs-calendar插件

使用

 <wrs-calendar ref='calendar' :style="'width:'+width+'px;height:'+height+'px;'" :config="config" @onSelectDateChange="onSelectDateChange"></wrs-calendar>
        data() {
            return {
                height: 280,
                width: 300,
                config: {
                  chooseType: "range", // 日历选择类型,多选multip、单选single、选择一个范围range
                  selectedTxtColor: '#FFFFFF', // 选中日期颜色
                  selectedBgColor: '#FF5343',// 选中日期背景色
                  selectedMidTxtColor:'#FFFFFF',// 多选时，连续选中日期范围中间日期颜色
                  selectedMidBgColor: '#FFAEA7', // 多选时，连续选中日期范围中间日期背景颜色
                  initSelectedDates: [
                      '2021-07-01',
                      '2021-07-03'
                  ]
                }
            }
        }

config配置属性:

chooseType 日历类型

multip: 多选，可以在日历中选中多个日期
single: 单选，只能在日历中选中一个日期
range: 两个日期之间范围，在日历中选中两个日期，生成一个日期范围

selectedTxtColor

选中时日期的颜色

selectedBgColor

选中时日期的背景色

selectedMidTxtColor

连续选中日期时中间日期的颜色

selectedMidBgColor

连续选中日期时中间日期的背景色

initSelectedDates

默认选择日期，single时只选中第一个日期，multip时选中所有日期，range时取第一个和第二个当做日期范围选中

onSelectDateChange

当日历的选中日期有变动时会调用

onSelectDateChange: function(resp){
                console.log("选中日期改变了:" + JSON.stringify(resp.detail.dates));
            }

scrollToPreMonth

日历切换到上一月

this.$refs.calendar.scrollToPreMonth()

scrollToNextMonth

日历切换到下一月

this.$refs.calendar.scrollToNextMonth()

scrollToDay

日历切换到某一天

                var params = {};
                params.date = "2021-06-01";
                this.$refs.calendar.scrollToDay(params)