[improvement] DatetimePicker: split into two components (#3995)

src/datetime-picker/DatePicker.js

@@ -0,0 +1,210 @@
+import { createNamespace } from '../utils';
+import { isDate } from '../utils/validate/date';
+import { padZero } from '../utils/format/string';
+import { pickerProps } from '../picker/shared';
+import { getTrueValue, getMonthEndDay } from './utils';
+import { sharedProps, TimePickerMixin } from './shared';
+import Picker from '../picker';
+
+const currentYear = new Date().getFullYear();
+const [createComponent, bem] = createNamespace('date-picker');
+
+export default createComponent({
+  mixins: [TimePickerMixin],
+
+  props: {
+    ...sharedProps,
+    type: {
+      type: String,
+      default: 'datetime'
+    },
+    minDate: {
+      type: Date,
+      default: () => new Date(currentYear - 10, 0, 1),
+      validator: isDate
+    },
+    maxDate: {
+      type: Date,
+      default: () => new Date(currentYear + 10, 11, 31),
+      validator: isDate
+    }
+  },
+
+  watch: {
+    value(val) {
+      val = this.formatValue(val);
+
+      if (val.valueOf() !== this.innerValue.valueOf()) {
+        this.innerValue = val;
+      }
+    }
+  },
+
+  computed: {
+    ranges() {
+      const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary(
+        'max',
+        this.innerValue
+      );
+
+      const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary(
+        'min',
+        this.innerValue
+      );
+
+      const result = [
+        {
+          type: 'year',
+          range: [minYear, maxYear]
+        },
+        {
+          type: 'month',
+          range: [minMonth, maxMonth]
+        },
+        {
+          type: 'day',
+          range: [minDate, maxDate]
+        },
+        {
+          type: 'hour',
+          range: [minHour, maxHour]
+        },
+        {
+          type: 'minute',
+          range: [minMinute, maxMinute]
+        }
+      ];
+
+      if (this.type === 'date') result.splice(3, 2);
+      if (this.type === 'year-month') result.splice(2, 3);
+      return result;
+    }
+  },
+
+  methods: {
+    formatValue(value) {
+      if (!isDate(value)) {
+        value = this.minDate;
+      }
+
+      value = Math.max(value, this.minDate.getTime());
+      value = Math.min(value, this.maxDate.getTime());
+
+      return new Date(value);
+    },
+
+    getBoundary(type, value) {
+      const boundary = this[`${type}Date`];
+      const year = boundary.getFullYear();
+      let month = 1;
+      let date = 1;
+      let hour = 0;
+      let minute = 0;
+
+      if (type === 'max') {
+        month = 12;
+        date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+        hour = 23;
+        minute = 59;
+      }
+
+      if (value.getFullYear() === year) {
+        month = boundary.getMonth() + 1;
+        if (value.getMonth() + 1 === month) {
+          date = boundary.getDate();
+          if (value.getDate() === date) {
+            hour = boundary.getHours();
+            if (value.getHours() === hour) {
+              minute = boundary.getMinutes();
+            }
+          }
+        }
+      }
+
+      return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Date`]: date,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute
+      };
+    },
+
+    onChange(picker) {
+      const values = picker.getValues();
+      const year = getTrueValue(values[0]);
+      const month = getTrueValue(values[1]);
+      const maxDate = getMonthEndDay(year, month);
+
+      let date = getTrueValue(values[2]);
+      if (this.type === 'year-month') {
+        date = 1;
+      }
+
+      date = date > maxDate ? maxDate : date;
+
+      let hour = 0;
+      let minute = 0;
+
+      if (this.type === 'datetime') {
+        hour = getTrueValue(values[3]);
+        minute = getTrueValue(values[4]);
+      }
+
+      const value = new Date(year, month - 1, date, hour, minute);
+
+      this.innerValue = this.formatValue(value);
+
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          this.$emit('change', picker);
+        });
+      });
+    },
+
+    updateColumnValue(value) {
+      const { formatter } = this;
+      let values = [
+        formatter('year', `${value.getFullYear()}`),
+        formatter('month', padZero(value.getMonth() + 1)),
+        formatter('day', padZero(value.getDate()))
+      ];
+
+      if (this.type === 'datetime') {
+        values.push(
+          formatter('hour', padZero(value.getHours())),
+          formatter('minute', padZero(value.getMinutes()))
+        );
+      }
+
+      if (this.type === 'year-month') {
+        values = values.slice(0, 2);
+      }
+
+      this.$nextTick(() => {
+        this.$refs.picker.setValues(values);
+      });
+    }
+  },
+
+  render() {
+    const props = {};
+    Object.keys(pickerProps).forEach(key => {
+      props[key] = this[key];
+    });
+
+    return (
+      <Picker
+        class={bem()}
+        ref="picker"
+        columns={this.columns}
+        onChange={this.onChange}
+        onConfirm={this.onConfirm}
+        onCancel={() => {
+          this.$emit('cancel');
+        }}
+        {...{ props }}
+      />
+    );
+  }
+});

src/datetime-picker/TimePicker.js

@@ -0,0 +1,118 @@
+import { createNamespace } from '../utils';
+import { padZero } from '../utils/format/string';
+import { range } from '../utils/format/number';
+import { pickerProps } from '../picker/shared';
+import { sharedProps, TimePickerMixin } from './shared';
+import Picker from '../picker';
+
+const [createComponent, bem] = createNamespace('time-picker');
+
+export default createComponent({
+  mixins: [TimePickerMixin],
+
+  props: {
+    ...sharedProps,
+    minHour: {
+      type: Number,
+      default: 0
+    },
+    maxHour: {
+      type: Number,
+      default: 23
+    },
+    minMinute: {
+      type: Number,
+      default: 0
+    },
+    maxMinute: {
+      type: Number,
+      default: 59
+    }
+  },
+
+  computed: {
+    ranges() {
+      return [
+        {
+          type: 'hour',
+          range: [this.minHour, this.maxHour]
+        },
+        {
+          type: 'minute',
+          range: [this.minMinute, this.maxMinute]
+        }
+      ];
+    }
+  },
+
+  watch: {
+    value(val) {
+      val = this.formatValue(val);
+
+      if (val !== this.innerValue) {
+        this.innerValue = val;
+        this.updateColumnValue(val);
+      }
+    }
+  },
+
+  methods: {
+    formatValue(value) {
+      if (!value) {
+        value = `${padZero(this.minHour)}:${padZero(this.minMinute)}`;
+      }
+
+      let [hour, minute] = value.split(':');
+      hour = padZero(range(hour, this.minHour, this.maxHour));
+      minute = padZero(range(minute, this.minMinute, this.maxMinute));
+
+      return `${hour}:${minute}`;
+    },
+
+    onChange(picker) {
+      const indexes = picker.getIndexes();
+      const hour = this.originColumns[0].values[indexes[0]];
+      const minute = this.originColumns[1].values[indexes[1]];
+      const value = `${hour}:${minute}`;
+
+      this.innerValue = this.formatValue(value);
+
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          this.$emit('change', picker);
+        });
+      });
+    },
+
+    updateColumnValue(value) {
+      const { formatter } = this;
+      const pair = value.split(':');
+      const values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
+
+      this.$nextTick(() => {
+        this.$refs.picker.setValues(values);
+      });
+    }
+  },
+
+  render() {
+    const props = {};
+    Object.keys(pickerProps).forEach(key => {
+      props[key] = this[key];
+    });
+
+    return (
+      <Picker
+        class={bem()}
+        ref="picker"
+        columns={this.columns}
+        onChange={this.onChange}
+        onConfirm={this.onConfirm}
+        onCancel={() => {
+          this.$emit('cancel');
+        }}
+        {...{ props }}
+      />
+    );
+  }
+});

src/datetime-picker/index.js

@@ -1,333 +1,25 @@
 import { createNamespace } from '../utils';
-import { range } from '../utils/format/number';
-import { isDate } from '../utils/validate/date';
-import { padZero } from '../utils/format/string';
-import Picker from '../picker';
-import { pickerProps } from '../picker/shared';
-import { times, getTrueValue, getMonthEndDay } from './utils';
+import TimePicker from './TimePicker';
+import DatePicker from './DatePicker';
 
 const [createComponent, bem] = createNamespace('datetime-picker');
-const currentYear = new Date().getFullYear();
 
 export default createComponent({
   props: {
-    ...pickerProps,
-    value: null,
-    filter: Function,
-    minHour: {
-      type: Number,
-      default: 0
-    },
-    minMinute: {
-      type: Number,
-      default: 0
-    },
-    type: {
-      type: String,
-      default: 'datetime'
-    },
-    showToolbar: {
-      type: Boolean,
-      default: true
-    },
-    formatter: {
-      type: Function,
-      default: (type, value) => value
-    },
-    minDate: {
-      type: Date,
-      default: () => new Date(currentYear - 10, 0, 1),
-      validator: isDate
-    },
-    maxDate: {
-      type: Date,
-      default: () => new Date(currentYear + 10, 11, 31),
-      validator: isDate
-    },
-    maxHour: {
-      type: Number,
-      default: 23
-    },
-    maxMinute: {
-      type: Number,
-      default: 59
-    }
-  },
-
-  data() {
-    return {
-      innerValue: this.correctValue(this.value)
-    };
-  },
-
-  watch: {
-    value(val) {
-      val = this.correctValue(val);
-
-      const isEqual =
-        this.type === 'time'
-          ? val === this.innerValue
-          : val.valueOf() === this.innerValue.valueOf();
-
-      if (!isEqual) {
-        this.innerValue = val;
-
-        if (this.type === 'time') {
-          this.updateColumnValue(val);
-        }
-      }
-    },
-
-    innerValue(val) {
-      this.$emit('input', val);
-    },
-
-    columns() {
-      this.updateColumnValue(this.innerValue);
-    }
-  },
-
-  computed: {
-    ranges() {
-      if (this.type === 'time') {
-        return [
-          {
-            type: 'hour',
-            range: [this.minHour, this.maxHour]
-          },
-          {
-            type: 'minute',
-            range: [this.minMinute, this.maxMinute]
-          }
-        ];
-      }
-
-      const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary(
-        'max',
-        this.innerValue
-      );
-
-      const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary(
-        'min',
-        this.innerValue
-      );
-
-      const result = [
-        {
-          type: 'year',
-          range: [minYear, maxYear]
-        },
-        {
-          type: 'month',
-          range: [minMonth, maxMonth]
-        },
-        {
-          type: 'day',
-          range: [minDate, maxDate]
-        },
-        {
-          type: 'hour',
-          range: [minHour, maxHour]
-        },
-        {
-          type: 'minute',
-          range: [minMinute, maxMinute]
-        }
-      ];
-
-      if (this.type === 'date') result.splice(3, 2);
-      if (this.type === 'year-month') result.splice(2, 3);
-      return result;
-    },
-
-    originColumns() {
-      return this.ranges.map(({ type, range: rangeArr }) => {
-        let values = times(rangeArr[1] - rangeArr[0] + 1, index => {
-          const value = padZero(rangeArr[0] + index);
-          return value;
-        });
-
-        if (this.filter) {
-          values = this.filter(type, values);
-        }
-
-        return {
-          type,
-          values
-        };
-      });
-    },
-
-    columns() {
-      return this.originColumns.map(column => ({
-        values: column.values.map(value => this.formatter(column.type, value))
-      }));
-    }
-  },
-
-  mounted() {
-    this.updateColumnValue(this.innerValue);
-  },
-
-  methods: {
-    correctValue(value) {
-      // validate value
-      const isDateType = this.type !== 'time';
-
-      if (isDateType && !isDate(value)) {
-        value = this.minDate;
-      } else if (!value) {
-        value = `${padZero(this.minHour)}:00`;
-      }
-
-      // time type
-      if (!isDateType) {
-        let [hour, minute] = value.split(':');
-        hour = padZero(range(hour, this.minHour, this.maxHour));
-        minute = padZero(range(minute, this.minMinute, this.maxMinute));
-
-        return `${hour}:${minute}`;
-      }
-
-      // date type
-      value = Math.max(value, this.minDate.getTime());
-      value = Math.min(value, this.maxDate.getTime());
-
-      return new Date(value);
-    },
-
-    getBoundary(type, value) {
-      const boundary = this[`${type}Date`];
-      const year = boundary.getFullYear();
-      let month = 1;
-      let date = 1;
-      let hour = 0;
-      let minute = 0;
-
-      if (type === 'max') {
-        month = 12;
-        date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
-        hour = 23;
-        minute = 59;
-      }
-
-      if (value.getFullYear() === year) {
-        month = boundary.getMonth() + 1;
-        if (value.getMonth() + 1 === month) {
-          date = boundary.getDate();
-          if (value.getDate() === date) {
-            hour = boundary.getHours();
-            if (value.getHours() === hour) {
-              minute = boundary.getMinutes();
-            }
-          }
-        }
-      }
-
-      return {
-        [`${type}Year`]: year,
-        [`${type}Month`]: month,
-        [`${type}Date`]: date,
-        [`${type}Hour`]: hour,
-        [`${type}Minute`]: minute
-      };
-    },
-
-    onConfirm() {
-      this.$emit('confirm', this.innerValue);
-    },
-
-    onChange(picker) {
-      let value;
-
-      if (this.type === 'time') {
-        const indexes = picker.getIndexes();
-        const hour = this.originColumns[0].values[indexes[0]];
-        const minute = this.originColumns[1].values[indexes[1]];
-
-        value = `${hour}:${minute}`;
-      } else {
-        const values = picker.getValues();
-        const year = getTrueValue(values[0]);
-        const month = getTrueValue(values[1]);
-        const maxDate = getMonthEndDay(year, month);
-
-        let date = getTrueValue(values[2]);
-        if (this.type === 'year-month') {
-          date = 1;
-        }
-
-        date = date > maxDate ? maxDate : date;
-
-        let hour = 0;
-        let minute = 0;
-
-        if (this.type === 'datetime') {
-          hour = getTrueValue(values[3]);
-          minute = getTrueValue(values[4]);
-        }
-
-        value = new Date(year, month - 1, date, hour, minute);
-      }
-
-      this.innerValue = this.correctValue(value);
-
-      this.$nextTick(() => {
-        this.$nextTick(() => {
-          this.$emit('change', picker);
-        });
-      });
-    },
-
-    updateColumnValue(value) {
-      let values = [];
-      const { formatter } = this;
-
-      if (this.type === 'time') {
-        const pair = value.split(':');
-        values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
-      } else {
-        values = [
-          formatter('year', `${value.getFullYear()}`),
-          formatter('month', padZero(value.getMonth() + 1)),
-          formatter('day', padZero(value.getDate()))
-        ];
-
-        if (this.type === 'datetime') {
-          values.push(
-            formatter('hour', padZero(value.getHours())),
-            formatter('minute', padZero(value.getMinutes()))
-          );
-        }
-
-        if (this.type === 'year-month') {
-          values = values.slice(0, 2);
-        }
-      }
-
-      this.$nextTick(() => {
-        this.$refs.picker.setValues(values);
-      });
-    }
+    ...TimePicker.props,
+    ...DatePicker.props
   },
 
   render() {
-    const props = {};
-    Object.keys(pickerProps).forEach(key => {
-      props[key] = this[key];
-    });
+    const Component = this.type === 'time' ? TimePicker : DatePicker;
 
     return (
-      <Picker
+      <Component
         class={bem()}
-        ref="picker"
-        columns={this.columns}
-        onChange={this.onChange}
-        onConfirm={this.onConfirm}
-        onCancel={() => {
-          this.$emit('cancel');
+        {...{
+          props: this.$props,
+          listeners: this.$listeners
         }}
-        {...{ props }}
       />
     );
   }

src/datetime-picker/shared.js

@@ -0,0 +1,71 @@
+import { times } from './utils';
+import { padZero } from '../utils/format/string';
+import { pickerProps } from '../picker/shared';
+
+export const sharedProps = {
+  ...pickerProps,
+  value: null,
+  filter: Function,
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  formatter: {
+    type: Function,
+    default: (type, value) => value
+  }
+};
+
+export const TimePickerMixin = {
+  data() {
+    return {
+      innerValue: this.formatValue(this.value)
+    };
+  },
+
+  computed: {
+    originColumns() {
+      return this.ranges.map(({ type, range: rangeArr }) => {
+        let values = times(rangeArr[1] - rangeArr[0] + 1, index => {
+          const value = padZero(rangeArr[0] + index);
+          return value;
+        });
+
+        if (this.filter) {
+          values = this.filter(type, values);
+        }
+
+        return {
+          type,
+          values
+        };
+      });
+    },
+
+    columns() {
+      return this.originColumns.map(column => ({
+        values: column.values.map(value => this.formatter(column.type, value))
+      }));
+    }
+  },
+
+  watch: {
+    innerValue(val) {
+      this.$emit('input', val);
+    },
+
+    columns() {
+      this.updateColumnValue(this.innerValue);
+    }
+  },
+
+  mounted() {
+    this.updateColumnValue(this.innerValue);
+  },
+
+  methods: {
+    onConfirm() {
+      this.$emit('confirm', this.innerValue);
+    }
+  }
+};

src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter prop 1`] = `
+<div class="van-picker van-date-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`formatter prop 1`] = `
+<div class="van-picker van-date-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010 year</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020 year</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 month</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 month</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 day</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">35 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">45 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">55 minute</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;

src/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-date-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -166,7 +166,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-date-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -247,7 +247,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-date-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -293,7 +293,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-time-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -386,7 +386,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-time-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>

src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter prop 1`] = `
+<div class="van-picker van-time-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`format initial value 1`] = `
+<div class="van-picker van-time-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`formatter prop 1`] = `
+<div class="van-picker van-time-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`max-hour & max-minute 1`] = `
+<div class="van-picker van-time-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;

src/datetime-picker/test/date-picker.spec.js

@@ -0,0 +1,112 @@
+import DatePicker from '../DatePicker';
+import { mount, later, triggerDrag } from '../../../test/utils';
+
+function filter(type, options) {
+  const mod = type === 'year' ? 10 : 5;
+  return options.filter(option => option % mod === 0);
+}
+
+function formatter(type, value) {
+  return `${value} ${type}`;
+}
+
+test('filter prop', () => {
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      filter,
+      value: new Date(2019, 10, 1, 0, 0)
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('formatter prop', async () => {
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      filter,
+      formatter,
+      value: new Date(2019, 10, 1, 0, 0)
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker-column ul').trigger('transitionend');
+  await later();
+
+  expect(wrapper.emitted('change')[0][0].getValues()).toEqual([
+    '2020 year',
+    '05 month',
+    '05 day',
+    '00 hour',
+    '00 minute'
+  ]);
+});
+
+test('confirm event', () => {
+  const date = new Date(2019, 10, 1, 0, 0);
+
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: date
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2019);
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2029);
+});
+
+test('cancel event', () => {
+  const wrapper = mount(DatePicker);
+
+  wrapper.find('.van-picker__cancel').trigger('click');
+  expect(wrapper.emitted('cancel')).toBeTruthy();
+});
+
+test('max-date prop', () => {
+  const maxDate = new Date(2010, 5, 0, 0, 0);
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: new Date(2020, 10, 30, 30, 30),
+      maxDate
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(maxDate);
+});
+
+test('min-date prop', () => {
+  const minDate = new Date(2030, 0, 0, 0, 0);
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: new Date(2020, 0, 0, 0, 0),
+      minDate
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(minDate);
+});
+
+test('dynamic set value', () => {
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: new Date(2019, 1, 1)
+    }
+  });
+
+  wrapper.setProps({ value: new Date(2019, 1, 1) });
+  wrapper.find('.van-picker__confirm').trigger('click');
+  wrapper.setProps({ value: new Date(2025, 1, 1) });
+  wrapper.find('.van-picker__confirm').trigger('click');
+
+  expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2019);
+  expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
+});

src/datetime-picker/test/time-picker.spec.js

@@ -0,0 +1,94 @@
+import TimePicker from '../TimePicker';
+import { mount, later, triggerDrag } from '../../../test/utils';
+
+function filter(type, options) {
+  const mod = type === 'minute' ? 10 : 5;
+  return options.filter(option => option % mod === 0);
+}
+
+function formatter(type, value) {
+  return `${value} ${type}`;
+}
+
+test('format initial value', () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      minHour: 22,
+      minMinute: 58
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('max-hour & max-minute', () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      value: '23:59',
+      maxHour: 2,
+      maxMinute: 2
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('filter prop', () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      filter,
+      value: '12:00'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('formatter prop', async () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      filter,
+      formatter,
+      value: '12:00'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker-column ul').trigger('transitionend');
+  await later();
+
+  expect(wrapper.emitted('change')[0][0].getValues()).toEqual(['20 hour', '00 minute']);
+});
+
+test('confirm event', () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      value: '12:00'
+    }
+  });
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('23:00');
+});
+
+test('cancel event', () => {
+  const wrapper = mount(TimePicker);
+
+  wrapper.find('.van-picker__cancel').trigger('click');
+  expect(wrapper.emitted('cancel')).toBeTruthy();
+});
+
+test('dynamic set value', () => {
+  const wrapper = mount(TimePicker);
+
+  wrapper.setProps({ value: '00:00' });
+  wrapper.find('.van-picker__confirm').trigger('click');
+  wrapper.setProps({ value: '22:30' });
+  wrapper.find('.van-picker__confirm').trigger('click');
+
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00');
+  expect(wrapper.emitted('confirm')[1][0]).toEqual('22:30');
+});

src/picker/test/index.spec.js

@@ -80,12 +80,13 @@ test('set picker values', () => {
   expect(vm.getColumnValue(2)).toEqual(undefined);
 });
 
-test('drag columns', async () => {
+test('drag columns', () => {
   const wrapper = mount(Picker, {
     propsData: {
       columns
     }
   });
+
   triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
   wrapper.find('.van-picker-column ul').trigger('transitionend');
 
@@ -94,12 +95,13 @@ test('drag columns', async () => {
   expect(wrapper.emitted('change')[0][1]).toEqual(['normal', '1990']);
 });
 
-test('drag simple columns', async () => {
+test('drag simple columns', () => {
   const wrapper = mount(Picker, {
     propsData: {
       columns: simpleColumn
     }
   });
+
   triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
   wrapper.find('.van-picker-column ul').trigger('transitionend');