diff --git a/example/app.json b/example/app.json
index e6f45ee3..0d1aa51a 100644
--- a/example/app.json
+++ b/example/app.json
@@ -147,6 +147,7 @@
"van-tree-select": "./dist/tree-select/index",
"van-tree-select-demo": "./dist/tree-select/demo/index",
"van-datetime-picker": "./dist/datetime-picker/index",
+ "van-datetime-picker-demo": "./dist/datetime-picker/demo/index",
"van-rate": "./dist/rate/index",
"van-rate-demo": "./dist/rate/demo/index",
"van-collapse": "./dist/collapse/index",
diff --git a/example/pages/datetime-picker/index.js b/example/pages/datetime-picker/index.js
index 4945f3ce..cc11dfda 100644
--- a/example/pages/datetime-picker/index.js
+++ b/example/pages/datetime-picker/index.js
@@ -1,55 +1,3 @@
import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
-Page({
- data: {
- minHour: 10,
- maxHour: 20,
- minDate: new Date(2018, 0, 1).getTime(),
- maxDate: new Date(2019, 10, 1).getTime(),
- currentDate1: new Date(2018, 2, 31).getTime(),
- currentDate2: null,
- currentDate3: new Date(2018, 0, 1),
- currentDate4: '12:00',
- loading: false,
- formatter(type, value) {
- if (type === 'year') {
- return `${value}年`;
- }
- if (type === 'month') {
- return `${value}月`;
- }
- return value;
- },
- filter(type, options) {
- if (type === 'minute') {
- return options.filter(option => option % 5 === 0);
- }
-
- return options;
- }
- },
-
- onInput(event) {
- const { detail, currentTarget } = event;
- const result = this.getResult(detail, currentTarget.dataset.type);
-
- Toast(result);
- },
-
- getResult(time, type) {
- const date = new Date(time);
- switch (type) {
- case 'datetime':
- return date.toLocaleString();
- case 'date':
- return date.toLocaleDateString();
- case 'year-month':
- return `${date.getFullYear()}/${date.getMonth() + 1}`;
- case 'time':
- return time;
- default:
- return '';
- }
- }
-});
+Page();
diff --git a/example/pages/datetime-picker/index.wxml b/example/pages/datetime-picker/index.wxml
index c13fce52..4cfc1ab4 100644
--- a/example/pages/datetime-picker/index.wxml
+++ b/example/pages/datetime-picker/index.wxml
@@ -1,52 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/example/pages/datetime-picker/index.wxss b/example/pages/datetime-picker/index.wxss
deleted file mode 100644
index 8b137891..00000000
--- a/example/pages/datetime-picker/index.wxss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/packages/datetime-picker/demo/index.json b/packages/datetime-picker/demo/index.json
new file mode 100644
index 00000000..2adda0e1
--- /dev/null
+++ b/packages/datetime-picker/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-toast": "../../toast/index",
+ "van-datetime-picker": "../../datetime-picker/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/datetime-picker/demo/index.ts b/packages/datetime-picker/demo/index.ts
new file mode 100644
index 00000000..5e2ab5f7
--- /dev/null
+++ b/packages/datetime-picker/demo/index.ts
@@ -0,0 +1,60 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+VantComponent({
+ data: {
+ minHour: 10,
+ maxHour: 20,
+ minDate: new Date(2018, 0, 1).getTime(),
+ maxDate: new Date(2019, 10, 1).getTime(),
+ currentDate1: new Date(2018, 2, 31).getTime(),
+ currentDate2: null,
+ currentDate3: new Date(2018, 0, 1),
+ currentDate4: '12:00',
+ loading: false,
+ formatter(type, value) {
+ if (type === 'year') {
+ return `${value}年`;
+ }
+ if (type === 'month') {
+ return `${value}月`;
+ }
+ return value;
+ },
+ filter(type, options) {
+ if (type === 'minute') {
+ return options.filter((option) => option % 5 === 0);
+ }
+
+ return options;
+ },
+ },
+
+ methods: {
+ onInput(event) {
+ const { detail, currentTarget } = event;
+ const result = this.getResult(detail, currentTarget.dataset.type);
+
+ Toast({
+ context: this,
+ message: result,
+ });
+ },
+
+ getResult(time, type) {
+ const date = new Date(time);
+ switch (type) {
+ case 'datetime':
+ return date.toLocaleString();
+ case 'date':
+ return date.toLocaleDateString();
+ case 'year-month':
+ return `${date.getFullYear()}/${date.getMonth() + 1}`;
+ case 'time':
+ return time;
+ default:
+ return '';
+ }
+ },
+ },
+});
diff --git a/packages/datetime-picker/demo/index.wxml b/packages/datetime-picker/demo/index.wxml
new file mode 100644
index 00000000..c13fce52
--- /dev/null
+++ b/packages/datetime-picker/demo/index.wxml
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap b/packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..15e2e7e1
--- /dev/null
+++ b/packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,360 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 选择完整时间
+
+
+
+
+
+
+
+ 取消
+
+
+
+
+ 确认
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 选择日期（年月日）
+
+
+
+
+
+
+
+ 取消
+
+
+
+
+ 确认
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 选择日期（年月）
+
+
+
+
+
+
+
+ 取消
+
+
+
+
+ 确认
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 选择时间
+
+
+
+
+
+
+
+ 取消
+
+
+
+
+ 确认
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 选项过滤器
+
+
+
+
+
+
+
+ 取消
+
+
+
+
+ 确认
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/datetime-picker/test/demo.spec.ts b/packages/datetime-picker/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/datetime-picker/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ 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();
+});