分享一个微信小程序日历组件

(github.com/lspriv/wx-c…)

展示效果

安装

npm i @lspriv/wc-plugin-disabled -S

构建

微信小程序开发工具菜单栏：工具-->构建 npm 官方文档

页面使用

<calendar id="calendar" />

const { WxCalendar } = require('@lspriv/wx-calendar/lib');
const { DisabledPlugin, DISABLED_PLUGIN_KEY } = require('@lspriv/wc-plugin-disabled');

WxCalendar.use(DisabledPlugin, { 
  ... // 见插件选项，也可以不传
});

Page({
  handleCalendarLoad() {
    const calendar = this.selectComponent('#calendar');
    const disabledPlugin = calendar.getPlugin(DISABLED_PLUGIN_KEY);

    disabledPlugin.disable([
      { year: 2024, month: 6, day: 7 }, // 禁用单个日期
      // 禁用一个范围的日期
      [                              
        { year: 2024, month: 6, day: 10 },
        { year: 2024, month: 6, day: 15 }
      ]
    ]);

    disabledPlugin.isDateDisabled({ year: 2024, month: 6, day: 7 }); // 判断某个日期是否被禁用

    // 对传入的日期进行过滤，过滤掉当前已被禁用的日期
    disabledPlugin.filter([  
      { year: 2024, month: 6, day: 6 }, // 单个日期
      // 一个范围
      [                                 
        { year: 2024, month: 6, day: 12 },
        { year: 2024, month: 6, day: 18 }
      ]
    ])
  }
})

方法

disable取消日期

{
  /**
   * @param dates 要禁用的日期
   * @param clear 是否清除当前已禁用的日期，默认 false
   */
  (dates: Array<CalendarDay | DateRange>, clear?: boolean): void;
}

type DateRange = [start: CalendarDay, end: CalendarDay];

isDateDisabled日期是否被取消

{
  /**
   * @param date 要判断的日期
   */
  (date: CalendarDay): boolean;
}

filter过滤日期

{filter
  /**
   * @param date 要判断的日期
   */
  (dates: Array<CalendarDay | DateRange>): Array<CalendarDay | DateRange>;
}