更新记录

1.0.1(2021-11-08)

增加清空已选日期api

1.0.0(2021-07-09)

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

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 11.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:9 - 14

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


前言

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="DateChange"></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)

clear

清空已选日期

                this.$refs.calendar.clear()

完整demo:

<template>
    <div>
        <text>日历选择</text>
     <wrs-calendar ref='calendar' :style="'width:'+width+'px;height:'+height+'px;'" :config="config" @onSelectDateChange="DateChange"></wrs-calendar>
    <button @click="scrollToPreMonth">上一月</button>
    <button @click="scrollToNextMonth">下一月</button>
    <button @click="scrollToDay">切换到某一天</button>
    </div>
</template>

<script>
    export default {
        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'
                  ]
                }
            }
        },
        onLoad() {
            // 设置播放器宽高,一般宽度铺满全屏,宽高比是16:9
           const { windowWidth, windowHeight } = uni.getSystemInfoSync();    
           this.width = windowWidth;
           console.log('windowWidth:' + windowWidth + '  windowHeight:' + windowHeight);
        },
        methods:{
            DateChange: function(resp){
                console.log("选中日期改变了:" + JSON.stringify(resp.detail.dates));
            },
            scrollToPreMonth: function() {
                this.$refs.calendar.scrollToPreMonth()
            },
            scrollToNextMonth: function(){
                this.$refs.calendar.scrollToNextMonth()
            },
            scrollToDay: function(){
                var params = {};
                params.date = "2021-06-01";
                this.$refs.calendar.scrollToDay(params)
            }
        }
    }
</script>

<style>
.btn {
    margin-top: 25rpt;
    background-color: #f42122;
}
</style>

详细文档:https://www.jianshu.com/p/a18759c00d4a

如果觉得可以就点个👍吧,欢迎粉丝收藏,土豪打赏,您的关注就是我们创作的动力!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问