Skip to content
This repository was archived by the owner on Oct 27, 2021. It is now read-only.

Commit 1d0c165

Browse files
b2nilpsaren
b2nil
authored and
psaren
committed
fix(calendar demo): fix multi-selection demo
1 parent 0f33fd4 commit 1d0c165

File tree

2 files changed

+59
-61
lines changed

2 files changed

+59
-61
lines changed

‎packages/taro-ui-vue-demo/src/pages/advanced/calendar/index.vue

+55-61
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,111 @@
11
<template>
2-
<view class='page calendar-page'>
3-
<DocsHeader title='Calendar 日历' />
2+
<view class="page calendar-page">
3+
<DocsHeader title="Calendar 日历" />
44

5-
<view class='doc-body'>
6-
<view class='panel'>
7-
<view class='panel__title'>一般案例</view>
8-
<view class='panel__content'>
5+
<view class="doc-body">
6+
<view class="panel">
7+
<view class="panel__title">一般案例</view>
8+
<view class="panel__content">
99
<AtCalendar :onMonthChange="handleMonthChange" />
1010
</view>
1111
</view>
1212

13-
<view class='panel'>
14-
<view class='panel__title'>跳转到指定日期</view>
15-
<view class='panel__content'>
13+
<view class="panel">
14+
<view class="panel__title">跳转到指定日期</view>
15+
<view class="panel__content">
1616
<AtCalendar :currentDate="state.now" />
17-
<view class='body_controllers'>
17+
<view class="body_controllers">
1818
<AtButton
19-
size='small'
19+
size="small"
2020
:onClick="handleClick.bind(this, 'now', '2018/01/01')"
21-
>
22-
跳转到 2018/01/01
23-
</AtButton>
21+
>跳转到 2018/01/01</AtButton>
2422
<AtButton
25-
size='small'
23+
size="small"
2624
:onClick="handleClick.bind(this, 'now', '2018/06/18')"
27-
>
28-
跳转到 2018/6/18
29-
</AtButton>
25+
>跳转到 2018/6/18</AtButton>
3026
</view>
3127
</view>
3228
</view>
3329

34-
<view class='panel'>
35-
<view class='panel__title'>指定最小日期和最大日期</view>
36-
<view class='panel__content'>
37-
<AtCalendar :minDate="state.minDate" :maxDate="state.maxDate" />
38-
<view class='body_controllers'>
30+
<view class="panel">
31+
<view class="panel__title">指定最小日期和最大日期</view>
32+
<view class="panel__content">
33+
<AtCalendar
34+
:minDate="state.minDate"
35+
:maxDate="state.maxDate"
36+
/>
37+
<view class="body_controllers">
3938
<AtButton
40-
size='small'
39+
size="small"
4140
:onClick="handleClick.bind(this, 'minDate', '2018/01/01')"
42-
>
43-
设置最小值 2018/1/1
44-
</AtButton>
41+
>设置最小值 2018/1/1</AtButton>
4542
<AtButton
46-
size='small'
43+
size="small"
4744
:onClick="handleClick.bind(this, 'maxDate', '2019/12/31')"
48-
>
49-
设置最大值 2019/12/31
50-
</AtButton>
45+
>设置最大值 2019/12/31</AtButton>
5146
</view>
5247
</view>
5348
</view>
5449

55-
<view class='panel'>
56-
<view class='panel__title'>标记时间</view>
57-
<view class='panel__content'>
50+
<view class="panel">
51+
<view class="panel__title">标记时间</view>
52+
<view class="panel__content">
5853
<AtCalendar :marks="state.mark" />
59-
<view class='body_controllers'>
54+
<view class="body_controllers">
6055
<AtButton
61-
size='small'
62-
class='button'
56+
size="small"
57+
class="button"
6358
:onClick="handleClick.bind(this, 'mark', [
6459
{
6560
value: Date.now()
6661
}
6762
])"
68-
>
69-
标记当前时间
70-
</AtButton>
63+
>标记当前时间</AtButton>
7164
</view>
7265
</view>
7366
</view>
7467

75-
<view class='panel'>
76-
<view class='panel__title'>禁止滑动</view>
77-
<view class='panel__content'>
68+
<view class="panel">
69+
<view class="panel__title">禁止滑动</view>
70+
<view class="panel__content">
7871
<AtCalendar :isSwiper="false" />
7972
</view>
8073
</view>
8174

82-
<view class='panel'>
83-
<view class='panel__title'>垂直滑动</view>
84-
<view class='panel__content'>
85-
<AtCalendar isVertical :onSelectDate="handleDateChange" />
75+
<view class="panel">
76+
<view class="panel__title">垂直滑动</view>
77+
<view class="panel__content">
78+
<AtCalendar
79+
isVertical
80+
:onSelectDate="handleDateChange"
81+
/>
8682
</view>
8783
</view>
8884

89-
<view class='panel'>
90-
<view class='panel__title'>范围选择</view>
91-
<view class='panel__content'>
92-
<!-- <AtCalendar
85+
<view class="panel">
86+
<view class="panel__title">范围选择</view>
87+
<view class="panel__content">
88+
<AtCalendar
9389
:onSelectDate="handleDateChange"
9490
isMultiSelect
9591
:currentDate="state.multiCurentDate"
96-
/> -->
97-
<view class='body_controllers'>
92+
/>
93+
<view class="body_controllers">
9894
<AtButton
99-
size='small'
100-
class='button'
95+
size="small"
96+
class="button"
10197
:onClick="handleClick.bind(this, 'multiCurentDate', {
10298
start: '2018/10/28',
10399
end: '2018/11/11'
104100
})"
105-
>
106-
设置选择区间为 2018/10/28 - 2018/11/11
107-
</AtButton>
101+
>设置选择区间为 2018/10/28 - 2018/11/11</AtButton>
108102
</view>
109103
</view>
110104
</view>
111105

112-
<view class='panel'>
113-
<view class='panel__title'>有效时间组</view>
114-
<view class='panel__content'>
106+
<view class="panel">
107+
<view class="panel__title">有效时间组</view>
108+
<view class="panel__content">
115109
<AtCalendar :validDates="state.validDates" />
116110
</view>
117111
</view>

‎packages/taro-ui-vue-demo/src/pages/advanced/calendar/main.ts

+4
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ export default Vue.extend({
6262
})
6363
},
6464
handleDateChange(arg: any): void {
65+
if(arg.value.end) {
66+
this.state.multiCurentDate = arg.value
67+
}
68+
6569
Taro.showToast({
6670
title: `handleDateChange: ${JSON.stringify(arg)}`,
6771
icon: 'none'

0 commit comments

Comments
 (0)