ECHO陈文
关注互联网技术开发与维护运营

小程序日历之ele-calendar

在开发预约类型的小程序中,不免要有一个日历选择,设置自己可预约的时间,和选择自己预约的时间,今天我就来给大家介绍一款小程序日历组件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、可设置属性

属性名称类型默认值说明
modeStringnormal模式:
normal:常规;
picker: 下拉选取日期
pickerRange: 下拉选择区间
placeholderString提示语
titleStringxxxx年xx月日历标题,如设定值,在月份切换时需要自己设置title值
weekdaysArray[‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’]如自定义,数组长度需为7
languageStringZH语言:
ZH:中文
EN:英语,不同语言,年月和星期显示不同
selectedModeStringround被选中日期背景模式:
round:圆形
square方形
showMoreMonthsBooleantrue是否显示上下月份
showMoreDaysBooleantrue是否显示非本月日期
yearNumber当前年份年份
monthNumber当前月份月份,注意:此处值从1开始,1-12
selectedDateString当天被选中日期,格式yyyy-MM-DD
beginDateString开始日期范围模式开始日期,格式yyyy-MM-DD
endDateString结束日期范围模式结束日期,格式yyyy-MM-DD
minDateString最小日期可选的最小日期,格式yyyy-MM-DD,小于该日期的日期,不可点击
maxDateString最大日期可选的最大日期,格式yyyy-MM-DD,大于该日期的日期,不可点击
minYearNumber最小年份常规模式picker选择器最小年份,格式yyyy
maxYearNumber最大年份常规模式picker选择器最大年份,格式yyyy
daysStyleArray指定日期样式数组,如:[{id: ‘2019-07-30’,style: ‘color: red;’}]会改变2019-07-30的日期颜色,此处是style,可以自由设置属性,会改变整个单元格样式
dotDaysArray指定日期显示标记点,如:[ ‘2019-10-30’]
daysDescArray指定日期描述,如:[{id: “2020-03-02”,desc: “有事”,style: ‘color: #FF0000;’}]
dotColorStringred点颜色


4、监听事件

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

示例图片

以上这篇小程序日历之ele-calendar就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持芦苇派。

赞(1) 打赏
未经允许不得转载:芦苇派 » 小程序日历之ele-calendar
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏