add time-picker demo

2018-03-08 23:02:04 +08:00 · 2018-03-08 23:02:04 +08:00 · 18f4a62129
parent 116d2457bb
commit 18f4a62129
57 changed files with 1347 additions and 960 deletions
--- 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,
--- 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'
--- a/components/time-picker/demo/12hours.md
+++ 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>
+```
--- a/components/time-picker/demo/addon.md
+++ 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>
+```
--- a/components/time-picker/demo/basic.md
+++ 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>
+```
--- a/components/time-picker/demo/disabled.md
+++ 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>
+```
--- a/components/time-picker/demo/hide-column.md
+++ 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>
+```
--- a/components/time-picker/demo/interval-options.md
+++ 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>
+```
--- a/components/time-picker/demo/size.md
+++ 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>
+```
--- a/components/time-picker/demo/value.md
+++ 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>
+```
--- 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>
--- a/components/time-picker/locale/ar_EG.tsx.js
+++ b/components/time-picker/locale/ar_EG.tsx.js
--- a/components/time-picker/locale/bg_BG.tsx.js
+++ b/components/time-picker/locale/bg_BG.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Избор на час',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/es_ES.tsx.js
+++ b/components/time-picker/locale/es_ES.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Seleccionar hora',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/cs_CZ.tsx.js
+++ b/components/time-picker/locale/cs_CZ.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Vybrat čas',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/de_DE.tsx.js
+++ b/components/time-picker/locale/de_DE.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Zeit auswählen',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/el_GR.tsx.js
+++ b/components/time-picker/locale/el_GR.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Επιλέξτε ώρα',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/en_GB.tsx.js
+++ b/components/time-picker/locale/en_GB.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Select time',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/en_US.tsx.js
+++ b/components/time-picker/locale/en_US.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Select time',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/ca_ES.tsx.js
+++ b/components/time-picker/locale/ca_ES.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Seleccionar hora',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/et_EE.tsx.js
+++ b/components/time-picker/locale/et_EE.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Vali aeg',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/fa_IR.tsx.js
+++ b/components/time-picker/locale/fa_IR.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'انتخاب زمان',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/fi_FI.tsx.js
+++ b/components/time-picker/locale/fi_FI.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Valitse aika',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/fr_BE.tsx.js
+++ b/components/time-picker/locale/fr_BE.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Sélectionner l\'heure',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/fr_FR.tsx.js
+++ b/components/time-picker/locale/fr_FR.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Sélectionner l\'heure',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/is_IS.tsx.js
+++ b/components/time-picker/locale/is_IS.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Velja tíma',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/it_IT.tsx.js
+++ b/components/time-picker/locale/it_IT.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Selezionare il tempo',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/ja_JP.tsx.js
+++ b/components/time-picker/locale/ja_JP.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: '時刻を選択',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/ko_KR.tsx.js
+++ b/components/time-picker/locale/ko_KR.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: '날짜 선택',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/ku_IQ.tsx.js
+++ b/components/time-picker/locale/ku_IQ.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Demê hilbijêre',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/nb_NO.tsx.js
+++ b/components/time-picker/locale/nb_NO.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Velg tid',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/nl_BE.tsx.js
+++ b/components/time-picker/locale/nl_BE.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Selecteer tijd',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/nl_NL.tsx.js
+++ b/components/time-picker/locale/nl_NL.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Selecteer tijd',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/pl_PL.tsx.js
+++ b/components/time-picker/locale/pl_PL.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Wybierz godzinę',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/pt_BR.tsx.js
+++ b/components/time-picker/locale/pt_BR.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Hora',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/pt_PT.tsx.js
+++ b/components/time-picker/locale/pt_PT.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Hora',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/ru_RU.tsx.js
+++ b/components/time-picker/locale/ru_RU.tsx.js
@ -3,6 +3,6 @@
 */
 const locale = {
  placeholder: 'Выберите время',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/sk_SK.tsx.js
+++ b/components/time-picker/locale/sk_SK.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Vybrať čas',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/sr_RS.tsx.js
+++ b/components/time-picker/locale/sr_RS.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Izaberite vreme',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/sv_SE.tsx.js
+++ b/components/time-picker/locale/sv_SE.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Välj tid',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/th_TH.tsx.js
+++ b/components/time-picker/locale/th_TH.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'เลือกเวลา',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/tr_TR.tsx.js
+++ b/components/time-picker/locale/tr_TR.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Zaman Seç',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/uk_UA.tsx.js
+++ b/components/time-picker/locale/uk_UA.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Оберіть час',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/vi_VN.tsx.js
+++ b/components/time-picker/locale/vi_VN.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: 'Chọn thời gian',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/zh_CN.tsx.js
+++ b/components/time-picker/locale/zh_CN.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: '请选择时间',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/locale/zh_TW.tsx.js
+++ b/components/time-picker/locale/zh_TW.tsx.js
@ -1,5 +1,5 @@
 const locale = {
  placeholder: '請選擇時間',
-};
+}

-export default locale;
+export default locale
--- a/components/time-picker/style/index.js
+++ b/components/time-picker/style/index.js
@ -0,0 +1,5 @@
+import '../../style/index.less'
+import './index.less'
+
+// style dependencies
+import '../../input/style'
--- a/components/time-picker/style/index.tsx
+++ b/components/time-picker/style/index.tsx
@ -1,5 +0,0 @@
-import '../../style/index.less';
-import './index.less';
-
-// style dependencies
-import '../../input/style';
--- 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>
+</script>
--- 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>
+</script>
--- 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
--- 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
--- 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>
+</script>
--- a/components/vc-time-picker/demo/all.vue
+++ 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>
--- 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 [
--- 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",
--- 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"
+    }
+}