@lspriv/wc-plugin-multiple
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Wx Calendar Plugin For MultiSelector

NPM Version Static Badge GitHub License

小程序日历 wx-calendar 多选插件

pktvhAU.png

使用

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

wx_qr

Package Sidebar

Install

npm i @lspriv/wc-plugin-multiple

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

13.1 kB

Total Files

6

Last publish

Collaborators

  • lspriv