小程序日历插件ele-calendar

原创
07/02 20:33
阅读数 61

在开发预约类型的小程序中,不免要有一个日历选择,设置自己可预约的时间,和选择自己预约的时间,今天我就来给大家介绍一款小程序日历组件ele-calendar

码云地址 https://gitee.com/echochenwen/ele-calendar

安装使用

1、声明组件

下载代码,将components文件夹拷贝至项目根目录(与app.json平级),在app.json中声明需要使用的插件,这里的声明是全局的,pages下的页面都能直接用,也可以在某一个page对应的json文件中单独声明。

{
	"pages": [
		"pages/index/calendar",
		"pages/index/index",
		"pages/logs/logs"
	],
	"window": {
		"backgroundTextStyle": "light",
		"navigationBarBackgroundColor": "#fff",
		"navigationBarTitleText": "ele-calendar 小程序日历组件",
		"navigationBarTextStyle": "black"
	},
	"usingComponents":{
		"calendar":"/components/calendar/index"
	},
	"style": "v2",
	"sitemapLocation": "sitemap.json"
}

2、使用组件

<!--pages/index/calendar.wxml-->
<calendar class="calendar" minYear="2015" maxYear="2025" bindOnDayClick="onDayClick" days-style="{{daysStyle}}"/>

3、可设置属性

属性名称 类型 默认值 说明
mode String normal 模式:
normal:常规;
picker: 下拉选取日期
pickerRange: 下拉选择区间
placeholder String 提示语
title String xxxx年xx月 日历标题,如设定值,在月份切换时需要自己设置title值
weekdays Array ['日', '一', '二', '三', '四', '五', '六'] 如自定义,数组长度需为7
language String ZH 语言:
ZH:中文
EN:英语,不同语言,年月和星期显示不同
selectedMode String round 被选中日期背景模式:
round:圆形
square方形
showMoreMonths Boolean true 是否显示上下月份
showMoreDays Boolean true 是否显示非本月日期
year Number 当前年份 年份
month Number 当前月份 月份,注意:此处值从1开始,1-12
selectedDate String 当天 被选中日期,格式yyyy-MM-DD
beginDate String 开始日期 范围模式开始日期,格式yyyy-MM-DD
endDate String 结束日期 范围模式结束日期,格式yyyy-MM-DD
minDate String 最小日期 可选的最小日期,格式yyyy-MM-DD,小于该日期的日期,不可点击
maxDate String 最大日期 可选的最大日期,格式yyyy-MM-DD,大于该日期的日期,不可点击
minYear Number 最小年份 常规模式picker选择器最小年份,格式yyyy
maxYear Number 最大年份 常规模式picker选择器最大年份,格式yyyy
daysStyle Array 指定日期样式数组,如:[{id: '2019-07-30',style: 'color: red;'}]会改变2019-07-30的日期颜色,此处是style,可以自由设置属性,会改变整个单元格样式
dotDays Array 指定日期显示标记点,如:[ '2019-10-30']
daysDesc Array 指定日期描述,如:[{id: "2020-03-02",desc: "有事",style: 'color: #FF0000;'}]
dotColor String red 点颜色

4、监听事件

事件名称 说明
bindOnDayClick 点击某一天时触发:
event.detail为被点击日期的Date对象
bindOnRangeComplete 范围选择完毕时触发:
event.detail为{begin:dateObj,end:dateObj}
bindOnMonthChange 切换月份时触发:
event.detail为当前月份第一天的Date对象

 示例图片

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部