From bf6cbd56ebcf407e09debc02f3a150c03f507687 Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Thu, 8 Mar 2018 23:02:04 +0800
Subject: [PATCH] add time-picker demo

---
 components/index.js                           |   1 +
 components/style.js                           |   1 +
 components/time-picker/demo/12hours.md        |  28 ++
 components/time-picker/demo/addon.md          |  43 ++
 components/time-picker/demo/basic.md          |  26 ++
 components/time-picker/demo/disabled.md       |  23 ++
 components/time-picker/demo/hide-column.md    |  23 ++
 .../time-picker/demo/interval-options.md      |  15 +
 components/time-picker/demo/size.md           |  27 ++
 components/time-picker/demo/value.md          |  43 ++
 components/time-picker/index.vue              | 259 ++++++------
 .../locale/{ar_EG.tsx.js => ar_EG.js}         |   0
 .../locale/{bg_BG.tsx.js => bg_BG.js}         |   4 +-
 .../locale/{es_ES.tsx.js => ca_ES.js}         |   4 +-
 .../locale/{cs_CZ.tsx.js => cs_CZ.js}         |   4 +-
 .../locale/{de_DE.tsx.js => de_DE.js}         |   4 +-
 .../locale/{el_GR.tsx.js => el_GR.js}         |   4 +-
 .../locale/{en_GB.tsx.js => en_GB.js}         |   4 +-
 .../locale/{en_US.tsx.js => en_US.js}         |   4 +-
 .../locale/{ca_ES.tsx.js => es_ES.js}         |   4 +-
 .../locale/{et_EE.tsx.js => et_EE.js}         |   4 +-
 .../locale/{fa_IR.tsx.js => fa_IR.js}         |   4 +-
 .../locale/{fi_FI.tsx.js => fi_FI.js}         |   4 +-
 .../locale/{fr_BE.tsx.js => fr_BE.js}         |   4 +-
 .../locale/{fr_FR.tsx.js => fr_FR.js}         |   4 +-
 .../locale/{is_IS.tsx.js => is_IS.js}         |   4 +-
 .../locale/{it_IT.tsx.js => it_IT.js}         |   4 +-
 .../locale/{ja_JP.tsx.js => ja_JP.js}         |   4 +-
 .../locale/{ko_KR.tsx.js => ko_KR.js}         |   4 +-
 .../locale/{ku_IQ.tsx.js => ku_IQ.js}         |   4 +-
 .../locale/{nb_NO.tsx.js => nb_NO.js}         |   4 +-
 .../locale/{nl_BE.tsx.js => nl_BE.js}         |   4 +-
 .../locale/{nl_NL.tsx.js => nl_NL.js}         |   4 +-
 .../locale/{pl_PL.tsx.js => pl_PL.js}         |   4 +-
 .../locale/{pt_BR.tsx.js => pt_BR.js}         |   4 +-
 .../locale/{pt_PT.tsx.js => pt_PT.js}         |   4 +-
 .../locale/{ru_RU.tsx.js => ru_RU.js}         |   4 +-
 .../locale/{sk_SK.tsx.js => sk_SK.js}         |   4 +-
 .../locale/{sr_RS.tsx.js => sr_RS.js}         |   4 +-
 .../locale/{sv_SE.tsx.js => sv_SE.js}         |   4 +-
 .../locale/{th_TH.tsx.js => th_TH.js}         |   4 +-
 .../locale/{tr_TR.tsx.js => tr_TR.js}         |   4 +-
 .../locale/{uk_UA.tsx.js => uk_UA.js}         |   4 +-
 .../locale/{vi_VN.tsx.js => vi_VN.js}         |   4 +-
 .../locale/{zh_CN.tsx.js => zh_CN.js}         |   4 +-
 .../locale/{zh_TW.tsx.js => zh_TW.js}         |   4 +-
 components/time-picker/style/index.js         |   5 +
 components/time-picker/style/index.tsx        |   5 -
 components/vc-time-picker/Combobox.vue        | 252 ++++++------
 components/vc-time-picker/Header.vue          | 287 ++++++-------
 components/vc-time-picker/Panel.vue           | 193 +++++----
 components/vc-time-picker/Select.vue          | 167 ++++----
 components/vc-time-picker/TimePicker.vue      | 384 +++++++++---------
 components/vc-time-picker/demo/all.vue        | 160 ++++++++
 examples/routes.js                            |   2 +-
 package-lock.json                             |   5 +
 package.json                                  | 222 +++++-----
 57 files changed, 1347 insertions(+), 960 deletions(-)
 create mode 100644 components/time-picker/demo/12hours.md
 create mode 100644 components/time-picker/demo/addon.md
 create mode 100644 components/time-picker/demo/basic.md
 create mode 100644 components/time-picker/demo/disabled.md
 create mode 100644 components/time-picker/demo/hide-column.md
 create mode 100644 components/time-picker/demo/interval-options.md
 create mode 100644 components/time-picker/demo/size.md
 create mode 100644 components/time-picker/demo/value.md
 rename components/time-picker/locale/{ar_EG.tsx.js => ar_EG.js} (100%)
 rename components/time-picker/locale/{bg_BG.tsx.js => bg_BG.js} (69%)
 rename components/time-picker/locale/{es_ES.tsx.js => ca_ES.js} (67%)
 rename components/time-picker/locale/{cs_CZ.tsx.js => cs_CZ.js} (64%)
 rename components/time-picker/locale/{de_DE.tsx.js => de_DE.js} (66%)
 rename components/time-picker/locale/{el_GR.tsx.js => el_GR.js} (69%)
 rename components/time-picker/locale/{en_GB.tsx.js => en_GB.js} (64%)
 rename components/time-picker/locale/{en_US.tsx.js => en_US.js} (64%)
 rename components/time-picker/locale/{ca_ES.tsx.js => es_ES.js} (67%)
 rename components/time-picker/locale/{et_EE.tsx.js => et_EE.js} (63%)
 rename components/time-picker/locale/{fa_IR.tsx.js => fa_IR.js} (69%)
 rename components/time-picker/locale/{fi_FI.tsx.js => fi_FI.js} (65%)
 rename components/time-picker/locale/{fr_BE.tsx.js => fr_BE.js} (69%)
 rename components/time-picker/locale/{fr_FR.tsx.js => fr_FR.js} (69%)
 rename components/time-picker/locale/{is_IS.tsx.js => is_IS.js} (64%)
 rename components/time-picker/locale/{it_IT.tsx.js => it_IT.js} (68%)
 rename components/time-picker/locale/{ja_JP.tsx.js => ja_JP.js} (66%)
 rename components/time-picker/locale/{ko_KR.tsx.js => ko_KR.js} (65%)
 rename components/time-picker/locale/{ku_IQ.tsx.js => ku_IQ.js} (67%)
 rename components/time-picker/locale/{nb_NO.tsx.js => nb_NO.js} (63%)
 rename components/time-picker/locale/{nl_BE.tsx.js => nl_BE.js} (66%)
 rename components/time-picker/locale/{nl_NL.tsx.js => nl_NL.js} (66%)
 rename components/time-picker/locale/{pl_PL.tsx.js => pl_PL.js} (67%)
 rename components/time-picker/locale/{pt_BR.tsx.js => pt_BR.js} (61%)
 rename components/time-picker/locale/{pt_PT.tsx.js => pt_PT.js} (61%)
 rename components/time-picker/locale/{ru_RU.tsx.js => ru_RU.js} (81%)
 rename components/time-picker/locale/{sk_SK.tsx.js => sk_SK.js} (65%)
 rename components/time-picker/locale/{sr_RS.tsx.js => sr_RS.js} (66%)
 rename components/time-picker/locale/{sv_SE.tsx.js => sv_SE.js} (63%)
 rename components/time-picker/locale/{th_TH.tsx.js => th_TH.js} (71%)
 rename components/time-picker/locale/{tr_TR.tsx.js => tr_TR.js} (64%)
 rename components/time-picker/locale/{uk_UA.tsx.js => uk_UA.js} (69%)
 rename components/time-picker/locale/{vi_VN.tsx.js => vi_VN.js} (67%)
 rename components/time-picker/locale/{zh_CN.tsx.js => zh_CN.js} (66%)
 rename components/time-picker/locale/{zh_TW.tsx.js => zh_TW.js} (66%)
 create mode 100644 components/time-picker/style/index.js
 delete mode 100644 components/time-picker/style/index.tsx
 create mode 100644 components/vc-time-picker/demo/all.vue

diff --git a/components/index.js b/components/index.js
index 9a2c788bd..da1f5b3f4 100644
--- a/components/index.js
+++ b/components/index.js
@@ -89,6 +89,7 @@ export { default as Cascader } from './cascader'
 export { default as BackTop } from './back-top'
 export { default as Modal } from './modal'
 export { default as Alert } from './alert'
+export { default as TimePicker } from './time-picker'
 
 const api = {
   notification,
diff --git a/components/style.js b/components/style.js
index 37fe86642..954a968c3 100644
--- a/components/style.js
+++ b/components/style.js
@@ -29,3 +29,4 @@ import './cascader/style'
 import './back-top/style'
 import './modal/style'
 import './alert/style'
+import './time-picker/style'
diff --git a/components/time-picker/demo/12hours.md b/components/time-picker/demo/12hours.md
new file mode 100644
index 000000000..7a72f876a
--- /dev/null
+++ b/components/time-picker/demo/12hours.md
@@ -0,0 +1,28 @@
+<cn>
+#### 12 小时制
+12 小时制的时间选择器，默认的 format 为 `h:mm:ss a`。
+</cn>
+
+<us>
+#### 12 hours
+TimePicker of 12 hours format, with default format `h:mm:ss a`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-time-picker use12Hours @change="onChange" />
+    <a-time-picker use12Hours format="h:mm:ss A" @change="onChange" />
+    <a-time-picker use12Hours format="h:mm a" @change="onChange" />
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    onChange(time, timeString){
+      console.log(time, timeString);
+    }
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md
new file mode 100644
index 000000000..2f744d775
--- /dev/null
+++ b/components/time-picker/demo/addon.md
@@ -0,0 +1,43 @@
+<cn>
+#### 附加内容
+在 TimePicker 选择框底部显示自定义的内容。
+</cn>
+
+<us>
+#### Addon
+Render addon contents to timepicker panel's bottom.
+</us>
+
+```html
+<template>
+  <div>
+    <a-time-picker @openChange="handleOpenChange" :open="open">
+      <a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
+    </a-time-picker>
+    <a-time-picker :open.sync="open2">
+      <a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
+    </a-time-picker>
+  </div>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  data() {
+    return {
+      open: false,
+      open2: false,
+    }
+  },
+  methods: {
+    handleOpenChange(open){
+      console.log('open', open);
+      this.open = open
+    },
+    handleClose(){
+      this.open = false
+      this.open2 = false
+    }
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md
new file mode 100644
index 000000000..643040b57
--- /dev/null
+++ b/components/time-picker/demo/basic.md
@@ -0,0 +1,26 @@
+<cn>
+#### 基本
+点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
+</cn>
+
+<us>
+#### Basic
+Click `TimePicker`, and then we could select or input a time in panel.
+</us>
+
+```html
+<template>
+  <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')" />
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+    onChange(time, timeString){
+      console.log(time, timeString);
+    }
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md
new file mode 100644
index 000000000..6cf2a43c4
--- /dev/null
+++ b/components/time-picker/demo/disabled.md
@@ -0,0 +1,23 @@
+<cn>
+#### 禁用
+禁用时间选择。
+</cn>
+
+<us>
+#### disabled
+A disabled state of the `TimePicker`.
+</us>
+
+```html
+<template>
+  <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" disabled />
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+  }
+}
+</script>
+```
diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md
new file mode 100644
index 000000000..415e2d833
--- /dev/null
+++ b/components/time-picker/demo/hide-column.md
@@ -0,0 +1,23 @@
+<cn>
+#### 选择时分
+TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的某部分时，浮层中对应的列也会消失。
+</cn>
+
+<us>
+#### Hour and minute
+While part of `format` is omitted, the corresponding column in panel will disappear, too.
+</us>
+
+```html
+<template>
+  <a-time-picker :defaultValue="moment('12:08', 'HH:mm')" format="HH:mm" />
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/interval-options.md b/components/time-picker/demo/interval-options.md
new file mode 100644
index 000000000..0add82dd7
--- /dev/null
+++ b/components/time-picker/demo/interval-options.md
@@ -0,0 +1,15 @@
+<cn>
+#### 步长选项
+可以使用 `hourStep` `minuteStep` `secondStep` 按步长展示可选的时分秒。
+</cn>
+
+<us>
+#### interval option
+Show stepped options by `hourStep` `minuteStep` `secondStep`.
+</us>
+
+```html
+<template>
+  <a-time-picker :minuteStep="15" :secondStep="10" />
+</template>
+```
diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md
new file mode 100644
index 000000000..9569b03a4
--- /dev/null
+++ b/components/time-picker/demo/size.md
@@ -0,0 +1,27 @@
+<cn>
+#### 三种大小
+三种大小的输入框，大的用在表单中，中的为默认。
+</cn>
+
+<us>
+#### Three Sizes
+The input box comes in three sizes. large is used in the form, while the medium size is the default.
+</us>
+
+```html
+<template>
+  <div>
+    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="large" />
+    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" />
+    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="small" />
+  </div>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md
new file mode 100644
index 000000000..f6578cb62
--- /dev/null
+++ b/components/time-picker/demo/value.md
@@ -0,0 +1,43 @@
+<cn>
+#### 受控组件
+value 和 onChange 需要配合使用。也可以直接使用v-model。
+</cn>
+
+<us>
+#### Under Control
+`value` and `@change` should be used together or use v-model.
+</us>
+
+```html
+<template>
+  <div>
+    <p>use value and @change</p>
+    <a-time-picker @change="onChange" :value="value" />
+    <br/>
+    <br/>
+    <p>v-model</p>
+    <a-time-picker v-model="value" />
+    <br/>
+    <br/>
+    <p>Do not change</p>
+    <a-time-picker :value="value2" />
+  </div>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  data(){
+    return {
+      value: null,
+      value2: moment(),
+    }
+  },
+  methods: {
+    onChange(time,){
+      console.log(time);
+      this.value = time;
+    }
+  },
+}
+</script>
+```
diff --git a/components/time-picker/index.vue b/components/time-picker/index.vue
index 18bb909de..acdf41474 100644
--- a/components/time-picker/index.vue
+++ b/components/time-picker/index.vue
@@ -1,11 +1,13 @@
 <script>
-import * as moment from 'moment';
-import RcTimePicker from 'rc-time-picker/lib/TimePicker';
-import classNames from 'classnames';
-import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import defaultLocale from './locale/en_US';
+import * as moment from 'moment'
+import VcTimePicker from '../vc-time-picker'
+import LocaleReceiver from '../locale-provider/LocaleReceiver'
+import defaultLocale from './locale/en_US'
+import BaseMixin from '../_util/BaseMixin'
+import PropTypes from '../_util/vue-types'
+import { initDefaultProps, hasProp, getOptionProps, getComponentFromProp } from '../_util/props-util'
 
-export function generateShowHourMinuteSecond(format: string) {
+export function generateShowHourMinuteSecond (format) {
   // Ref: http://momentjs.com/docs/#/parsing/string-format/
   return {
     showHour: (
@@ -15,45 +17,40 @@ export function generateShowHourMinuteSecond(format: string) {
     ),
     showMinute: format.indexOf('m') > -1,
     showSecond: format.indexOf('s') > -1,
-  };
+  }
 }
 
-export interface TimePickerProps {
-  className?: string;
-  size?: 'large' | 'default' | 'small';
-  value?: moment.Moment;
-  defaultValue?: moment.Moment | moment.Moment[];
-  open?: boolean;
-  format?: string;
-  onChange?: (time: moment.Moment, timeString: string) => void;
-  onOpenChange?: (open: boolean) => void;
-  disabled?: boolean;
-  placeholder?: string;
-  prefixCls?: string;
-  hideDisabledOptions?: boolean;
-  disabledHours?: () => number[];
-  disabledMinutes?: (selectedHour: number) => number[];
-  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
-  style?: React.CSSProperties;
-  getPopupContainer?: (triggerNode: Element) => HTMLElement;
-  addon?: Function;
-  use12Hours?: boolean;
-  focusOnOpen?: boolean;
-  hourStep?: number;
-  minuteStep?: number;
-  secondStep?: number;
-  allowEmpty?: boolean;
-  clearText?: string;
-  defaultOpenValue?: moment.Moment;
-  popupClassName?: string;
+export const TimePickerProps = {
+  size: PropTypes.oneOf(['large', 'default', 'small']),
+  value: PropTypes.object,
+  defaultValue: PropTypes.object,
+  open: PropTypes.bool,
+  format: PropTypes.string,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.string,
+  prefixCls: PropTypes.string,
+  hideDisabledOptions: PropTypes.bool,
+  disabledHours: PropTypes.func,
+  disabledMinutes: PropTypes.func,
+  disabledSeconds: PropTypes.func,
+  getPopupContainer: PropTypes.func,
+  use12Hours: PropTypes.bool,
+  focusOnOpen: PropTypes.bool,
+  hourStep: PropTypes.number,
+  minuteStep: PropTypes.number,
+  secondStep: PropTypes.number,
+  allowEmpty: PropTypes.bool,
+  clearText: PropTypes.string,
+  defaultOpenValue: PropTypes.object,
+  popupClassName: PropTypes.string,
+  align: PropTypes.object,
+  placement: PropTypes.any,
+  transitionName: PropTypes.string,
 }
 
-export interface TimePickerLocale {
-  placeholder: string;
-}
-
-export default class TimePicker extends React.Component<TimePickerProps, any> {
-  static defaultProps = {
+export default {
+  mixins: [BaseMixin],
+  props: initDefaultProps(TimePickerProps, {
     prefixCls: 'ant-time-picker',
     align: {
       offset: [0, -2],
@@ -66,114 +63,104 @@ export default class TimePicker extends React.Component<TimePickerProps, any> {
     placement: 'bottomLeft',
     transitionName: 'slide-up',
     focusOnOpen: true,
-  };
-
-  private timePickerRef: typeof RcTimePicker;
-
-  constructor(props: TimePickerProps) {
-    super(props);
-    const value = props.value || props.defaultValue;
+  }),
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  data () {
+    const value = this.value || this.defaultValue
     if (value && !moment.isMoment(value)) {
       throw new Error(
-        'The value/defaultValue of TimePicker must be a moment object after `antd@2.0`, ' +
-        'see: https://u.ant.design/time-picker-value',
-      );
+        'The value/defaultValue of TimePicker must be a moment object, ',
+      )
     }
-    this.state = {
-      value,
-    };
-  }
-
-  componentWillReceiveProps(nextProps: TimePickerProps) {
-    if ('value' in nextProps) {
-      this.setState({ value: nextProps.value });
+    return {
+      sValue: value,
     }
-  }
+  },
+  watch: {
+    value (val) {
+      this.setState({ sValue: val })
+    },
+  },
+  methods: {
+    handleChange (value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({ sValue: value })
+      }
+      const { format = 'HH:mm:ss' } = this
+      this.$emit('change', value, (value && value.format(format)) || '')
+    },
 
-  handleChange = (value: moment.Moment) => {
-    if (!('value' in this.props)) {
-      this.setState({ value });
-    }
-    const { onChange, format = 'HH:mm:ss' } = this.props;
-    if (onChange) {
-      onChange(value, (value && value.format(format)) || '');
-    }
-  }
+    handleOpenClose ({ open }) {
+      this.$emit('openChange', open)
+      this.$emit('update:open', open)
+    },
 
-  handleOpenClose = ({ open }: { open: boolean }) => {
-    const { onOpenChange } = this.props;
-    if (onOpenChange) {
-      onOpenChange(open);
-    }
-  }
+    focus () {
+      this.$refs.timePicker.focus()
+    },
 
-  saveTimePicker = (timePickerRef: typeof RcTimePicker) => {
-    this.timePickerRef = timePickerRef;
-  }
+    blur () {
+      this.$refs.timePicker.blur()
+    },
 
-  focus() {
-    this.timePickerRef.focus();
-  }
+    getDefaultFormat () {
+      const { format, use12Hours } = this
+      if (format) {
+        return format
+      } else if (use12Hours) {
+        return 'h:mm:ss a'
+      }
+      return 'HH:mm:ss'
+    },
 
-  blur() {
-    this.timePickerRef.blur();
-  }
+    renderTimePicker (locale) {
+      const props = getOptionProps(this)
+      delete props.defaultValue
 
-  getDefaultFormat() {
-    const { format, use12Hours } = this.props;
-    if (format) {
-      return format;
-    } else if (use12Hours) {
-      return 'h:mm:ss a';
-    }
-    return 'HH:mm:ss';
-  }
+      const format = this.getDefaultFormat()
+      const className = {
+        [`${props.prefixCls}-${props.size}`]: !!props.size,
+      }
+      const tempAddon = getComponentFromProp(this, 'addon')
+      const timeProps = {
+        props: {
+          ...generateShowHourMinuteSecond(format),
+          ...props,
+          format,
+          value: this.sValue,
+          placeholder: props.placeholder === undefined ? locale.placeholder : props.placeholder,
+        },
+        class: className,
+        ref: 'timePicker',
+        on: {
+          change: this.handleChange,
+          open: this.handleOpenClose,
+          close: this.handleOpenClose,
+        },
+      }
+      return (
+        <VcTimePicker {...timeProps}>
+          {tempAddon ? <template slot='addon'>
+            <div class={`${props.prefixCls}-panel-addon`}>
+              {tempAddon}
+            </div>
+          </template> : null}
+        </VcTimePicker>
+      )
+    },
+  },
 
-  renderTimePicker = (locale: TimePickerLocale) => {
-    const props = {
-      ...this.props,
-    };
-    delete props.defaultValue;
-
-    const format = this.getDefaultFormat();
-    const className = classNames(props.className, {
-      [`${props.prefixCls}-${props.size}`]: !!props.size,
-    });
-
-    const addon = (panel: React.ReactElement<any>) => (
-      props.addon ? (
-        <div className={`${props.prefixCls}-panel-addon`}>
-          {props.addon(panel)}
-        </div>
-      ) : null
-    );
-
-    return (
-      <RcTimePicker
-        {...generateShowHourMinuteSecond(format)}
-        {...props}
-        ref={this.saveTimePicker}
-        format={format}
-        className={className}
-        value={this.state.value}
-        placeholder={props.placeholder === undefined ? locale.placeholder : props.placeholder}
-        onChange={this.handleChange}
-        onOpen={this.handleOpenClose}
-        onClose={this.handleOpenClose}
-        addon={addon}
-      />
-    );
-  }
-
-  render() {
+  render () {
     return (
       <LocaleReceiver
-        componentName="TimePicker"
+        componentName='TimePicker'
         defaultLocale={defaultLocale}
-      >
-        {this.renderTimePicker}
-      </LocaleReceiver>
-    );
-  }
+        children={this.renderTimePicker}
+      />
+    )
+  },
 }
 </script>
\ No newline at end of file
diff --git a/components/time-picker/locale/ar_EG.tsx.js b/components/time-picker/locale/ar_EG.js
similarity index 100%
rename from components/time-picker/locale/ar_EG.tsx.js
rename to components/time-picker/locale/ar_EG.js
diff --git a/components/time-picker/locale/bg_BG.tsx.js b/components/time-picker/locale/bg_BG.js
similarity index 69%
rename from components/time-picker/locale/bg_BG.tsx.js
rename to components/time-picker/locale/bg_BG.js
index e6896fe4a..cf69fa433 100644
--- a/components/time-picker/locale/bg_BG.tsx.js
+++ b/components/time-picker/locale/bg_BG.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Избор на час',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/es_ES.tsx.js b/components/time-picker/locale/ca_ES.js
similarity index 67%
rename from components/time-picker/locale/es_ES.tsx.js
rename to components/time-picker/locale/ca_ES.js
index cfd60a8b9..3333a9ab7 100644
--- a/components/time-picker/locale/es_ES.tsx.js
+++ b/components/time-picker/locale/ca_ES.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Seleccionar hora',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/cs_CZ.tsx.js b/components/time-picker/locale/cs_CZ.js
similarity index 64%
rename from components/time-picker/locale/cs_CZ.tsx.js
rename to components/time-picker/locale/cs_CZ.js
index 5c89f7aff..0f9049c33 100644
--- a/components/time-picker/locale/cs_CZ.tsx.js
+++ b/components/time-picker/locale/cs_CZ.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Vybrat čas',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/de_DE.tsx.js b/components/time-picker/locale/de_DE.js
similarity index 66%
rename from components/time-picker/locale/de_DE.tsx.js
rename to components/time-picker/locale/de_DE.js
index c912e9e8f..c784b34da 100644
--- a/components/time-picker/locale/de_DE.tsx.js
+++ b/components/time-picker/locale/de_DE.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Zeit auswählen',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/el_GR.tsx.js b/components/time-picker/locale/el_GR.js
similarity index 69%
rename from components/time-picker/locale/el_GR.tsx.js
rename to components/time-picker/locale/el_GR.js
index 2c0dea51f..31df2e549 100644
--- a/components/time-picker/locale/el_GR.tsx.js
+++ b/components/time-picker/locale/el_GR.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Επιλέξτε ώρα',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/en_GB.tsx.js b/components/time-picker/locale/en_GB.js
similarity index 64%
rename from components/time-picker/locale/en_GB.tsx.js
rename to components/time-picker/locale/en_GB.js
index b95b5a362..02b92d52a 100644
--- a/components/time-picker/locale/en_GB.tsx.js
+++ b/components/time-picker/locale/en_GB.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Select time',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/en_US.tsx.js b/components/time-picker/locale/en_US.js
similarity index 64%
rename from components/time-picker/locale/en_US.tsx.js
rename to components/time-picker/locale/en_US.js
index b95b5a362..02b92d52a 100644
--- a/components/time-picker/locale/en_US.tsx.js
+++ b/components/time-picker/locale/en_US.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Select time',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/ca_ES.tsx.js b/components/time-picker/locale/es_ES.js
similarity index 67%
rename from components/time-picker/locale/ca_ES.tsx.js
rename to components/time-picker/locale/es_ES.js
index cfd60a8b9..3333a9ab7 100644
--- a/components/time-picker/locale/ca_ES.tsx.js
+++ b/components/time-picker/locale/es_ES.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Seleccionar hora',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/et_EE.tsx.js b/components/time-picker/locale/et_EE.js
similarity index 63%
rename from components/time-picker/locale/et_EE.tsx.js
rename to components/time-picker/locale/et_EE.js
index 7ebc008d0..04b9cbc85 100644
--- a/components/time-picker/locale/et_EE.tsx.js
+++ b/components/time-picker/locale/et_EE.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Vali aeg',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/fa_IR.tsx.js b/components/time-picker/locale/fa_IR.js
similarity index 69%
rename from components/time-picker/locale/fa_IR.tsx.js
rename to components/time-picker/locale/fa_IR.js
index 0dcc5d924..82c5a5783 100644
--- a/components/time-picker/locale/fa_IR.tsx.js
+++ b/components/time-picker/locale/fa_IR.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'انتخاب زمان',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/fi_FI.tsx.js b/components/time-picker/locale/fi_FI.js
similarity index 65%
rename from components/time-picker/locale/fi_FI.tsx.js
rename to components/time-picker/locale/fi_FI.js
index 6c4d9a122..e296072d0 100644
--- a/components/time-picker/locale/fi_FI.tsx.js
+++ b/components/time-picker/locale/fi_FI.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Valitse aika',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/fr_BE.tsx.js b/components/time-picker/locale/fr_BE.js
similarity index 69%
rename from components/time-picker/locale/fr_BE.tsx.js
rename to components/time-picker/locale/fr_BE.js
index e6fca5d4e..76c4c75b0 100644
--- a/components/time-picker/locale/fr_BE.tsx.js
+++ b/components/time-picker/locale/fr_BE.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Sélectionner l\'heure',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/fr_FR.tsx.js b/components/time-picker/locale/fr_FR.js
similarity index 69%
rename from components/time-picker/locale/fr_FR.tsx.js
rename to components/time-picker/locale/fr_FR.js
index e6fca5d4e..76c4c75b0 100644
--- a/components/time-picker/locale/fr_FR.tsx.js
+++ b/components/time-picker/locale/fr_FR.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Sélectionner l\'heure',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/is_IS.tsx.js b/components/time-picker/locale/is_IS.js
similarity index 64%
rename from components/time-picker/locale/is_IS.tsx.js
rename to components/time-picker/locale/is_IS.js
index 6a5994a28..5542ec5c6 100644
--- a/components/time-picker/locale/is_IS.tsx.js
+++ b/components/time-picker/locale/is_IS.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Velja tíma',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/it_IT.tsx.js b/components/time-picker/locale/it_IT.js
similarity index 68%
rename from components/time-picker/locale/it_IT.tsx.js
rename to components/time-picker/locale/it_IT.js
index 16dd65d4e..eecb1aed7 100644
--- a/components/time-picker/locale/it_IT.tsx.js
+++ b/components/time-picker/locale/it_IT.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Selezionare il tempo',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/ja_JP.tsx.js b/components/time-picker/locale/ja_JP.js
similarity index 66%
rename from components/time-picker/locale/ja_JP.tsx.js
rename to components/time-picker/locale/ja_JP.js
index 366344d41..0f00617ea 100644
--- a/components/time-picker/locale/ja_JP.tsx.js
+++ b/components/time-picker/locale/ja_JP.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: '時刻を選択',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/ko_KR.tsx.js b/components/time-picker/locale/ko_KR.js
similarity index 65%
rename from components/time-picker/locale/ko_KR.tsx.js
rename to components/time-picker/locale/ko_KR.js
index fad0ffd8c..9354fbd3d 100644
--- a/components/time-picker/locale/ko_KR.tsx.js
+++ b/components/time-picker/locale/ko_KR.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: '날짜 선택',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/ku_IQ.tsx.js b/components/time-picker/locale/ku_IQ.js
similarity index 67%
rename from components/time-picker/locale/ku_IQ.tsx.js
rename to components/time-picker/locale/ku_IQ.js
index 838b1958d..fc1d17455 100755
--- a/components/time-picker/locale/ku_IQ.tsx.js
+++ b/components/time-picker/locale/ku_IQ.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Demê hilbijêre',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/nb_NO.tsx.js b/components/time-picker/locale/nb_NO.js
similarity index 63%
rename from components/time-picker/locale/nb_NO.tsx.js
rename to components/time-picker/locale/nb_NO.js
index dfc0d96e9..8309eb2f3 100644
--- a/components/time-picker/locale/nb_NO.tsx.js
+++ b/components/time-picker/locale/nb_NO.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Velg tid',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/nl_BE.tsx.js b/components/time-picker/locale/nl_BE.js
similarity index 66%
rename from components/time-picker/locale/nl_BE.tsx.js
rename to components/time-picker/locale/nl_BE.js
index 7318ca9f6..5a89f5331 100644
--- a/components/time-picker/locale/nl_BE.tsx.js
+++ b/components/time-picker/locale/nl_BE.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Selecteer tijd',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/nl_NL.tsx.js b/components/time-picker/locale/nl_NL.js
similarity index 66%
rename from components/time-picker/locale/nl_NL.tsx.js
rename to components/time-picker/locale/nl_NL.js
index 7318ca9f6..5a89f5331 100644
--- a/components/time-picker/locale/nl_NL.tsx.js
+++ b/components/time-picker/locale/nl_NL.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Selecteer tijd',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/pl_PL.tsx.js b/components/time-picker/locale/pl_PL.js
similarity index 67%
rename from components/time-picker/locale/pl_PL.tsx.js
rename to components/time-picker/locale/pl_PL.js
index bd48f4f68..a38a35c95 100644
--- a/components/time-picker/locale/pl_PL.tsx.js
+++ b/components/time-picker/locale/pl_PL.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Wybierz godzinę',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/pt_BR.tsx.js b/components/time-picker/locale/pt_BR.js
similarity index 61%
rename from components/time-picker/locale/pt_BR.tsx.js
rename to components/time-picker/locale/pt_BR.js
index ed0247e10..d1722b879 100644
--- a/components/time-picker/locale/pt_BR.tsx.js
+++ b/components/time-picker/locale/pt_BR.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Hora',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/pt_PT.tsx.js b/components/time-picker/locale/pt_PT.js
similarity index 61%
rename from components/time-picker/locale/pt_PT.tsx.js
rename to components/time-picker/locale/pt_PT.js
index ed0247e10..d1722b879 100644
--- a/components/time-picker/locale/pt_PT.tsx.js
+++ b/components/time-picker/locale/pt_PT.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Hora',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/ru_RU.tsx.js b/components/time-picker/locale/ru_RU.js
similarity index 81%
rename from components/time-picker/locale/ru_RU.tsx.js
rename to components/time-picker/locale/ru_RU.js
index 0490573e7..f4395aea8 100644
--- a/components/time-picker/locale/ru_RU.tsx.js
+++ b/components/time-picker/locale/ru_RU.js
@@ -3,6 +3,6 @@
  */
 const locale = {
   placeholder: 'Выберите время',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/sk_SK.tsx.js b/components/time-picker/locale/sk_SK.js
similarity index 65%
rename from components/time-picker/locale/sk_SK.tsx.js
rename to components/time-picker/locale/sk_SK.js
index 4c62d104b..1a7cb3804 100644
--- a/components/time-picker/locale/sk_SK.tsx.js
+++ b/components/time-picker/locale/sk_SK.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Vybrať čas',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/sr_RS.tsx.js b/components/time-picker/locale/sr_RS.js
similarity index 66%
rename from components/time-picker/locale/sr_RS.tsx.js
rename to components/time-picker/locale/sr_RS.js
index ef621a0d7..202655005 100644
--- a/components/time-picker/locale/sr_RS.tsx.js
+++ b/components/time-picker/locale/sr_RS.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Izaberite vreme',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/sv_SE.tsx.js b/components/time-picker/locale/sv_SE.js
similarity index 63%
rename from components/time-picker/locale/sv_SE.tsx.js
rename to components/time-picker/locale/sv_SE.js
index 063c46b78..0d892a93a 100644
--- a/components/time-picker/locale/sv_SE.tsx.js
+++ b/components/time-picker/locale/sv_SE.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Välj tid',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/th_TH.tsx.js b/components/time-picker/locale/th_TH.js
similarity index 71%
rename from components/time-picker/locale/th_TH.tsx.js
rename to components/time-picker/locale/th_TH.js
index 335e55e01..6d8628976 100644
--- a/components/time-picker/locale/th_TH.tsx.js
+++ b/components/time-picker/locale/th_TH.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'เลือกเวลา',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/tr_TR.tsx.js b/components/time-picker/locale/tr_TR.js
similarity index 64%
rename from components/time-picker/locale/tr_TR.tsx.js
rename to components/time-picker/locale/tr_TR.js
index 66f860dca..3cb3d7e15 100644
--- a/components/time-picker/locale/tr_TR.tsx.js
+++ b/components/time-picker/locale/tr_TR.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Zaman Seç',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/uk_UA.tsx.js b/components/time-picker/locale/uk_UA.js
similarity index 69%
rename from components/time-picker/locale/uk_UA.tsx.js
rename to components/time-picker/locale/uk_UA.js
index 20a81cc53..4f379c553 100644
--- a/components/time-picker/locale/uk_UA.tsx.js
+++ b/components/time-picker/locale/uk_UA.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Оберіть час',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/vi_VN.tsx.js b/components/time-picker/locale/vi_VN.js
similarity index 67%
rename from components/time-picker/locale/vi_VN.tsx.js
rename to components/time-picker/locale/vi_VN.js
index 05dff1df5..225ef167f 100644
--- a/components/time-picker/locale/vi_VN.tsx.js
+++ b/components/time-picker/locale/vi_VN.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: 'Chọn thời gian',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/zh_CN.tsx.js b/components/time-picker/locale/zh_CN.js
similarity index 66%
rename from components/time-picker/locale/zh_CN.tsx.js
rename to components/time-picker/locale/zh_CN.js
index 6898e575d..1b83292e3 100644
--- a/components/time-picker/locale/zh_CN.tsx.js
+++ b/components/time-picker/locale/zh_CN.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: '请选择时间',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/locale/zh_TW.tsx.js b/components/time-picker/locale/zh_TW.js
similarity index 66%
rename from components/time-picker/locale/zh_TW.tsx.js
rename to components/time-picker/locale/zh_TW.js
index cde48a919..0d415a019 100644
--- a/components/time-picker/locale/zh_TW.tsx.js
+++ b/components/time-picker/locale/zh_TW.js
@@ -1,5 +1,5 @@
 const locale = {
   placeholder: '請選擇時間',
-};
+}
 
-export default locale;
+export default locale
diff --git a/components/time-picker/style/index.js b/components/time-picker/style/index.js
new file mode 100644
index 000000000..992a50794
--- /dev/null
+++ b/components/time-picker/style/index.js
@@ -0,0 +1,5 @@
+import '../../style/index.less'
+import './index.less'
+
+// style dependencies
+import '../../input/style'
diff --git a/components/time-picker/style/index.tsx b/components/time-picker/style/index.tsx
deleted file mode 100644
index 0e54062b3..000000000
--- a/components/time-picker/style/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import '../../style/index.less';
-import './index.less';
-
-// style dependencies
-import '../../input/style';
diff --git a/components/vc-time-picker/Combobox.vue b/components/vc-time-picker/Combobox.vue
index 9fade4812..f989ead79 100644
--- a/components/vc-time-picker/Combobox.vue
+++ b/components/vc-time-picker/Combobox.vue
@@ -1,6 +1,7 @@
 <script>
-import PropTypes from 'prop-types'
+import PropTypes from '../_util/vue-types'
 import Select from './Select'
+import BaseMixin from '../_util/BaseMixin'
 
 const formatOption = (option, disabledOptions) => {
   let value = `${option}`
@@ -19,13 +20,15 @@ const formatOption = (option, disabledOptions) => {
   }
 }
 
-class Combobox extends Component {
-  static propTypes = {
+const Combobox = {
+  mixins: [BaseMixin],
+  name: 'Combobox',
+  props: {
     format: PropTypes.string,
     defaultOpenValue: PropTypes.object,
     prefixCls: PropTypes.string,
     value: PropTypes.object,
-    onChange: PropTypes.func,
+    // onChange: PropTypes.func,
     showHour: PropTypes.bool,
     showMinute: PropTypes.bool,
     showSecond: PropTypes.bool,
@@ -35,156 +38,157 @@ class Combobox extends Component {
     disabledHours: PropTypes.func,
     disabledMinutes: PropTypes.func,
     disabledSeconds: PropTypes.func,
-    onCurrentSelectPanelChange: PropTypes.func,
+    // onCurrentSelectPanelChange: PropTypes.func,
     use12Hours: PropTypes.bool,
     isAM: PropTypes.bool,
-  };
+  },
+  methods: {
+    onItemChange (type, itemValue) {
+      const { defaultOpenValue, use12Hours, isAM } = this
+      const value = (this.value || defaultOpenValue).clone()
 
-  onItemChange = (type, itemValue) => {
-    const { onChange, defaultOpenValue, use12Hours } = this.props
-    const value = (this.props.value || defaultOpenValue).clone()
-
-    if (type === 'hour') {
-      if (use12Hours) {
-        if (this.props.isAM) {
-          value.hour(+itemValue % 12)
+      if (type === 'hour') {
+        if (use12Hours) {
+          if (isAM) {
+            value.hour(+itemValue % 12)
+          } else {
+            value.hour((+itemValue % 12) + 12)
+          }
         } else {
-          value.hour((+itemValue % 12) + 12)
-        }
-      } else {
-        value.hour(+itemValue)
-      }
-    } else if (type === 'minute') {
-      value.minute(+itemValue)
-    } else if (type === 'ampm') {
-      const ampm = itemValue.toUpperCase()
-      if (use12Hours) {
-        if (ampm === 'PM' && value.hour() < 12) {
-          value.hour((value.hour() % 12) + 12)
+          value.hour(+itemValue)
         }
+      } else if (type === 'minute') {
+        value.minute(+itemValue)
+      } else if (type === 'ampm') {
+        const ampm = itemValue.toUpperCase()
+        if (use12Hours) {
+          if (ampm === 'PM' && value.hour() < 12) {
+            value.hour((value.hour() % 12) + 12)
+          }
 
-        if (ampm === 'AM') {
-          if (value.hour() >= 12) {
-            value.hour(value.hour() - 12)
+          if (ampm === 'AM') {
+            if (value.hour() >= 12) {
+              value.hour(value.hour() - 12)
+            }
           }
         }
+      } else {
+        value.second(+itemValue)
       }
-    } else {
-      value.second(+itemValue)
-    }
-    onChange(value)
-  }
+      this.__emit('change', value)
+    },
 
-  onEnterSelectPanel = (range) => {
-    this.props.onCurrentSelectPanelChange(range)
-  }
+    onEnterSelectPanel (range) {
+      this.__emit('currentSelectPanelChange', range)
+    },
 
-  getHourSelect (hour) {
-    const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props
-    if (!showHour) {
-      return null
-    }
-    const disabledOptions = disabledHours()
-    let hourOptionsAdj
-    let hourAdj
-    if (use12Hours) {
-      hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0))
-      hourAdj = (hour % 12) || 12
-    } else {
-      hourOptionsAdj = hourOptions
-      hourAdj = hour
-    }
+    getHourSelect (hour) {
+      const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this
+      if (!showHour) {
+        return null
+      }
+      const disabledOptions = disabledHours()
+      let hourOptionsAdj
+      let hourAdj
+      if (use12Hours) {
+        hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0))
+        hourAdj = (hour % 12) || 12
+      } else {
+        hourOptionsAdj = hourOptions
+        hourAdj = hour
+      }
 
-    return (
-      <Select
-        prefixCls={prefixCls}
-        options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
-        selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
-        type='hour'
-        onSelect={this.onItemChange}
-        onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
-      />
-    )
-  }
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
+          type='hour'
+          onSelect={this.onItemChange}
+          onMouseenter={this.onEnterSelectPanel.bind(this, 'hour')}
+        />
+      )
+    },
 
-  getMinuteSelect (minute) {
-    const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props
-    if (!showMinute) {
-      return null
-    }
-    const value = this.props.value || defaultOpenValue
-    const disabledOptions = disabledMinutes(value.hour())
+    getMinuteSelect (minute) {
+      const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this
+      if (!showMinute) {
+        return null
+      }
+      const value = this.value || defaultOpenValue
+      const disabledOptions = disabledMinutes(value.hour())
 
-    return (
-      <Select
-        prefixCls={prefixCls}
-        options={minuteOptions.map(option => formatOption(option, disabledOptions))}
-        selectedIndex={minuteOptions.indexOf(minute)}
-        type='minute'
-        onSelect={this.onItemChange}
-        onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
-      />
-    )
-  }
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={minuteOptions.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={minuteOptions.indexOf(minute)}
+          type='minute'
+          onSelect={this.onItemChange}
+          onMouseenter={this.onEnterSelectPanel.bind(this, 'minute')}
+        />
+      )
+    },
 
-  getSecondSelect (second) {
-    const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props
-    if (!showSecond) {
-      return null
-    }
-    const value = this.props.value || defaultOpenValue
-    const disabledOptions = disabledSeconds(value.hour(), value.minute())
+    getSecondSelect (second) {
+      const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this
+      if (!showSecond) {
+        return null
+      }
+      const value = this.value || defaultOpenValue
+      const disabledOptions = disabledSeconds(value.hour(), value.minute())
 
-    return (
-      <Select
-        prefixCls={prefixCls}
-        options={secondOptions.map(option => formatOption(option, disabledOptions))}
-        selectedIndex={secondOptions.indexOf(second)}
-        type='second'
-        onSelect={this.onItemChange}
-        onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
-      />
-    )
-  }
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={secondOptions.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={secondOptions.indexOf(second)}
+          type='second'
+          onSelect={this.onItemChange}
+          onMouseenter={this.onEnterSelectPanel.bind(this, 'second')}
+        />
+      )
+    },
 
-  getAMPMSelect () {
-    const { prefixCls, use12Hours, format } = this.props
-    if (!use12Hours) {
-      return null
-    }
+    getAMPMSelect () {
+      const { prefixCls, use12Hours, format, isAM } = this
+      if (!use12Hours) {
+        return null
+      }
 
-    const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
-      .map(c => format.match(/\sA/) ? c.toUpperCase() : c)
-      .map(c => ({ value: c }))
+      const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
+        .map(c => format.match(/\sA/) ? c.toUpperCase() : c)
+        .map(c => ({ value: c }))
 
-    const selected = this.props.isAM ? 0 : 1
+      const selected = isAM ? 0 : 1
 
-    return (
-      <Select
-        prefixCls={prefixCls}
-        options={AMPMOptions}
-        selectedIndex={selected}
-        type='ampm'
-        onSelect={this.onItemChange}
-        onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
-      />
-    )
-  }
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={AMPMOptions}
+          selectedIndex={selected}
+          type='ampm'
+          onSelect={this.onItemChange}
+          onMouseenter={this.onEnterSelectPanel.bind(this, 'ampm')}
+        />
+      )
+    },
+  },
 
   render () {
-    const { prefixCls, defaultOpenValue } = this.props
-    const value = this.props.value || defaultOpenValue
+    const { prefixCls, defaultOpenValue } = this
+    const value = this.value || defaultOpenValue
     return (
-      <div className={`${prefixCls}-combobox`}>
+      <div class={`${prefixCls}-combobox`}>
         {this.getHourSelect(value.hour())}
         {this.getMinuteSelect(value.minute())}
         {this.getSecondSelect(value.second())}
         {this.getAMPMSelect(value.hour())}
       </div>
     )
-  }
+  },
 }
 
 export default Combobox
 
-</script>
\ No newline at end of file
+</script>
diff --git a/components/vc-time-picker/Header.vue b/components/vc-time-picker/Header.vue
index 30c31c069..39ccd9fe2 100644
--- a/components/vc-time-picker/Header.vue
+++ b/components/vc-time-picker/Header.vue
@@ -1,202 +1,203 @@
 <script>
-import PropTypes from 'prop-types'
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
 import moment from 'moment'
 
-class Header extends Component {
-  static propTypes = {
+const Header = {
+  mixins: [BaseMixin],
+  props: {
     format: PropTypes.string,
     prefixCls: PropTypes.string,
     disabledDate: PropTypes.func,
     placeholder: PropTypes.string,
     clearText: PropTypes.string,
     value: PropTypes.object,
-    inputReadOnly: PropTypes.bool,
+    inputReadOnly: PropTypes.bool.def(false),
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
     secondOptions: PropTypes.array,
     disabledHours: PropTypes.func,
     disabledMinutes: PropTypes.func,
     disabledSeconds: PropTypes.func,
-    onChange: PropTypes.func,
-    onClear: PropTypes.func,
-    onEsc: PropTypes.func,
+    // onChange: PropTypes.func,
+    // onClear: PropTypes.func,
+    // onEsc: PropTypes.func,
     allowEmpty: PropTypes.bool,
     defaultOpenValue: PropTypes.object,
     currentSelectPanel: PropTypes.string,
     focusOnOpen: PropTypes.bool,
-    onKeyDown: PropTypes.func,
-  };
-
-  static defaultProps = {
-    inputReadOnly: false,
-  }
-
-  constructor (props) {
-    super(props)
-    const { value, format } = props
-    this.state = {
+    // onKeyDown: PropTypes.func,
+    showStr: PropTypes.bool.def(true),
+  },
+  data () {
+    const { value, format } = this
+    return {
       str: value && value.format(format) || '',
       invalid: false,
     }
-  }
+  },
 
-  componentDidMount () {
-    if (this.props.focusOnOpen) {
+  mounted () {
+    if (this.focusOnOpen) {
       // Wait one frame for the panel to be positioned before focusing
       const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout)
       requestAnimationFrame(() => {
-        this.refs.input.focus()
-        this.refs.input.select()
+        this.$refs.input.focus()
+        this.$refs.input.select()
       })
     }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    const { value, format } = nextProps
-    this.setState({
-      str: value && value.format(format) || '',
-      invalid: false,
-    })
-  }
-
-  onInputChange = (event) => {
-    const str = event.target.value
-    this.setState({
-      str,
-    })
-    const {
-      format, hourOptions, minuteOptions, secondOptions,
-      disabledHours, disabledMinutes,
-      disabledSeconds, onChange, allowEmpty,
-    } = this.props
-
-    if (str) {
-      const originalValue = this.props.value
-      const value = this.getProtoValue().clone()
-      const parsed = moment(str, format, true)
-      if (!parsed.isValid()) {
+  },
+  watch: {
+    '$props': {
+      handler: function (nextProps) {
+        const { value, format } = nextProps
         this.setState({
-          invalid: true,
+          str: value && value.format(format) || '',
+          invalid: false,
         })
-        return
-      }
-      value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second())
+      },
+      deep: true,
+    },
+  },
 
-      // if time value not allowed, response warning.
-      if (
-        hourOptions.indexOf(value.hour()) < 0 ||
+  methods: {
+    onInputChange (event) {
+      const str = event.target.value
+      this.showStr = true
+      this.setState({
+        str,
+      })
+      const {
+        format, hourOptions, minuteOptions, secondOptions,
+        disabledHours, disabledMinutes,
+        disabledSeconds, allowEmpty,
+        value: originalValue,
+      } = this
+
+      if (str) {
+        const value = this.getProtoValue().clone()
+        const parsed = moment(str, format, true)
+        if (!parsed.isValid()) {
+          this.setState({
+            invalid: true,
+          })
+          return
+        }
+        value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second())
+
+        // if time value not allowed, response warning.
+        if (
+          hourOptions.indexOf(value.hour()) < 0 ||
         minuteOptions.indexOf(value.minute()) < 0 ||
         secondOptions.indexOf(value.second()) < 0
-      ) {
-        this.setState({
-          invalid: true,
-        })
-        return
-      }
+        ) {
+          this.setState({
+            invalid: true,
+          })
+          return
+        }
 
-      // if time value is disabled, response warning.
-      const disabledHourOptions = disabledHours()
-      const disabledMinuteOptions = disabledMinutes(value.hour())
-      const disabledSecondOptions = disabledSeconds(value.hour(), value.minute())
-      if (
-        (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
+        // if time value is disabled, response warning.
+        const disabledHourOptions = disabledHours()
+        const disabledMinuteOptions = disabledMinutes(value.hour())
+        const disabledSecondOptions = disabledSeconds(value.hour(), value.minute())
+        if (
+          (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
         (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
         (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
-      ) {
+        ) {
+          this.setState({
+            invalid: true,
+          })
+          return
+        }
+
+        if (originalValue) {
+          if (
+            originalValue.hour() !== value.hour() ||
+          originalValue.minute() !== value.minute() ||
+          originalValue.second() !== value.second()
+          ) {
+          // keep other fields for rc-calendar
+            const changedValue = originalValue.clone()
+            changedValue.hour(value.hour())
+            changedValue.minute(value.minute())
+            changedValue.second(value.second())
+            this.__emit('change', changedValue)
+          }
+        } else if (originalValue !== value) {
+          this.__emit('change', value)
+        }
+      } else if (allowEmpty) {
+        this.__emit('change', null)
+      } else {
         this.setState({
           invalid: true,
         })
         return
       }
 
-      if (originalValue) {
-        if (
-          originalValue.hour() !== value.hour() ||
-          originalValue.minute() !== value.minute() ||
-          originalValue.second() !== value.second()
-        ) {
-          // keep other fields for rc-calendar
-          const changedValue = originalValue.clone()
-          changedValue.hour(value.hour())
-          changedValue.minute(value.minute())
-          changedValue.second(value.second())
-          onChange(changedValue)
-        }
-      } else if (originalValue !== value) {
-        onChange(value)
-      }
-    } else if (allowEmpty) {
-      onChange(null)
-    } else {
       this.setState({
-        invalid: true,
+        invalid: false,
       })
-      return
-    }
+    },
 
-    this.setState({
-      invalid: false,
-    })
-  }
+    onKeyDown (e) {
+      if (e.keyCode === 27) {
+        this.__emit('esc')
+      }
+      this.__emit('keydown', e)
+    },
 
-  onKeyDown = (e) => {
-    const { onEsc, onKeyDown } = this.props
-    if (e.keyCode === 27) {
-      onEsc()
-    }
+    onClear () {
+      this.__emit('clear')
+      this.setState({ str: '' })
+    },
 
-    onKeyDown(e)
-  }
+    getClearButton () {
+      const { prefixCls, allowEmpty, clearText } = this
+      if (!allowEmpty) {
+        return null
+      }
+      return (<a
+        class={`${prefixCls}-clear-btn`}
+        role='button'
+        title={clearText}
+        onMousedown={this.onClear}
+      />)
+    },
 
-  onClear = () => {
-    this.setState({ str: '' })
-    this.props.onClear()
-  }
+    getProtoValue () {
+      return this.value || this.defaultOpenValue
+    },
 
-  getClearButton () {
-    const { prefixCls, allowEmpty } = this.props
-    if (!allowEmpty) {
-      return null
-    }
-    return (<a
-      className={`${prefixCls}-clear-btn`}
-      role='button'
-      title={this.props.clearText}
-      onMouseDown={this.onClear}
-    />)
-  }
-
-  getProtoValue () {
-    return this.props.value || this.props.defaultOpenValue
-  }
-
-  getInput () {
-    const { prefixCls, placeholder, inputReadOnly } = this.props
-    const { invalid, str } = this.state
-    const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''
-    return (
-      <input
-        className={`${prefixCls}-input  ${invalidClass}`}
-        ref='input'
-        onKeyDown={this.onKeyDown}
-        value={str}
-        placeholder={placeholder}
-        onChange={this.onInputChange}
-        readOnly={!!inputReadOnly}
-      />
-    )
-  }
+    getInput () {
+      const { prefixCls, placeholder, inputReadOnly, invalid, str, showStr } = this
+      const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''
+      return (
+        <input
+          class={`${prefixCls}-input  ${invalidClass}`}
+          ref='input'
+          onKeydown={this.onKeyDown}
+          value={showStr ? str : ''}
+          placeholder={placeholder}
+          onInput={this.onInputChange}
+          readOnly={!!inputReadOnly}
+        />
+      )
+    },
+  },
 
   render () {
-    const { prefixCls } = this.props
+    const { prefixCls } = this
     return (
-      <div className={`${prefixCls}-input-wrap`}>
+      <div class={`${prefixCls}-input-wrap`}>
         {this.getInput()}
         {this.getClearButton()}
       </div>
     )
-  }
+  },
 }
 
 export default Header
-</script>
\ No newline at end of file
+</script>
diff --git a/components/vc-time-picker/Panel.vue b/components/vc-time-picker/Panel.vue
index 2981bdd06..27bd549cb 100644
--- a/components/vc-time-picker/Panel.vue
+++ b/components/vc-time-picker/Panel.vue
@@ -1,9 +1,9 @@
 <script>
-import PropTypes from 'prop-types'
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
 import Header from './Header'
 import Combobox from './Combobox'
 import moment from 'moment'
-import classNames from 'classnames'
 
 function noop () {
 }
@@ -17,114 +17,110 @@ function generateOptions (length, disabledOptions, hideDisabledOptions, step = 1
   }
   return arr
 }
-
-class Panel extends Component {
-  static propTypes = {
+const Panel = {
+  mixins: [BaseMixin],
+  props: {
     clearText: PropTypes.string,
-    prefixCls: PropTypes.string,
-    className: PropTypes.string,
-    defaultOpenValue: PropTypes.object,
+    prefixCls: PropTypes.string.def('rc-time-picker-panel'),
+    defaultOpenValue: {
+      type: Object,
+      default: () => {
+        return moment()
+      },
+    },
     value: PropTypes.object,
     placeholder: PropTypes.string,
     format: PropTypes.string,
-    inputReadOnly: PropTypes.bool,
-    disabledHours: PropTypes.func,
-    disabledMinutes: PropTypes.func,
-    disabledSeconds: PropTypes.func,
+    inputReadOnly: PropTypes.bool.def(false),
+    disabledHours: PropTypes.func.def(noop),
+    disabledMinutes: PropTypes.func.def(noop),
+    disabledSeconds: PropTypes.func.def(noop),
     hideDisabledOptions: PropTypes.bool,
-    onChange: PropTypes.func,
-    onEsc: PropTypes.func,
+    // onChange: PropTypes.func,
+    // onEsc: PropTypes.func,
     allowEmpty: PropTypes.bool,
     showHour: PropTypes.bool,
     showMinute: PropTypes.bool,
     showSecond: PropTypes.bool,
-    onClear: PropTypes.func,
-    use12Hours: PropTypes.bool,
+    // onClear: PropTypes.func,
+    use12Hours: PropTypes.bool.def(false),
     hourStep: PropTypes.number,
     minuteStep: PropTypes.number,
     secondStep: PropTypes.number,
-    addon: PropTypes.func,
     focusOnOpen: PropTypes.bool,
-    onKeyDown: PropTypes.func,
-  };
-
-  static defaultProps = {
-    prefixCls: 'rc-time-picker-panel',
-    onChange: noop,
-    onClear: noop,
-    disabledHours: noop,
-    disabledMinutes: noop,
-    disabledSeconds: noop,
-    defaultOpenValue: moment(),
-    use12Hours: false,
-    addon: noop,
-    onKeyDown: noop,
-    inputReadOnly: false,
-  };
-
-  constructor (props) {
-    super(props)
-    this.state = {
-      value: props.value,
+    // onKeydown: PropTypes.func,
+  },
+  data () {
+    return {
+      sValue: this.value,
       selectionRange: [],
+      currentSelectPanel: '',
+      showStr: true,
     }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    const value = nextProps.value
-    if (value) {
-      this.setState({
-        value,
-      })
-    }
-  }
-
-  onChange = (newValue) => {
-    this.setState({ value: newValue })
-    this.props.onChange(newValue)
-  }
-
-  onCurrentSelectPanelChange = (currentSelectPanel) => {
-    this.setState({ currentSelectPanel })
-  }
-
-  // https://github.com/ant-design/ant-design/issues/5829
-  close () {
-    this.props.onEsc()
-  }
-
-  disabledHours = () => {
-    const { use12Hours, disabledHours } = this.props
-    let disabledOptions = disabledHours()
-    if (use12Hours && Array.isArray(disabledOptions)) {
-      if (this.isAM()) {
-        disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h))
+  },
+  watch: {
+    value (val) {
+      if (val) {
+        this.setState({
+          sValue: val,
+          showStr: true,
+        })
       } else {
-        disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12))
+        this.setState({
+          showStr: false,
+        })
       }
-    }
-    return disabledOptions
-  }
+    },
+  },
 
-  isAM () {
-    const value = (this.state.value || this.props.defaultOpenValue)
-    return value.hour() >= 0 && value.hour() < 12
-  }
+  methods: {
+    onChange (newValue) {
+      this.setState({ sValue: newValue })
+      this.__emit('change', newValue)
+    },
+
+    onCurrentSelectPanelChange (currentSelectPanel) {
+      this.setState({ currentSelectPanel })
+    },
+
+    // https://github.com/ant-design/ant-design/issues/5829
+    close () {
+      this.__emit('esc')
+    },
+
+    disabledHours2 () {
+      const { use12Hours, disabledHours } = this
+      let disabledOptions = disabledHours()
+      if (use12Hours && Array.isArray(disabledOptions)) {
+        if (this.isAM()) {
+          disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h))
+        } else {
+          disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12))
+        }
+      }
+      return disabledOptions
+    },
+
+    isAM () {
+      const value = this.sValue || this.defaultOpenValue
+      return value.hour() >= 0 && value.hour() < 12
+    },
+  },
 
   render () {
     const {
-      prefixCls, className, placeholder, disabledMinutes,
+      prefixCls, placeholder, disabledMinutes,
       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
-      format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
-      focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, inputReadOnly,
-    } = this.props
-    const {
-      value, currentSelectPanel,
-    } = this.state
-    const disabledHourOptions = this.disabledHours()
-    const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null)
-    const disabledSecondOptions = disabledSeconds(value ? value.hour() : null,
-      value ? value.minute() : null)
+      format, defaultOpenValue, clearText, use12Hours,
+      focusOnOpen, hourStep, minuteStep, secondStep, inputReadOnly,
+      sValue, currentSelectPanel, showStr, $listeners = {},
+    } = this
+    const { esc = noop, clear = noop, keydown = noop } = $listeners
+
+    const disabledHourOptions = this.disabledHours2()
+    const disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null)
+    const disabledSecondOptions = disabledSeconds(sValue ? sValue.hour() : null,
+      sValue ? sValue.minute() : null)
     const hourOptions = generateOptions(
       24, disabledHourOptions, hideDisabledOptions, hourStep
     )
@@ -136,32 +132,33 @@ class Panel extends Component {
     )
 
     return (
-      <div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}>
+      <div class={`${prefixCls}-inner`}>
         <Header
           clearText={clearText}
           prefixCls={prefixCls}
           defaultOpenValue={defaultOpenValue}
-          value={value}
+          value={sValue}
           currentSelectPanel={currentSelectPanel}
-          onEsc={onEsc}
+          onEsc={esc}
           format={format}
           placeholder={placeholder}
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
-          disabledHours={this.disabledHours}
+          disabledHours={this.disabledHours2}
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
           onChange={this.onChange}
-          onClear={onClear}
+          onClear={clear}
           allowEmpty={allowEmpty}
           focusOnOpen={focusOnOpen}
-          onKeyDown={onKeyDown}
+          onKeydown={keydown}
           inputReadOnly={inputReadOnly}
+          showStr={showStr}
         />
         <Combobox
           prefixCls={prefixCls}
-          value={value}
+          value={sValue}
           defaultOpenValue={defaultOpenValue}
           format={format}
           onChange={this.onChange}
@@ -171,17 +168,17 @@ class Panel extends Component {
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
-          disabledHours={this.disabledHours}
+          disabledHours={this.disabledHours2}
           disabledMinutes={disabledMinutes}
           disabledSeconds={disabledSeconds}
           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
           use12Hours={use12Hours}
           isAM={this.isAM()}
         />
-        {addon(this)}
+        {this.$slots.default}
       </div>
     )
-  }
+  },
 }
 
 export default Panel
diff --git a/components/vc-time-picker/Select.vue b/components/vc-time-picker/Select.vue
index c5d34474e..5d6b4d743 100644
--- a/components/vc-time-picker/Select.vue
+++ b/components/vc-time-picker/Select.vue
@@ -1,7 +1,8 @@
 <script>
-import PropTypes from 'prop-types'
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
 import classnames from 'classnames'
-
+function noop () {}
 const scrollTo = (element, to, duration) => {
   const requestAnimationFrame = window.requestAnimationFrame ||
     function requestAnimationFrameTimeout () {
@@ -22,109 +23,111 @@ const scrollTo = (element, to, duration) => {
   })
 }
 
-class Select extends Component {
-  static propTypes = {
+const Select = {
+  mixins: [BaseMixin],
+  props: {
     prefixCls: PropTypes.string,
     options: PropTypes.array,
     selectedIndex: PropTypes.number,
     type: PropTypes.string,
-    onSelect: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-  };
-
-  state = {
-    active: false,
-  };
-
-  componentDidMount () {
-    // jump to selected option
-    this.scrollToSelected(0)
-  }
-
-  componentDidUpdate (prevProps) {
-    // smooth scroll to selected option
-    if (prevProps.selectedIndex !== this.props.selectedIndex) {
-      this.scrollToSelected(120)
+    // onSelect: PropTypes.func,
+    // onMouseEnter: PropTypes.func,
+  },
+  data () {
+    return {
+      active: false,
     }
-  }
+  },
 
-  onSelect = (value) => {
-    const { onSelect, type } = this.props
-    onSelect(type, value)
-  }
-
-  getOptions () {
-    const { options, selectedIndex, prefixCls } = this.props
-    return options.map((item, index) => {
-      const cls = classnames({
-        [`${prefixCls}-select-option-selected`]: selectedIndex === index,
-        [`${prefixCls}-select-option-disabled`]: item.disabled,
-      })
-      let onclick = null
-      if (!item.disabled) {
-        onclick = this.onSelect.bind(this, item.value)
-      }
-      return (<li
-        className={cls}
-        key={index}
-        onClick={onclick}
-        disabled={item.disabled}
-      >
-        {item.value}
-      </li>)
+  mounted () {
+    this.$nextTick(() => {
+      // jump to selected option
+      this.scrollToSelected(0)
     })
-  }
+  },
+  watch: {
+    selectedIndex (val) {
+      this.$nextTick(() => {
+        // smooth scroll to selected option
+        this.scrollToSelected(120)
+      })
+    },
+  },
+  methods: {
+    onSelect (value) {
+      const { type } = this
+      this.__emit('select', type, value)
+    },
 
-  scrollToSelected (duration) {
+    getOptions () {
+      const { options, selectedIndex, prefixCls } = this
+      return options.map((item, index) => {
+        const cls = classnames({
+          [`${prefixCls}-select-option-selected`]: selectedIndex === index,
+          [`${prefixCls}-select-option-disabled`]: item.disabled,
+        })
+        let onClick = noop
+        if (!item.disabled) {
+          onClick = this.onSelect.bind(this, item.value)
+        }
+        return (<li
+          class={cls}
+          key={index}
+          onClick={onClick}
+          disabled={item.disabled}
+        >
+          {item.value}
+        </li>)
+      })
+    },
+
+    scrollToSelected (duration) {
     // move to selected item
-    const select = ReactDom.findDOMNode(this)
-    const list = ReactDom.findDOMNode(this.list)
-    if (!list) {
-      return
-    }
-    let index = this.props.selectedIndex
-    if (index < 0) {
-      index = 0
-    }
-    const topOption = list.children[index]
-    const to = topOption.offsetTop
-    scrollTo(select, to, duration)
-  }
+      const select = this.$el
+      const list = this.$refs.list
+      if (!list) {
+        return
+      }
+      let index = this.selectedIndex
+      if (index < 0) {
+        index = 0
+      }
+      const topOption = list.children[index]
+      const to = topOption.offsetTop
+      scrollTo(select, to, duration)
+    },
 
-  handleMouseEnter = (e) => {
-    this.setState({ active: true })
-    this.props.onMouseEnter(e)
-  }
+    handleMouseEnter (e) {
+      this.setState({ active: true })
+      this.__emit('mouseenter', e)
+    },
 
-  handleMouseLeave = () => {
-    this.setState({ active: false })
-  }
-
-  saveList = (node) => {
-    this.list = node
-  }
+    handleMouseLeave () {
+      this.setState({ active: false })
+    },
+  },
 
   render () {
-    if (this.props.options.length === 0) {
+    if (this.options.length === 0) {
       return null
     }
 
-    const { prefixCls } = this.props
-    const cls = classnames({
+    const { prefixCls } = this
+    const cls = {
       [`${prefixCls}-select`]: 1,
-      [`${prefixCls}-select-active`]: this.state.active,
-    })
+      [`${prefixCls}-select-active`]: this.active,
+    }
 
     return (
       <div
-        className={cls}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
+        class={cls}
+        onMouseenter={this.handleMouseEnter}
+        onMouseleave={this.handleMouseLeave}
       >
-        <ul ref={this.saveList}>{this.getOptions()}</ul>
+        <ul ref='list'>{this.getOptions()}</ul>
       </div>
     )
-  }
+  },
 }
 
 export default Select
diff --git a/components/vc-time-picker/TimePicker.vue b/components/vc-time-picker/TimePicker.vue
index 4cfb6f5e9..a6ce9222e 100644
--- a/components/vc-time-picker/TimePicker.vue
+++ b/components/vc-time-picker/TimePicker.vue
@@ -1,27 +1,31 @@
 <script>
-import PropTypes from 'prop-types'
-import Trigger from 'rc-trigger'
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import Trigger from '../trigger'
 import Panel from './Panel'
 import placements from './placements'
 import moment from 'moment'
+import { initDefaultProps, hasProp } from '../_util/props-util'
 
 function noop () {
 }
 
-function refFn (field, component) {
-  this[field] = component
-}
-
-export default class Picker extends Component {
-  static propTypes = {
+export default {
+  mixins: [BaseMixin],
+  props: initDefaultProps({
     prefixCls: PropTypes.string,
     clearText: PropTypes.string,
-    value: PropTypes.object,
-    defaultOpenValue: PropTypes.object,
+    value: PropTypes.any,
+    defaultOpenValue: {
+      type: Object,
+      default: () => {
+        return moment()
+      },
+    },
     inputReadOnly: PropTypes.bool,
     disabled: PropTypes.bool,
     allowEmpty: PropTypes.bool,
-    defaultValue: PropTypes.object,
+    defaultValue: PropTypes.any,
     open: PropTypes.bool,
     defaultOpen: PropTypes.bool,
     align: PropTypes.object,
@@ -33,19 +37,16 @@ export default class Picker extends Component {
     showHour: PropTypes.bool,
     showMinute: PropTypes.bool,
     showSecond: PropTypes.bool,
-    style: PropTypes.object,
-    className: PropTypes.string,
     popupClassName: PropTypes.string,
     disabledHours: PropTypes.func,
     disabledMinutes: PropTypes.func,
     disabledSeconds: PropTypes.func,
     hideDisabledOptions: PropTypes.bool,
-    onChange: PropTypes.func,
-    onOpen: PropTypes.func,
-    onClose: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    addon: PropTypes.func,
+    // onChange: PropTypes.func,
+    // onOpen: PropTypes.func,
+    // onClose: PropTypes.func,
+    // onFocus: PropTypes.func,
+    // onBlur: PropTypes.func,
     name: PropTypes.string,
     autoComplete: PropTypes.string,
     use12Hours: PropTypes.bool,
@@ -53,20 +54,15 @@ export default class Picker extends Component {
     minuteStep: PropTypes.number,
     secondStep: PropTypes.number,
     focusOnOpen: PropTypes.bool,
-    onKeyDown: PropTypes.func,
+    // onKeyDown: PropTypes.func,
     autoFocus: PropTypes.bool,
-  };
-
-  static defaultProps = {
+  }, {
     clearText: 'clear',
     prefixCls: 'rc-time-picker',
     defaultOpen: false,
     inputReadOnly: false,
-    style: {},
-    className: '',
     popupClassName: '',
     align: {},
-    defaultOpenValue: moment(),
     allowEmpty: true,
     showHour: true,
     showMinute: true,
@@ -76,194 +72,195 @@ export default class Picker extends Component {
     disabledSeconds: noop,
     hideDisabledOptions: false,
     placement: 'bottomLeft',
-    onChange: noop,
-    onOpen: noop,
-    onClose: noop,
-    onFocus: noop,
-    onBlur: noop,
-    addon: noop,
     use12Hours: false,
     focusOnOpen: false,
-    onKeyDown: noop,
-  };
-
-  constructor (props) {
-    super(props)
-    this.saveInputRef = refFn.bind(this, 'picker')
-    this.savePanelRef = refFn.bind(this, 'panelInstance')
-    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = props
-    this.state = {
-      open,
-      value,
+  }),
+  data () {
+    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this
+    return {
+      sOpen: open,
+      sValue: value,
     }
-  }
+  },
 
-  componentWillReceiveProps (nextProps) {
-    const { value, open } = nextProps
-    if ('value' in nextProps) {
+  watch: {
+    value (val) {
       this.setState({
-        value,
+        sValue: val,
       })
-    }
-    if (open !== undefined) {
-      this.setState({ open })
-    }
-  }
+    },
+    open (val) {
+      if (val !== undefined) {
+        this.setState({
+          sOpen: val,
+        })
+      }
+    },
+  },
+  methods: {
+    onPanelChange (value) {
+      this.setValue(value)
+    },
 
-  onPanelChange = (value) => {
-    this.setValue(value)
-  }
+    onPanelClear () {
+      this.setValue(null)
+      this.setOpen(false)
+    },
 
-  onPanelClear = () => {
-    this.setValue(null)
-    this.setOpen(false)
-  }
+    onVisibleChange (open) {
+      this.setOpen(open)
+    },
 
-  onVisibleChange = (open) => {
-    this.setOpen(open)
-  }
+    onEsc () {
+      this.setOpen(false)
+      this.focus()
+    },
 
-  onEsc = () => {
-    this.setOpen(false)
-    this.focus()
-  }
+    onKeyDown (e) {
+      if (e.keyCode === 40) {
+        this.setOpen(true)
+      }
+    },
+    onKeyDown2 (e) {
+      this.__emit('keydown', e)
+    },
 
-  onKeyDown = (e) => {
-    if (e.keyCode === 40) {
-      this.setOpen(true)
-    }
-  }
+    setValue (value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({
+          sValue: value,
+        })
+      }
+      this.__emit('change', value)
+    },
 
-  setValue (value) {
-    if (!('value' in this.props)) {
-      this.setState({
-        value,
-      })
-    }
-    this.props.onChange(value)
-  }
+    getFormat () {
+      const { format, showHour, showMinute, showSecond, use12Hours } = this
+      if (format) {
+        return format
+      }
 
-  getFormat () {
-    const { format, showHour, showMinute, showSecond, use12Hours } = this.props
-    if (format) {
-      return format
-    }
+      if (use12Hours) {
+        const fmtString = ([
+          showHour ? 'h' : '',
+          showMinute ? 'mm' : '',
+          showSecond ? 'ss' : '',
+        ].filter(item => !!item).join(':'))
 
-    if (use12Hours) {
-      const fmtString = ([
-        showHour ? 'h' : '',
+        return fmtString.concat(' a')
+      }
+
+      return [
+        showHour ? 'HH' : '',
         showMinute ? 'mm' : '',
         showSecond ? 'ss' : '',
-      ].filter(item => !!item).join(':'))
+      ].filter(item => !!item).join(':')
+    },
 
-      return fmtString.concat(' a')
-    }
+    getPanelElement () {
+      const {
+        prefixCls, placeholder, disabledHours,
+        disabledMinutes, disabledSeconds, hideDisabledOptions, inputReadOnly,
+        allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
+        use12Hours, focusOnOpen, onKeyDown2, hourStep, minuteStep, secondStep,
+        sValue,
+      } = this
+      return (
+        <Panel
+          clearText={clearText}
+          prefixCls={`${prefixCls}-panel`}
+          ref='panel'
+          value={sValue}
+          inputReadOnly={inputReadOnly}
+          onChange={this.onPanelChange}
+          onClear={this.onPanelClear}
+          defaultOpenValue={defaultOpenValue}
+          showHour={showHour}
+          showMinute={showMinute}
+          showSecond={showSecond}
+          onEsc={this.onEsc}
+          allowEmpty={allowEmpty}
+          format={this.getFormat()}
+          placeholder={placeholder}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
+          hideDisabledOptions={hideDisabledOptions}
+          use12Hours={use12Hours}
+          hourStep={hourStep}
+          minuteStep={minuteStep}
+          secondStep={secondStep}
+          focusOnOpen={focusOnOpen}
+          onKeyDown={onKeyDown2}
+        >
+          {this.$slots.addon}
+        </Panel>
+      )
+    },
 
-    return [
-      showHour ? 'HH' : '',
-      showMinute ? 'mm' : '',
-      showSecond ? 'ss' : '',
-    ].filter(item => !!item).join(':')
-  }
-
-  getPanelElement () {
-    const {
-      prefixCls, placeholder, disabledHours,
-      disabledMinutes, disabledSeconds, hideDisabledOptions, inputReadOnly,
-      allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
-      addon, use12Hours, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep,
-    } = this.props
-    return (
-      <Panel
-        clearText={clearText}
-        prefixCls={`${prefixCls}-panel`}
-        ref={this.savePanelRef}
-        value={this.state.value}
-        inputReadOnly={inputReadOnly}
-        onChange={this.onPanelChange}
-        onClear={this.onPanelClear}
-        defaultOpenValue={defaultOpenValue}
-        showHour={showHour}
-        showMinute={showMinute}
-        showSecond={showSecond}
-        onEsc={this.onEsc}
-        allowEmpty={allowEmpty}
-        format={this.getFormat()}
-        placeholder={placeholder}
-        disabledHours={disabledHours}
-        disabledMinutes={disabledMinutes}
-        disabledSeconds={disabledSeconds}
-        hideDisabledOptions={hideDisabledOptions}
-        use12Hours={use12Hours}
-        hourStep={hourStep}
-        minuteStep={minuteStep}
-        secondStep={secondStep}
-        addon={addon}
-        focusOnOpen={focusOnOpen}
-        onKeyDown={onKeyDown}
-      />
-    )
-  }
-
-  getPopupClassName () {
-    const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this.props
-    let popupClassName = this.props.popupClassName
-    // Keep it for old compatibility
-    if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
-      popupClassName += ` ${prefixCls}-panel-narrow`
-    }
-    let selectColumnCount = 0
-    if (showHour) {
-      selectColumnCount += 1
-    }
-    if (showMinute) {
-      selectColumnCount += 1
-    }
-    if (showSecond) {
-      selectColumnCount += 1
-    }
-    if (use12Hours) {
-      selectColumnCount += 1
-    }
-    popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`
-    return popupClassName
-  }
-
-  setOpen (open) {
-    const { onOpen, onClose } = this.props
-    if (this.state.open !== open) {
-      if (!('open' in this.props)) {
-        this.setState({ open })
+    getPopupClassName () {
+      const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this
+      let popupClassName = this.popupClassName
+      // Keep it for old compatibility
+      if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
+        popupClassName += ` ${prefixCls}-panel-narrow`
       }
-      if (open) {
-        onOpen({ open })
-      } else {
-        onClose({ open })
+      let selectColumnCount = 0
+      if (showHour) {
+        selectColumnCount += 1
       }
-    }
-  }
+      if (showMinute) {
+        selectColumnCount += 1
+      }
+      if (showSecond) {
+        selectColumnCount += 1
+      }
+      if (use12Hours) {
+        selectColumnCount += 1
+      }
+      popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`
+      return popupClassName
+    },
 
-  focus () {
-    this.picker.focus()
-  }
+    setOpen (open) {
+      if (this.sOpen !== open) {
+        if (!hasProp(this, 'open')) {
+          this.setState({ sOpen: open })
+        }
+        if (open) {
+          this.__emit('open', { open })
+        } else {
+          this.__emit('close', { open })
+        }
+      }
+    },
 
-  blur () {
-    this.picker.blur()
-  }
+    focus () {
+      this.$refs.picker.focus()
+    },
+
+    blur () {
+      this.$refs.picker.blur()
+    },
+    onFocus (e) {
+      this.__emit('focus', e)
+    },
+    onBlur (e) {
+      this.__emit('blur', e)
+    },
+  },
 
   render () {
     const {
       prefixCls, placeholder, placement, align,
-      disabled, transitionName, style, className, getPopupContainer, name, autoComplete,
-      onFocus, onBlur, autoFocus, inputReadOnly,
-    } = this.props
-    const { open, value } = this.state
+      disabled, transitionName, getPopupContainer, name, autoComplete,
+      autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur,
+    } = this
     const popupClassName = this.getPopupClassName()
     return (
       <Trigger
         prefixCls={`${prefixCls}-panel`}
         popupClassName={popupClassName}
-        popup={this.getPanelElement()}
         popupAlign={align}
         builtinPlacements={placements}
         popupPlacement={placement}
@@ -271,19 +268,22 @@ export default class Picker extends Component {
         destroyPopupOnHide
         getPopupContainer={getPopupContainer}
         popupTransitionName={transitionName}
-        popupVisible={open}
+        popupVisible={sOpen}
         onPopupVisibleChange={this.onVisibleChange}
       >
-        <span className={`${prefixCls} ${className}`} style={style}>
+        <template slot='popup'>
+          {this.getPanelElement()}
+        </template>
+        <span class={`${prefixCls}`}>
           <input
-            className={`${prefixCls}-input`}
-            ref={this.saveInputRef}
+            class={`${prefixCls}-input`}
+            ref='picker'
             type='text'
             placeholder={placeholder}
             name={name}
-            onKeyDown={this.onKeyDown}
+            onKeydown={this.onKeyDown}
             disabled={disabled}
-            value={value && value.format(this.getFormat()) || ''}
+            value={sValue && sValue.format(this.getFormat()) || ''}
             autoComplete={autoComplete}
             onFocus={onFocus}
             onBlur={onBlur}
@@ -291,10 +291,10 @@ export default class Picker extends Component {
             onChange={noop}
             readOnly={!!inputReadOnly}
           />
-          <span className={`${prefixCls}-icon`}/>
+          <span class={`${prefixCls}-icon`}/>
         </span>
       </Trigger>
     )
-  }
+  },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/vc-time-picker/demo/all.vue b/components/vc-time-picker/demo/all.vue
new file mode 100644
index 000000000..a405a0bdd
--- /dev/null
+++ b/components/vc-time-picker/demo/all.vue
@@ -0,0 +1,160 @@
+<script>
+import '../assets/index.less'
+
+import moment from 'moment'
+
+import TimePicker from '../index'
+
+const format = 'h:mm a'
+
+const now = moment().hour(0).minute(0)
+
+function onChange (value) {
+  console.log(value && value.format(format))
+}
+
+const showSecond = true
+const str = showSecond ? 'HH:mm:ss' : 'HH:mm'
+
+const now1 = moment().hour(14).minute(30)
+
+function generateOptions (length, excludedOptions) {
+  const arr = []
+  for (let value = 0; value < length; value++) {
+    if (excludedOptions.indexOf(value) < 0) {
+      arr.push(value)
+    }
+  }
+  return arr
+}
+
+function onChange1 (value) {
+  console.log(value && value.format(str))
+}
+
+function disabledHours () {
+  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]
+}
+
+function disabledMinutes (h) {
+  switch (h) {
+    case 9:
+      return generateOptions(60, [30])
+    case 21:
+      return generateOptions(60, [0])
+    default:
+      return generateOptions(60, [0, 30])
+  }
+}
+
+function disabledSeconds (h, m) {
+  return [h + m % 60]
+}
+
+export default{
+  data () {
+    return {
+      open: false,
+      value: moment(),
+    }
+  },
+  methods: {
+    setOpen ({ open }) {
+      this.open = open
+    },
+    toggleOpen () {
+      this.open = !this.open
+    },
+    handleValueChange  (value) {
+      console.log(value && value.format('HH:mm:ss'))
+      this.value = value
+    },
+    clear () {
+      this.value = undefined
+    },
+  },
+  render () {
+    return (
+      <div>
+        <TimePicker
+          showSecond={false}
+          defaultValue={now}
+          class='xxx'
+          onChange={onChange}
+          format={format}
+          use12Hours
+          inputReadOnly
+        />
+        <br/>
+        <br/>
+        <div>
+          <h3>Disabled picker</h3>
+          <TimePicker
+            defaultValue={now1}
+            disabled
+            onChange={onChange1}
+          />
+          <h3>Disabled options</h3>
+          <TimePicker
+            showSecond={showSecond}
+            defaultValue={now1}
+            class='xxx'
+            onChange={onChange1}
+            disabledHours={disabledHours}
+            disabledMinutes={disabledMinutes}
+            disabledSeconds={disabledSeconds}
+          />
+        </div>
+        <div>
+          <TimePicker defaultValue={moment()} showHour={false} />
+          <TimePicker defaultValue={moment()} showMinute={false} />
+          <TimePicker defaultValue={moment()} showSecond={false} />
+
+          <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
+          <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
+          <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
+        </div>
+        <TimePicker
+          format={str}
+          showSecond={showSecond}
+          // use to control utfOffset, locale, default open value
+          defaultOpenValue={moment()}
+          class='xxx'
+          onChange={onChange1}
+          disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
+          disabledMinutes={() => [0, 2, 4, 6, 8]}
+          hideDisabledOptions
+        />
+        <div>
+          <button onClick={this.toggleOpen}>Toggle open</button>
+          <TimePicker
+            open={this.open}
+            onOpen={this.setOpen}
+            onClose={this.setOpen}
+            focusOnOpen
+          />
+        </div>
+        <TimePicker
+          style={{ width: '100px' }}
+          showSecond={showSecond}
+          defaultValue={moment()}
+          class='xxx'
+          onChange={onChange}
+        />
+        <TimePicker defaultValue={moment()} showSecond={false} minuteStep={15} />
+        <div>
+          <TimePicker
+            defaultValue={this.value}
+            onChange={this.handleValueChange}
+          />
+          <TimePicker
+            value={this.value}
+            onChange={this.handleValueChange}
+          />
+          <button onClick={this.clear}>clear</button>
+        </div>
+      </div>
+    )
+  },
+}
+</script>
diff --git a/examples/routes.js b/examples/routes.js
index 1481f4077..95aa1e7c4 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/grid/demo/${d}`),
+    component: import(`../components/time-picker/demo/${d}`),
   }
 }
 export default [
diff --git a/package-lock.json b/package-lock.json
index 27fa07fb8..5e3eec983 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3265,6 +3265,11 @@
                 "tapable": "0.2.8"
             }
         },
+        "enquire.js": {
+            "version": "2.1.6",
+            "resolved": "http://registry.npm.taobao.org/enquire.js/download/enquire.js-2.1.6.tgz",
+            "integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ="
+        },
         "ent": {
             "version": "2.2.0",
             "resolved": "http://r.cnpmjs.org/ent/download/ent-2.2.0.tgz",
diff --git a/package.json b/package.json
index 1b2b19bad..bbfb22c0b 100644
--- a/package.json
+++ b/package.json
@@ -1,112 +1,112 @@
 {
-  "name": "vue-ant-design",
-  "version": "1.0.0",
-  "description": "vue component",
-  "main": "index.js",
-  "scripts": {
-    "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
-    "test": "karma start test/karma.conf.js --single-run",
-    "build": "sh build.sh",
-    "lint": "eslint -c ./.eslintrc --fix --ext .js ./src/",
-    "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vueComponent/ant-design.git"
-  },
-  "keywords": [
-    "vue"
-  ],
-  "author": "",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/vueComponent/ant-design/issues"
-  },
-  "homepage": "https://github.com/vueComponent/ant-design#readme",
-  "pre-commit": [
-    "lint",
-    "lint:style"
-  ],
-  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.2",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-istanbul": "^4.1.1",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-decorators": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "chai": "^4.1.2",
-    "cheerio": "^1.0.0-rc.2",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.7.2",
-    "eslint-plugin-html": "^3.2.2",
-    "eslint-plugin-vue-libs": "^1.2.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "fetch-jsonp": "^1.1.3",
-    "highlight.js": "^9.12.0",
-    "html-webpack-plugin": "^2.30.1",
-    "istanbul-instrumenter-loader": "^3.0.0",
-    "jsonp": "^0.2.1",
-    "karma": "^1.4.1",
-    "karma-coverage": "^1.1.1",
-    "karma-coverage-istanbul-reporter": "^1.3.0",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.3.1",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "^2.0.2",
-    "less": "^2.7.2",
-    "less-loader": "^4.0.5",
-    "markdown-it": "^8.4.0",
-    "marked": "^0.3.7",
-    "mocha": "^3.2.0",
-    "pre-commit": "^1.2.2",
-    "querystring": "^0.2.0",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "sinon": "^4.0.2",
-    "sinon-chai": "^2.8.0",
-    "style-loader": "^0.18.2",
-    "stylelint": "^8.1.1",
-    "stylelint-config-standard": "^17.0.0",
-    "vue-antd-md-loader": "^1.0.2",
-    "vue-loader": "^13.0.5",
-    "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.5.13",
-    "webpack": "^3.6.0",
-    "webpack-chunk-hash": "^0.5.0",
-    "webpack-dev-server": "^2.8.2",
-    "webpack-merge": "^4.1.1"
-  },
-  "dependencies": {
-    "add-dom-event-listener": "^1.0.2",
-    "array-tree-filter": "^2.1.0",
-    "classnames": "^2.2.5",
-    "component-classes": "^1.2.6",
-    "css-animation": "^1.4.1",
-    "dom-align": "^1.6.7",
-    "dom-scroll-into-view": "^1.2.1",
-    "enquire.js": "^2.1.6",
-    "eslint-plugin-vue": "^3.13.0",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.isequal": "^4.5.0",
-    "lodash.isplainobject": "^4.0.6",
-    "moment": "^2.21.0",
-    "omit.js": "^1.0.0",
-    "shallow-equal": "^1.0.0",
-    "shallowequal": "^1.0.2",
-    "vue": "^2.5.13",
-    "vue-clipboard2": "0.0.8",
-    "vue-types": "^1.0.2",
-    "warning": "^3.0.0"
-  }
-}
+    "name": "vue-ant-design",
+    "version": "1.0.0",
+    "description": "vue component",
+    "main": "index.js",
+    "scripts": {
+        "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
+        "test": "karma start test/karma.conf.js --single-run",
+        "build": "sh build.sh",
+        "lint": "eslint -c ./.eslintrc --fix --ext .js ./components/time-picker/locale",
+        "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/vueComponent/ant-design.git"
+    },
+    "keywords": [
+        "vue"
+    ],
+    "author": "",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/vueComponent/ant-design/issues"
+    },
+    "homepage": "https://github.com/vueComponent/ant-design#readme",
+    "pre-commit": [
+        "lint",
+        "lint:style"
+    ],
+    "devDependencies": {
+        "babel-cli": "^6.26.0",
+        "babel-eslint": "^8.0.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.2",
+        "babel-loader": "^7.1.2",
+        "babel-plugin-istanbul": "^4.1.1",
+        "babel-plugin-syntax-dynamic-import": "^6.18.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "babel-plugin-transform-decorators": "^6.24.1",
+        "babel-plugin-transform-decorators-legacy": "^1.3.4",
+        "babel-plugin-transform-object-rest-spread": "^6.26.0",
+        "babel-plugin-transform-vue-jsx": "^3.5.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-env": "^1.6.0",
+        "chai": "^4.1.2",
+        "cheerio": "^1.0.0-rc.2",
+        "css-loader": "^0.28.7",
+        "eslint": "^4.7.2",
+        "eslint-plugin-html": "^3.2.2",
+        "eslint-plugin-vue-libs": "^1.2.1",
+        "extract-text-webpack-plugin": "^3.0.2",
+        "fetch-jsonp": "^1.1.3",
+        "highlight.js": "^9.12.0",
+        "html-webpack-plugin": "^2.30.1",
+        "istanbul-instrumenter-loader": "^3.0.0",
+        "jsonp": "^0.2.1",
+        "karma": "^1.4.1",
+        "karma-coverage": "^1.1.1",
+        "karma-coverage-istanbul-reporter": "^1.3.0",
+        "karma-mocha": "^1.3.0",
+        "karma-phantomjs-launcher": "^1.0.2",
+        "karma-phantomjs-shim": "^1.4.0",
+        "karma-sinon-chai": "^1.3.1",
+        "karma-sourcemap-loader": "^0.3.7",
+        "karma-spec-reporter": "0.0.31",
+        "karma-webpack": "^2.0.2",
+        "less": "^2.7.2",
+        "less-loader": "^4.0.5",
+        "markdown-it": "^8.4.0",
+        "marked": "^0.3.7",
+        "mocha": "^3.2.0",
+        "pre-commit": "^1.2.2",
+        "querystring": "^0.2.0",
+        "selenium-server": "^3.0.1",
+        "semver": "^5.3.0",
+        "sinon": "^4.0.2",
+        "sinon-chai": "^2.8.0",
+        "style-loader": "^0.18.2",
+        "stylelint": "^8.1.1",
+        "stylelint-config-standard": "^17.0.0",
+        "vue-antd-md-loader": "^1.0.2",
+        "vue-loader": "^13.0.5",
+        "vue-router": "^3.0.1",
+        "vue-template-compiler": "^2.5.13",
+        "webpack": "^3.6.0",
+        "webpack-chunk-hash": "^0.5.0",
+        "webpack-dev-server": "^2.8.2",
+        "webpack-merge": "^4.1.1"
+    },
+    "dependencies": {
+        "add-dom-event-listener": "^1.0.2",
+        "array-tree-filter": "^2.1.0",
+        "classnames": "^2.2.5",
+        "component-classes": "^1.2.6",
+        "css-animation": "^1.4.1",
+        "dom-align": "^1.6.7",
+        "dom-scroll-into-view": "^1.2.1",
+        "enquire.js": "^2.1.6",
+        "eslint-plugin-vue": "^3.13.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.debounce": "^4.0.8",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isplainobject": "^4.0.6",
+        "moment": "^2.21.0",
+        "omit.js": "^1.0.0",
+        "shallow-equal": "^1.0.0",
+        "shallowequal": "^1.0.2",
+        "vue": "^2.5.13",
+        "vue-clipboard2": "0.0.8",
+        "vue-types": "^1.0.2",
+        "warning": "^3.0.0"
+    }
+}
\ No newline at end of file