「极点日历」插件支持 1900 年 1 月 ~ 2099 年 12 月这两百年间的公历和农历显示,插件提供了丰富的可配置属性,包括日期的显示方式、选择范围、是否显示农历等,可自定义来适配不同的使用场景。
添加插件到小程序
1.在微信小程序管理后台——设置——第三方服务,按 AppID(wx92c68dae5a8bb046)搜索到该插件并申请授权。
2.在要使用该插件的小程序 app. ON 文件中引入插件声明:
"plugins": { "calendar": { "version": "1.1.3", "provider": "wx92c68dae5a8bb046" } }
3.在需要使用到该插件的小程序页面的 ON 配置文件中,做以下配置:
{ "usingComponents": { "calendar": "plugin://calendar/calendar" } }
4.在相应的 HTML 页面中添加以下语句即可完成插件的嵌入:
<calendar/>
日历属性
日历事件用法
日历包含下个月事件(nextMonth)、上个月事件(prevMonth)、标题日期选择器事件(dateChange)、点击某一天的事件(dayClick)
wxml文件:
<view class="vg-calendar"> <calendar cell-size="30" weeks-type="cn" calendar-style="calendar" header-style="header" board-style="board" days-color="{{daysColor}}" binddayClick="onDay" bindnextMonth="onMonthNext" bindprevMonth="onMonthPrev" binddateChange="onDateChange" active-type="square" /> </view>
js文件:
Page({ data: { }, onLoad(options) { }, onDay: function (e) { const { year, month, day } = e.detail; let daysColor = new Array; //选中颜色 daysColor.push({ month: 'current', day: day, color: '#000000', background: '#FF8672' }); this.setData({ daysColor }); },//下个月 onMonthNext: function (e) { const { currentYear, currentMonth } = e.detail; },//上个月 onMonthPrev: function (e) { const { currentYear, currentMonth } = e.detail; }, onDateChange:function(e){ console.log(e); } })
wxss文件:
.vg-calendar { margin-top: 20rpx; padding-bottom: 20rpx; background-color: #fff; } .header { color: #000; font-size: 32rpx; margin-bottom: 20rpx; background-color: #fff; margin: 0rpx 0rpx 20rpx 0rpx !important; padding: 40rpx; }
效果图:
转载:码书网「链接」