更新记录

1.0.1（2021-11-08）

增加清空已选日期api

1.0.0（2021-07-09）

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

平台兼容性

原生插件通用使用流程：

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

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