Wx Calendar Plugin For MultiSelector

小程序日历 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` 面板提交
忙的时候还请见谅
有兴趣开发维护的道友加微信