@wines/calendar v1.5.1

@wines/calendar

Calendar 日历

用于选择日期区间。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Calendar",
  "usingComponents": {
    "wux-cell-group": "@wines/cell-group",
    "wux-cell": "@wines/cell",
    "wux-calendar": "@wines/calendar"
  }
}

示例

该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-calendar 或其他，之后在 page.js 中调用 $wuxCalendar(id) 获取匹配到的第一个组件实例对象。

<wux-calendar id="wux-calendar" />

<view class="page">
	<view class="page__hd">
		<view class="page__title">Calendar</view>
		<view class="page__desc">日历</view>
	</view>
	<view class="page__bd">
		<wux-cell-group title="Calendar">
			<wux-cell title="单选" extra="{{ value1 }}" bind:click="openCalendar1" />
			<wux-cell title="多选" extra="{{ value2 }}" bind:click="openCalendar2" />
			<wux-cell title="Direction = Vertical" extra="{{ value3 }}" bind:click="openCalendar3" />
			<wux-cell title="MinDate & MaxDate" extra="{{ value4 }}" bind:click="openCalendar4" />
		</wux-cell-group>
	</view>
</view>

import { $wuxCalendar, CalendarExports, ComponentExports } from '@wines/calendar';
let calendar: ComponentExports<CalendarExports>;
Page({
  data: {
    value1: ['2021-01-10'] as string[],
    value2: [] as string[],
    value3: [] as string[],
    value4: [] as string[],
  },
  calendar: null,
  onLoad() {
    calendar = $wuxCalendar();
  },
  openCalendar1() {
    calendar.open({
      value: this.data.value1,
      onMonthAdd: (month) => {
        console.log('onMonthAdd', month);
      },
      onDayClick: (dateYear: number, dateMonth: number, dateDay: number) => {
        console.log(`onDayClick:`, dateYear, dateMonth, dateDay);
      },
      onChange: (values, displayValues) => {
        console.log('onChange', values, displayValues);
        this.setData({
          value1: displayValues,
        });
      },
    });
  },
  openCalendar2() {
    calendar.open({
      value: this.data.value2,
      multiple: true,
      onChange: (values, displayValues) => {
        console.log('onChange', values, displayValues);
        this.setData({
          value2: displayValues,
        });
      },
    });
  },
  openCalendar3() {
    calendar.open({
      value: this.data.value3,
      direction: 'vertical',
      onChange: (values, displayValues) => {
        console.log('onChange', values, displayValues);
        this.setData({
          value3: displayValues,
        });
      },
    });
  },
  openCalendar4() {
    const now = new Date();
    const minDate = now.getTime();
    const maxDate = now.setDate(now.getDate() + 7);

    calendar.open({
      value: this.data.value4,
      minDate,
      maxDate,
      onChange: (values, displayValues) => {
        console.log('onChange', values, displayValues);
        this.setData({
          value4: displayValues,
        });
      },
    });
  },
});

API