Calendar 日历

用于选择日期区间。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Calendar",
    "usingComponents": {
        "wux-cell-group": "../../dist/cell-group/index",
        "wux-cell": "../../dist/cell/index",
        "wux-calendar": "../../dist/calendar/index"
    }
}

示例

!> 该组件主要依靠 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>
            <wux-cell title="多选" extra="{{ value2 }}" bind:click="openCalendar2"></wux-cell>
            <wux-cell title="Direction = Vertical" extra="{{ value3 }}" bind:click="openCalendar3"></wux-cell>
            <wux-cell title="MinDate & MaxDate" extra="{{ value4 }}" bind:click="openCalendar4"></wux-cell>
        </wux-cell-group>
    </view>
</view>

import { $wuxCalendar } from '../../dist/index'
Page({
    data: {
        value1: [],
        value2: [],
        value3: [],
        value4: [],
    },
    openCalendar1() {
        $wuxCalendar().open({
            value: this.data.value1,
            onChange: (values, displayValues) => {
                console.log('onChange', values, displayValues)
                this.setData({
                    value1: displayValues,
                })
            },
        })
    },
    openCalendar2() {
        $wuxCalendar().open({
            value: this.data.value2,
            multiple: true,
            onChange: (values, displayValues) => {
                console.log('onChange', values, displayValues)
                this.setData({
                    value2: displayValues,
                })
            },
        })
    },
    openCalendar3() {
        $wuxCalendar().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)
        $wuxCalendar().open({
            value: this.data.value4,
            minDate,
            maxDate,
            onChange: (values, displayValues) => {
                console.log('onChange', values, displayValues)
                this.setData({
                    value4: displayValues,
                })
            },
        })
    },
})

视频演示

Calendar

API