mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Calendar): add demo test
This commit is contained in:
nemo-shen
neverland
parent
c9dbfc570a
commit
7e8a0eb4a9
@ -154,6 +154,7 @@
|
|||||||
"van-skeleton": "./dist/skeleton/index",
|
"van-skeleton": "./dist/skeleton/index",
|
||||||
"van-skeleton-demo": "./dist/skeleton/demo/index",
|
"van-skeleton-demo": "./dist/skeleton/demo/index",
|
||||||
"van-calendar": "./dist/calendar/index",
|
"van-calendar": "./dist/calendar/index",
|
||||||
|
"van-calendar-demo": "./dist/calendar/demo/index",
|
||||||
"van-share-sheet": "./dist/share-sheet/index",
|
"van-share-sheet": "./dist/share-sheet/index",
|
||||||
"van-config-provider": "./dist/config-provider/index",
|
"van-config-provider": "./dist/config-provider/index",
|
||||||
"van-config-provider-demo": "./dist/config-provider/demo/index"
|
"van-config-provider-demo": "./dist/config-provider/demo/index"
|
||||||
|
|||||||
@ -1,157 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
date: {
|
|
||||||
maxRange: [],
|
|
||||||
selectSingle: null,
|
|
||||||
selectRange: [],
|
|
||||||
selectMultiple: [],
|
|
||||||
quickSelect1: null,
|
|
||||||
quickSelect2: [],
|
|
||||||
customColor: [],
|
|
||||||
customConfirm: [],
|
|
||||||
customRange: null,
|
|
||||||
customDayText: [],
|
|
||||||
customPosition: null,
|
|
||||||
},
|
|
||||||
type: 'single',
|
|
||||||
round: true,
|
|
||||||
color: undefined,
|
|
||||||
minDate: Date.now(),
|
|
||||||
maxDate: new Date(
|
|
||||||
new Date().getFullYear(),
|
|
||||||
new Date().getMonth() + 6,
|
|
||||||
new Date().getDate()
|
|
||||||
).getTime(),
|
|
||||||
maxRange: undefined,
|
|
||||||
position: undefined,
|
|
||||||
formatter: undefined,
|
|
||||||
showConfirm: false,
|
|
||||||
showCalendar: false,
|
|
||||||
tiledMinDate: new Date(2012, 0, 10).getTime(),
|
|
||||||
tiledMaxDate: new Date(2012, 2, 20).getTime(),
|
|
||||||
confirmText: undefined,
|
|
||||||
confirmDisabledText: undefined,
|
|
||||||
firstDayOfWeek: 0,
|
|
||||||
},
|
|
||||||
|
|
||||||
onConfirm(event) {
|
|
||||||
console.log(event);
|
|
||||||
this.setData({ showCalendar: false });
|
|
||||||
|
|
||||||
this.setData({
|
|
||||||
[`date.${this.data.id}`]: Array.isArray(event.detail)
|
|
||||||
? event.detail.map((date) => date.valueOf())
|
|
||||||
: event.detail.valueOf(),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onSelect(event) {
|
|
||||||
console.log(event);
|
|
||||||
},
|
|
||||||
|
|
||||||
onUnselect(event) {
|
|
||||||
console.log(event);
|
|
||||||
},
|
|
||||||
|
|
||||||
onClose() {
|
|
||||||
this.setData({ showCalendar: false });
|
|
||||||
},
|
|
||||||
|
|
||||||
onOpen() {
|
|
||||||
console.log('open');
|
|
||||||
},
|
|
||||||
|
|
||||||
onOpened() {
|
|
||||||
console.log('opened');
|
|
||||||
},
|
|
||||||
|
|
||||||
onClosed() {
|
|
||||||
console.log('closed');
|
|
||||||
},
|
|
||||||
|
|
||||||
resetSettings() {
|
|
||||||
this.setData({
|
|
||||||
round: true,
|
|
||||||
color: null,
|
|
||||||
minDate: Date.now(),
|
|
||||||
maxDate: new Date(
|
|
||||||
new Date().getFullYear(),
|
|
||||||
new Date().getMonth() + 6,
|
|
||||||
new Date().getDate()
|
|
||||||
).getTime(),
|
|
||||||
maxRange: null,
|
|
||||||
position: 'bottom',
|
|
||||||
formatter: null,
|
|
||||||
showConfirm: true,
|
|
||||||
confirmText: '确定',
|
|
||||||
confirmDisabledText: '确定',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
show(event) {
|
|
||||||
this.resetSettings();
|
|
||||||
const { type, id } = event.currentTarget.dataset;
|
|
||||||
const data = {
|
|
||||||
id,
|
|
||||||
type,
|
|
||||||
showCalendar: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
switch (id) {
|
|
||||||
case 'quickSelect1':
|
|
||||||
case 'quickSelect2':
|
|
||||||
data.showConfirm = false;
|
|
||||||
break;
|
|
||||||
case 'customColor':
|
|
||||||
data.color = '#07c160';
|
|
||||||
break;
|
|
||||||
case 'customConfirm':
|
|
||||||
data.confirmText = '完成';
|
|
||||||
data.confirmDisabledText = '请选择结束时间';
|
|
||||||
break;
|
|
||||||
case 'customRange':
|
|
||||||
data.minDate = new Date(2010, 0, 1).getTime();
|
|
||||||
data.maxDate = new Date(2010, 0, 31).getTime();
|
|
||||||
break;
|
|
||||||
case 'customDayText':
|
|
||||||
data.minDate = new Date(2010, 4, 1).getTime();
|
|
||||||
data.maxDate = new Date(2010, 4, 31).getTime();
|
|
||||||
data.formatter = this.dayFormatter;
|
|
||||||
break;
|
|
||||||
case 'customPosition':
|
|
||||||
data.round = false;
|
|
||||||
data.position = 'right';
|
|
||||||
break;
|
|
||||||
case 'maxRange':
|
|
||||||
data.maxRange = 3;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setData(data);
|
|
||||||
},
|
|
||||||
|
|
||||||
dayFormatter(day) {
|
|
||||||
const month = day.date.getMonth() + 1;
|
|
||||||
const date = day.date.getDate();
|
|
||||||
|
|
||||||
if (month === 5) {
|
|
||||||
if (date === 1) {
|
|
||||||
day.topInfo = '劳动节';
|
|
||||||
} else if (date === 4) {
|
|
||||||
day.topInfo = '五四青年节';
|
|
||||||
} else if (date === 11) {
|
|
||||||
day.text = '今天';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (day.type === 'start') {
|
|
||||||
day.bottomInfo = '入店';
|
|
||||||
} else if (day.type === 'end') {
|
|
||||||
day.bottomInfo = '离店';
|
|
||||||
}
|
|
||||||
|
|
||||||
return day;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,142 +1 @@
|
|||||||
<wxs src="./index.wxs" module="computed"></wxs>
|
<van-calendar-demo />
|
||||||
|
|
||||||
<demo-block title="基础用法">
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="选择单个日期"
|
|
||||||
data-type="single"
|
|
||||||
data-id="selectSingle"
|
|
||||||
value="{{ computed.formatFullDate(date.selectSingle) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="选择多个日期"
|
|
||||||
data-type="multiple"
|
|
||||||
data-id="selectMultiple"
|
|
||||||
value="{{ computed.formatMultiple(date.selectMultiple) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="选择日期区间"
|
|
||||||
data-type="range"
|
|
||||||
data-id="selectRange"
|
|
||||||
value="{{ computed.formatRange(date.selectRange) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="快捷选择">
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="选择单个日期"
|
|
||||||
data-type="single"
|
|
||||||
data-id="quickSelect1"
|
|
||||||
value="{{ computed.formatFullDate(date.quickSelect1) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="选择日期区间"
|
|
||||||
data-type="range"
|
|
||||||
data-id="quickSelect2"
|
|
||||||
value="{{ computed.formatRange(date.quickSelect2) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义日历">
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="自定义颜色"
|
|
||||||
data-type="range"
|
|
||||||
data-id="customColor"
|
|
||||||
value="{{ computed.formatRange(date.customColor) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="自定义日期范围"
|
|
||||||
data-type="single"
|
|
||||||
data-id="customRange"
|
|
||||||
value="{{ computed.formatFullDate(date.customRange) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="自定义按钮文字"
|
|
||||||
data-type="range"
|
|
||||||
data-id="customConfirm"
|
|
||||||
value="{{ computed.formatRange(date.customConfirm) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="自定义日期文案"
|
|
||||||
data-type="range"
|
|
||||||
data-id="customDayText"
|
|
||||||
value="{{ computed.formatRange(date.customDayText) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="自定义弹出位置"
|
|
||||||
data-type="single"
|
|
||||||
data-id="customPosition"
|
|
||||||
value="{{ computed.formatFullDate(date.customPosition) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
title="日期区间最大范围"
|
|
||||||
data-type="range"
|
|
||||||
data-id="maxRange"
|
|
||||||
value="{{ computed.formatRange(date.maxRange) }}"
|
|
||||||
bind:click="show"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="平铺展示">
|
|
||||||
<van-calendar
|
|
||||||
title="日历"
|
|
||||||
poppable="{{ false }}"
|
|
||||||
show-confirm="{{ false }}"
|
|
||||||
min-date="{{ tiledMinDate }}"
|
|
||||||
max-date="{{ tiledMaxDate }}"
|
|
||||||
first-day-of-week="{{ firstDayOfWeek }}"
|
|
||||||
class="tiled-calendar"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<van-calendar
|
|
||||||
show="{{ showCalendar }}"
|
|
||||||
type="{{ type }}"
|
|
||||||
color="{{ color }}"
|
|
||||||
round="{{ round }}"
|
|
||||||
position="{{ position }}"
|
|
||||||
min-date="{{ minDate }}"
|
|
||||||
max-date="{{ maxDate }}"
|
|
||||||
max-range="{{ maxRange }}"
|
|
||||||
formatter="{{ formatter }}"
|
|
||||||
show-confirm="{{ showConfirm }}"
|
|
||||||
confirm-text="{{ confirmText }}"
|
|
||||||
confirm-disabled-text="{{ confirmDisabledText }}"
|
|
||||||
first-day-of-week="{{ firstDayOfWeek }}"
|
|
||||||
bind:confirm="onConfirm"
|
|
||||||
bind:select="onSelect"
|
|
||||||
bind:unselect="onUnselect"
|
|
||||||
bind:open="onOpen"
|
|
||||||
bind:opened="onOpened"
|
|
||||||
bind:close="onClose"
|
|
||||||
bind:closed="onClosed"
|
|
||||||
>
|
|
||||||
</van-calendar>
|
|
||||||
|
|||||||
8
packages/calendar/demo/index.json
Normal file
8
packages/calendar/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-cell": "../../cell/index",
|
||||||
|
"van-calendar": "../../calendar/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
178
packages/calendar/demo/index.ts
Normal file
178
packages/calendar/demo/index.ts
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
type Data = {
|
||||||
|
id?: string;
|
||||||
|
type?: 'single' | 'multiple' | 'range';
|
||||||
|
round?: boolean;
|
||||||
|
color?: string;
|
||||||
|
minDate?: number;
|
||||||
|
maxDate?: number;
|
||||||
|
maxRange?: any;
|
||||||
|
position?: 'top' | 'right' | 'bottom' | 'left';
|
||||||
|
formatter?: any;
|
||||||
|
showConfirm?: boolean;
|
||||||
|
showCalendar?: boolean;
|
||||||
|
tiledMinDate?: number;
|
||||||
|
tiledMaxDate?: number;
|
||||||
|
confirmText?: string | '确定';
|
||||||
|
confirmDisabledText?: string | '确定';
|
||||||
|
firstDayOfWeek?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
date: {
|
||||||
|
maxRange: [],
|
||||||
|
selectSingle: null,
|
||||||
|
selectRange: [],
|
||||||
|
selectMultiple: [],
|
||||||
|
quickSelect1: null,
|
||||||
|
quickSelect2: [],
|
||||||
|
customColor: [],
|
||||||
|
customConfirm: [],
|
||||||
|
customRange: null,
|
||||||
|
customDayText: [],
|
||||||
|
customPosition: null,
|
||||||
|
},
|
||||||
|
type: 'single',
|
||||||
|
round: true,
|
||||||
|
color: '',
|
||||||
|
minDate: Date.now(),
|
||||||
|
maxDate: new Date(
|
||||||
|
new Date().getFullYear(),
|
||||||
|
new Date().getMonth() + 6,
|
||||||
|
new Date().getDate()
|
||||||
|
).getTime(),
|
||||||
|
maxRange: undefined,
|
||||||
|
position: 'bottom',
|
||||||
|
formatter: undefined,
|
||||||
|
showConfirm: false,
|
||||||
|
showCalendar: false,
|
||||||
|
tiledMinDate: new Date(2012, 0, 10).getTime(),
|
||||||
|
tiledMaxDate: new Date(2012, 2, 20).getTime(),
|
||||||
|
confirmText: '确定',
|
||||||
|
confirmDisabledText: '确定',
|
||||||
|
firstDayOfWeek: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onConfirm(event) {
|
||||||
|
console.log(event);
|
||||||
|
this.setData({ showCalendar: false });
|
||||||
|
|
||||||
|
this.setData({
|
||||||
|
[`date.${this.data.id}`]: Array.isArray(event.detail)
|
||||||
|
? event.detail.map((date) => date.valueOf())
|
||||||
|
: event.detail.valueOf(),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onSelect(event) {
|
||||||
|
console.log(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
onUnselect(event) {
|
||||||
|
console.log(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose() {
|
||||||
|
this.setData({ showCalendar: false });
|
||||||
|
},
|
||||||
|
|
||||||
|
onOpen() {
|
||||||
|
console.log('open');
|
||||||
|
},
|
||||||
|
|
||||||
|
onOpened() {
|
||||||
|
console.log('opened');
|
||||||
|
},
|
||||||
|
|
||||||
|
onClosed() {
|
||||||
|
console.log('closed');
|
||||||
|
},
|
||||||
|
|
||||||
|
resetSettings() {
|
||||||
|
this.setData({
|
||||||
|
round: true,
|
||||||
|
color: '',
|
||||||
|
minDate: Date.now(),
|
||||||
|
maxDate: new Date(
|
||||||
|
new Date().getFullYear(),
|
||||||
|
new Date().getMonth() + 6,
|
||||||
|
new Date().getDate()
|
||||||
|
).getTime(),
|
||||||
|
maxRange: undefined,
|
||||||
|
position: 'bottom',
|
||||||
|
formatter: undefined,
|
||||||
|
showConfirm: true,
|
||||||
|
confirmText: '确定',
|
||||||
|
confirmDisabledText: '确定',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
show(event) {
|
||||||
|
this.resetSettings();
|
||||||
|
const { type, id } = event.currentTarget.dataset;
|
||||||
|
const data: Data = {
|
||||||
|
id,
|
||||||
|
type,
|
||||||
|
showCalendar: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
switch (id) {
|
||||||
|
case 'quickSelect1':
|
||||||
|
case 'quickSelect2':
|
||||||
|
data.showConfirm = false;
|
||||||
|
break;
|
||||||
|
case 'customColor':
|
||||||
|
data.color = '#07c160';
|
||||||
|
break;
|
||||||
|
case 'customConfirm':
|
||||||
|
data.confirmText = '完成';
|
||||||
|
data.confirmDisabledText = '请选择结束时间';
|
||||||
|
break;
|
||||||
|
case 'customRange':
|
||||||
|
data.minDate = new Date(2010, 0, 1).getTime();
|
||||||
|
data.maxDate = new Date(2010, 0, 31).getTime();
|
||||||
|
break;
|
||||||
|
case 'customDayText':
|
||||||
|
data.minDate = new Date(2010, 4, 1).getTime();
|
||||||
|
data.maxDate = new Date(2010, 4, 31).getTime();
|
||||||
|
data.formatter = this.dayFormatter;
|
||||||
|
break;
|
||||||
|
case 'customPosition':
|
||||||
|
data.round = false;
|
||||||
|
data.position = 'right';
|
||||||
|
break;
|
||||||
|
case 'maxRange':
|
||||||
|
data.maxRange = 3;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setData(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
dayFormatter(day) {
|
||||||
|
const month = day.date.getMonth() + 1;
|
||||||
|
const date = day.date.getDate();
|
||||||
|
|
||||||
|
if (month === 5) {
|
||||||
|
if (date === 1) {
|
||||||
|
day.topInfo = '劳动节';
|
||||||
|
} else if (date === 4) {
|
||||||
|
day.topInfo = '五四青年节';
|
||||||
|
} else if (date === 11) {
|
||||||
|
day.text = '今天';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day.type === 'start') {
|
||||||
|
day.bottomInfo = '入店';
|
||||||
|
} else if (day.type === 'end') {
|
||||||
|
day.bottomInfo = '离店';
|
||||||
|
}
|
||||||
|
|
||||||
|
return day;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
142
packages/calendar/demo/index.wxml
Normal file
142
packages/calendar/demo/index.wxml
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<wxs src="./index.wxs" module="computed"></wxs>
|
||||||
|
|
||||||
|
<demo-block title="基础用法">
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="选择单个日期"
|
||||||
|
data-type="single"
|
||||||
|
data-id="selectSingle"
|
||||||
|
value="{{ computed.formatFullDate(date.selectSingle) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="选择多个日期"
|
||||||
|
data-type="multiple"
|
||||||
|
data-id="selectMultiple"
|
||||||
|
value="{{ computed.formatMultiple(date.selectMultiple) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="选择日期区间"
|
||||||
|
data-type="range"
|
||||||
|
data-id="selectRange"
|
||||||
|
value="{{ computed.formatRange(date.selectRange) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="快捷选择">
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="选择单个日期"
|
||||||
|
data-type="single"
|
||||||
|
data-id="quickSelect1"
|
||||||
|
value="{{ computed.formatFullDate(date.quickSelect1) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="选择日期区间"
|
||||||
|
data-type="range"
|
||||||
|
data-id="quickSelect2"
|
||||||
|
value="{{ computed.formatRange(date.quickSelect2) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义日历">
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="自定义颜色"
|
||||||
|
data-type="range"
|
||||||
|
data-id="customColor"
|
||||||
|
value="{{ computed.formatRange(date.customColor) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="自定义日期范围"
|
||||||
|
data-type="single"
|
||||||
|
data-id="customRange"
|
||||||
|
value="{{ computed.formatFullDate(date.customRange) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="自定义按钮文字"
|
||||||
|
data-type="range"
|
||||||
|
data-id="customConfirm"
|
||||||
|
value="{{ computed.formatRange(date.customConfirm) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="自定义日期文案"
|
||||||
|
data-type="range"
|
||||||
|
data-id="customDayText"
|
||||||
|
value="{{ computed.formatRange(date.customDayText) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="自定义弹出位置"
|
||||||
|
data-type="single"
|
||||||
|
data-id="customPosition"
|
||||||
|
value="{{ computed.formatFullDate(date.customPosition) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
title="日期区间最大范围"
|
||||||
|
data-type="range"
|
||||||
|
data-id="maxRange"
|
||||||
|
value="{{ computed.formatRange(date.maxRange) }}"
|
||||||
|
bind:click="show"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="平铺展示">
|
||||||
|
<van-calendar
|
||||||
|
title="日历"
|
||||||
|
poppable="{{ false }}"
|
||||||
|
show-confirm="{{ false }}"
|
||||||
|
min-date="{{ tiledMinDate }}"
|
||||||
|
max-date="{{ tiledMaxDate }}"
|
||||||
|
first-day-of-week="{{ firstDayOfWeek }}"
|
||||||
|
class="tiled-calendar"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<van-calendar
|
||||||
|
show="{{ showCalendar }}"
|
||||||
|
type="{{ type }}"
|
||||||
|
color="{{ color }}"
|
||||||
|
round="{{ round }}"
|
||||||
|
position="{{ position }}"
|
||||||
|
min-date="{{ minDate }}"
|
||||||
|
max-date="{{ maxDate }}"
|
||||||
|
max-range="{{ maxRange }}"
|
||||||
|
formatter="{{ formatter }}"
|
||||||
|
show-confirm="{{ showConfirm }}"
|
||||||
|
confirm-text="{{ confirmText }}"
|
||||||
|
confirm-disabled-text="{{ confirmDisabledText }}"
|
||||||
|
first-day-of-week="{{ firstDayOfWeek }}"
|
||||||
|
bind:confirm="onConfirm"
|
||||||
|
bind:select="onSelect"
|
||||||
|
bind:unselect="onUnselect"
|
||||||
|
bind:open="onOpen"
|
||||||
|
bind:opened="onOpened"
|
||||||
|
bind:close="onClose"
|
||||||
|
bind:closed="onClosed"
|
||||||
|
>
|
||||||
|
</van-calendar>
|
||||||
1730
packages/calendar/test/__snapshots__/demo.spec.ts.snap
Normal file
1730
packages/calendar/test/__snapshots__/demo.spec.ts.snap
Normal file
File diff suppressed because it is too large
Load Diff
15
packages/calendar/test/demo.spec.ts
Normal file
15
packages/calendar/test/demo.spec.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import simulate from 'miniprogram-simulate';
|
||||||
|
|
||||||
|
test('should render demo and match snapshot', () => {
|
||||||
|
try {
|
||||||
|
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
|
||||||
|
rootPath: path.resolve(__dirname, '../../'),
|
||||||
|
});
|
||||||
|
const comp = simulate.render(id);
|
||||||
|
comp.attach(document.createElement('parent-wrapper'));
|
||||||
|
expect(comp.toJSON()).toMatchSnapshot();
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user