小程序日历 wx-calendar
多选插件
- 小程序基础库
SDKVersion
>= 3.0.0 - 日历组件
wx-calendar
>= 1.7.0
npm i @lspriv/wc-plugin-multiple -S
微信小程序开发工具菜单栏:工具
--> 构建 npm
官方文档
<calendar id="calendar" bindchange="handleChange" />
const { WxCalendar } = require('@lspriv/wx-calendar/lib');
const { MultiPlugin, MULTI_PLUGIN_KEY } = require('@lspriv/wc-plugin-multiple');
WxCalendar.use(MultiPlugin, {
... // 见插件选项,也可以不传选项,使用默认选项
});
Page({
handleCalendarLoad() {
const calendar = this.selectComponent('#calendar');
const multiSelector = calendar.getPlugin(MULTI_PLUGIN_KEY);
multiSelector.select([
{ year: 2024, month: 6, day: 3 },
{ year: 2024, month: 6, day: 28 }
]);
},
handleChange(e) {
const { checked } = e;
// 选中的日期
console.log('checked', checked);
}
})
选项 | 类型 | 说明 | 默认值 |
---|---|---|---|
type | 'range' | 'multi' | 范围选择/多点选择 | range |
bgColor | { light: string; dark: string; } | 选中背景色 | { light: '#409EFF', dark: '#409EFF' } |
textColor | { light: string; dark: string; } | 选中字体色 | { light: '#FFF', dark: '#E5E5E5' } |
borderRadius | number | 选中背景圆角(单位rpx) | 50 |
bindchange
日期选中变化
type ChangeEventDetail = {
checked: Array<CalenderDay>; // 当前选中日期
validDates: Array<CalenderDay | [start: CalenderDay, end: CalenderDay]>; // 有效日期,是由单个有效日期和日期有效范围组成的数组
}
select
选择日期
{
/**
* @param dates 选中日期,范围选择下如 [start, end] 格式
* @param clear 是否清除原有选中日期,多点选择模式下有效,默认 false
*/
(dates: Array<CalendarDay>, clear?: boolean): void;
}
有任何问题或是需求请到 `Issues` 面板提交 忙的时候还请见谅 有兴趣开发维护的道友加微信