diff --git a/example/app.json b/example/app.json
index b9fcb959..73a0d48b 100644
--- a/example/app.json
+++ b/example/app.json
@@ -154,6 +154,7 @@
"van-skeleton": "./dist/skeleton/index",
"van-skeleton-demo": "./dist/skeleton/demo/index",
"van-calendar": "./dist/calendar/index",
+ "van-calendar-demo": "./dist/calendar/demo/index",
"van-share-sheet": "./dist/share-sheet/index",
"van-config-provider": "./dist/config-provider/index",
"van-config-provider-demo": "./dist/config-provider/demo/index"
diff --git a/example/pages/calendar/index.js b/example/pages/calendar/index.js
index 0778baef..cc11dfda 100644
--- a/example/pages/calendar/index.js
+++ b/example/pages/calendar/index.js
@@ -1,157 +1,3 @@
import Page from '../../common/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;
- },
-});
+Page();
diff --git a/example/pages/calendar/index.wxml b/example/pages/calendar/index.wxml
index 2c351681..b760ab6b 100644
--- a/example/pages/calendar/index.wxml
+++ b/example/pages/calendar/index.wxml
@@ -1,142 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/packages/calendar/demo/index.json b/packages/calendar/demo/index.json
new file mode 100644
index 00000000..405443da
--- /dev/null
+++ b/packages/calendar/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-cell": "../../cell/index",
+ "van-calendar": "../../calendar/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/calendar/index.wxss b/packages/calendar/demo/index.less
similarity index 100%
rename from example/pages/calendar/index.wxss
rename to packages/calendar/demo/index.less
diff --git a/packages/calendar/demo/index.ts b/packages/calendar/demo/index.ts
new file mode 100644
index 00000000..ad753882
--- /dev/null
+++ b/packages/calendar/demo/index.ts
@@ -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;
+ },
+ },
+});
diff --git a/packages/calendar/demo/index.wxml b/packages/calendar/demo/index.wxml
new file mode 100644
index 00000000..2c351681
--- /dev/null
+++ b/packages/calendar/demo/index.wxml
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/pages/calendar/index.wxs b/packages/calendar/demo/index.wxs
similarity index 100%
rename from example/pages/calendar/index.wxs
rename to packages/calendar/demo/index.wxs
diff --git a/packages/calendar/test/__snapshots__/demo.spec.ts.snap b/packages/calendar/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..83502b7e
--- /dev/null
+++ b/packages/calendar/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,1730 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+ 选择单个日期
+
+
+
+
+
+
+
+
+
+
+ 选择多个日期
+
+
+
+
+
+
+
+
+
+
+ 选择日期区间
+
+
+
+
+
+
+
+
+
+
+
+
+ 快捷选择
+
+
+
+
+ 选择单个日期
+
+
+
+
+
+
+
+
+
+
+ 选择日期区间
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义日历
+
+
+
+
+ 自定义颜色
+
+
+
+
+
+
+
+
+
+
+ 自定义日期范围
+
+
+
+
+
+
+
+
+
+
+ 自定义按钮文字
+
+
+
+
+
+
+
+
+
+
+ 自定义日期文案
+
+
+
+
+
+
+
+
+
+
+ 自定义弹出位置
+
+
+
+
+
+
+
+
+
+
+ 日期区间最大范围
+
+
+
+
+
+
+
+
+
+
+
+
+ 平铺展示
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+
+
+
+
+
+ 2012年2月
+
+
+
+
+
+ 2
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+
+
+
+
+ 2012年3月
+
+
+
+
+
+ 3
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/calendar/test/demo.spec.ts b/packages/calendar/test/demo.spec.ts
new file mode 100644
index 00000000..48f5c77b
--- /dev/null
+++ b/packages/calendar/test/demo.spec.ts
@@ -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);
+ }
+});