diff --git a/packages/time-picker/__tests__/time-picker.spec.ts b/packages/time-picker/__tests__/time-picker.spec.ts
index 8c5b6c9136..98d9992b56 100644
--- a/packages/time-picker/__tests__/time-picker.spec.ts
+++ b/packages/time-picker/__tests__/time-picker.spec.ts
@@ -307,6 +307,22 @@ describe('TimePicker', () => {
     const attr = popperEl.getAttribute('aria-hidden')
     expect(attr).toEqual('false')
   })
+
+  it('ref blur', async () => {
+    _mount(`<el-time-picker
+        v-model="value"
+        ref="input"
+      />`, () => ({ value: new Date(2016, 9, 10, 18, 40) }), {
+      mounted() {
+        this.$refs.input.focus()
+        this.$refs.input.blur()
+      },
+    })
+    await nextTick()
+    const popperEl = document.querySelector('.el-picker__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('true')
+  })
 })
 
 describe('TimePicker(range)', () => {
diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue
index 815231ad97..6857d58a64 100644
--- a/packages/time-picker/src/common/picker.vue
+++ b/packages/time-picker/src/common/picker.vue
@@ -147,7 +147,7 @@ interface PickerOptions {
   handleKeydown: any
   parseUserInput: any
   formatToString: any
-  getRangeAvaliableTime: any
+  getRangeAvailableTime: any
   getDefaultValue: any
   panelReady: boolean
   handleClear: any
@@ -273,11 +273,16 @@ export default defineComponent({
       emitInput(result)
     }
     const handleFocus = e => {
-      if (props.readonly || pickerDisabled.value) return
+      if (props.readonly || pickerDisabled.value || pickerVisible.value) return
       pickerVisible.value = true
       ctx.emit('focus', e)
     }
 
+    const handleBlur = () => {
+      pickerVisible.value = false
+      blurInput()
+    }
+
     const pickerDisabled = computed(() => {
       return props.disabled || elForm.disabled
     })
@@ -296,8 +301,8 @@ export default defineComponent({
         }
       }
 
-      if (pickerOptions.value.getRangeAvaliableTime) {
-        result = pickerOptions.value.getRangeAvaliableTime(result)
+      if (pickerOptions.value.getRangeAvailableTime) {
+        result = pickerOptions.value.getRangeAvailableTime(result)
       }
       if (Array.isArray(result) && result.some(_ => !_)) {
         result = []
@@ -540,6 +545,7 @@ export default defineComponent({
       triggerClass,
       onPick,
       handleFocus,
+      handleBlur,
       pickerVisible,
       pickerActualVisible,
       displayValue,
diff --git a/packages/time-picker/src/time-picker-com/panel-time-pick.vue b/packages/time-picker/src/time-picker-com/panel-time-pick.vue
index eb4e795bb2..9aac4e803f 100644
--- a/packages/time-picker/src/time-picker-com/panel-time-pick.vue
+++ b/packages/time-picker/src/time-picker-com/panel-time-pick.vue
@@ -49,7 +49,7 @@ import { EVENT_CODE } from '@element-plus/utils/aria'
 import { t } from '@element-plus/locale'
 import TimeSpinner from './basic-time-spinner.vue'
 import dayjs, { Dayjs } from 'dayjs'
-import { getAvaliableArrs, useOldValue } from './useTimePicker'
+import { getAvailableArrs, useOldValue } from './useTimePicker'
 
 export default defineComponent({
   components: {
@@ -95,7 +95,7 @@ export default defineComponent({
     // method
     const isValidValue = _date => {
       const parsedDate = dayjs(_date)
-      const result = getRangeAvaliableTime(parsedDate)
+      const result = getRangeAvailableTime(parsedDate)
       return parsedDate.isSame(result)
     }
     const handleCancel = () => {
@@ -108,7 +108,7 @@ export default defineComponent({
     const handleChange = (_date: Dayjs) => {
       // visible avoids edge cases, when use scrolls during panel closing animation
       if (!props.visible) { return }
-      const result = getRangeAvaliableTime(_date).millisecond(0)
+      const result = getRangeAvailableTime(_date).millisecond(0)
       ctx.emit('pick', result, true)
     }
 
@@ -122,7 +122,7 @@ export default defineComponent({
       const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : [])
       const index = list.indexOf(selectionRange.value[0])
       const next = (index + step + list.length) % list.length
-      timePickeOptions['start_emitSelectRange'](mapping[next])
+      timePickerOptions['start_emitSelectRange'](mapping[next])
     }
 
     const handleKeydown = event => {
@@ -137,32 +137,32 @@ export default defineComponent({
 
       if (code === EVENT_CODE.up || code === EVENT_CODE.down) {
         const step = (code === EVENT_CODE.up) ? -1 : 1
-        timePickeOptions['start_scrollDown'](step)
+        timePickerOptions['start_scrollDown'](step)
         event.preventDefault()
         return
       }
     }
 
-    const getRangeAvaliableTime = (date: Dayjs) => {
-      const avaliableMap = {
-        hour: getAvaliableHours,
-        minute: getAvaliableMinutes,
-        second: getAvaliableSeconds,
+    const getRangeAvailableTime = (date: Dayjs) => {
+      const availableMap = {
+        hour: getAvailableHours,
+        minute: getAvailableMinutes,
+        second: getAvailableSeconds,
       }
       let result = date;
       ['hour', 'minute', 'second'].forEach(_ => {
-        if (avaliableMap[_]) {
-          let avaliableArr
-          const method = avaliableMap[_]
+        if (availableMap[_]) {
+          let availableArr
+          const method = availableMap[_]
           if (_ === 'minute') {
-            avaliableArr = method(result.hour(), props.datetimeRole)
+            availableArr = method(result.hour(), props.datetimeRole)
           } else if (_ === 'second') {
-            avaliableArr = method(result.hour(), result.minute(), props.datetimeRole)
+            availableArr = method(result.hour(), result.minute(), props.datetimeRole)
           } else {
-            avaliableArr = method(props.datetimeRole)
+            availableArr = method(props.datetimeRole)
           }
-          if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) {
-            result = result[_](avaliableArr[0])
+          if (availableArr && availableArr.length && !availableArr.includes(result[_]())) {
+            result = result[_](availableArr[0])
           }
         }
       })
@@ -187,19 +187,19 @@ export default defineComponent({
     ctx.emit('set-picker-option', ['formatToString', formatToString])
     ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])
     ctx.emit('set-picker-option',['handleKeydown', handleKeydown])
-    ctx.emit('set-picker-option',['getRangeAvaliableTime', getRangeAvaliableTime])
+    ctx.emit('set-picker-option',['getRangeAvailableTime', getRangeAvailableTime])
     ctx.emit('set-picker-option',['getDefaultValue', getDefaultValue])
-    const timePickeOptions = {} as any
+    const timePickerOptions = {} as any
     const onSetOption = e => {
-      timePickeOptions[e[0]] = e[1]
+      timePickerOptions[e[0]] = e[1]
     }
     const pickerBase = inject('EP_PICKER_BASE') as any
     const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props
     const {
-      getAvaliableHours,
-      getAvaliableMinutes,
-      getAvaliableSeconds,
-    } = getAvaliableArrs(disabledHours, disabledMinutes, disabledSeconds)
+      getAvailableHours,
+      getAvailableMinutes,
+      getAvailableSeconds,
+    } = getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds)
 
     return {
       transitionName,
diff --git a/packages/time-picker/src/time-picker-com/panel-time-range.vue b/packages/time-picker/src/time-picker-com/panel-time-range.vue
index fb2bac7016..969e435574 100644
--- a/packages/time-picker/src/time-picker-com/panel-time-range.vue
+++ b/packages/time-picker/src/time-picker-com/panel-time-range.vue
@@ -79,7 +79,7 @@ import union from 'lodash/union'
 import { t } from '@element-plus/locale'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import TimeSpinner from './basic-time-spinner.vue'
-import { getAvaliableArrs, useOldValue } from './useTimePicker'
+import { getAvailableArrs, useOldValue } from './useTimePicker'
 
 const makeSelectRange = (start, end) => {
   const result = []
@@ -138,12 +138,12 @@ export default defineComponent({
 
     const isValidValue = _date => {
       const parsedDate = _date.map(_=> dayjs(_))
-      const result = getRangeAvaliableTime(parsedDate)
+      const result = getRangeAvailableTime(parsedDate)
       return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])
     }
 
     const handleChange = (_minDate, _maxDate) => {
-      // todo getRangeAvaliableTime(_date).millisecond(0)
+      // todo getRangeAvailableTime(_date).millisecond(0)
       ctx.emit('pick', [_minDate, _maxDate], true)
     }
     const btnConfirmDisabled = computed(() => {
@@ -169,9 +169,9 @@ export default defineComponent({
       const next = (index + step + list.length) % list.length
       const half = list.length / 2
       if (next < half) {
-        timePickeOptions['start_emitSelectRange'](mapping[next])
+        timePickerOptions['start_emitSelectRange'](mapping[next])
       } else {
-        timePickeOptions['end_emitSelectRange'](mapping[next - half])
+        timePickerOptions['end_emitSelectRange'](mapping[next - half])
       }
     }
 
@@ -188,7 +188,7 @@ export default defineComponent({
       if (code === EVENT_CODE.up || code === EVENT_CODE.down) {
         const step = (code === EVENT_CODE.up) ? -1 : 1
         const role = selectionRange.value[0] < offset.value ? 'start' : 'end'
-        timePickeOptions[`${role}_scrollDown`](step)
+        timePickerOptions[`${role}_scrollDown`](step)
         event.preventDefault()
         return
       }
@@ -228,39 +228,39 @@ export default defineComponent({
       return union(defaultDisable, nextDisable)
     }
 
-    const getRangeAvaliableTime = (dates: Array<Dayjs>) => {
-      return dates.map((_, index) => getRangeAvaliableTimeEach(dates[0], dates[1], index === 0 ? 'start' : 'end'))
+    const getRangeAvailableTime = (dates: Array<Dayjs>) => {
+      return dates.map((_, index) => getRangeAvailableTimeEach(dates[0], dates[1], index === 0 ? 'start' : 'end'))
     }
 
     const {
-      getAvaliableHours,
-      getAvaliableMinutes,
-      getAvaliableSeconds,
-    } = getAvaliableArrs(disabledHours_, disabledMinutes_, disabledSeconds_)
+      getAvailableHours,
+      getAvailableMinutes,
+      getAvailableSeconds,
+    } = getAvailableArrs(disabledHours_, disabledMinutes_, disabledSeconds_)
 
-    const getRangeAvaliableTimeEach = (startDate: Dayjs, endDate: Dayjs, role) => {
-      const avaliableMap = {
-        hour: getAvaliableHours,
-        minute: getAvaliableMinutes,
-        second: getAvaliableSeconds,
+    const getRangeAvailableTimeEach = (startDate: Dayjs, endDate: Dayjs, role) => {
+      const availableMap = {
+        hour: getAvailableHours,
+        minute: getAvailableMinutes,
+        second: getAvailableSeconds,
       }
       const isStart = role === 'start'
       let result = isStart ? startDate : endDate
       const compareDate = isStart ? endDate : startDate;
       ['hour', 'minute', 'second'].forEach(_ => {
-        if (avaliableMap[_]) {
-          let avaliableArr
-          const method = avaliableMap[_]
+        if (availableMap[_]) {
+          let availableArr
+          const method = availableMap[_]
           if (_ === 'minute') {
-            avaliableArr = method(result.hour(), role, compareDate)
+            availableArr = method(result.hour(), role, compareDate)
           } else if (_ === 'second') {
-            avaliableArr = method(result.hour(), result.minute(), role, compareDate)
+            availableArr = method(result.hour(), result.minute(), role, compareDate)
           } else {
-            avaliableArr = method(role, compareDate)
+            availableArr = method(role, compareDate)
           }
-          if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) {
-            const pos = isStart ? 0 : avaliableArr.length - 1
-            result = result[_](avaliableArr[pos])
+          if (availableArr && availableArr.length && !availableArr.includes(result[_]())) {
+            const pos = isStart ? 0 : availableArr.length - 1
+            result = result[_](availableArr[pos])
           }
         }
       })
@@ -298,11 +298,11 @@ export default defineComponent({
     ctx.emit('set-picker-option',['isValidValue', isValidValue])
     ctx.emit('set-picker-option',['handleKeydown', handleKeydown])
     ctx.emit('set-picker-option',['getDefaultValue', getDefaultValue])
-    ctx.emit('set-picker-option',['getRangeAvaliableTime', getRangeAvaliableTime])
+    ctx.emit('set-picker-option',['getRangeAvailableTime', getRangeAvailableTime])
 
-    const timePickeOptions = {} as any
+    const timePickerOptions = {} as any
     const onSetOption = e => {
-      timePickeOptions[e[0]] = e[1]
+      timePickerOptions[e[0]] = e[1]
     }
 
     const pickerBase = inject('EP_PICKER_BASE') as any
diff --git a/packages/time-picker/src/time-picker-com/useTimePicker.ts b/packages/time-picker/src/time-picker-com/useTimePicker.ts
index 4cd495b605..a142a80dab 100644
--- a/packages/time-picker/src/time-picker-com/useTimePicker.ts
+++ b/packages/time-picker/src/time-picker-com/useTimePicker.ts
@@ -10,7 +10,7 @@ const makeList = (total, method, methodFunc) => {
   return arr
 }
 
-const makeAvaliableArr = list => {
+const makeAvailableArr = list => {
   return list.map((_, index) => !_ ? index : _).filter(_ => _ !== true)
 }
 
@@ -35,7 +35,7 @@ export const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) =>
 }
 
 
-export const getAvaliableArrs = (disabledHours, disabledMinutes, disabledSeconds) => {
+export const getAvailableArrs = (disabledHours, disabledMinutes, disabledSeconds) => {
   const {
     getHoursList,
     getMinutesList,
@@ -46,22 +46,22 @@ export const getAvaliableArrs = (disabledHours, disabledMinutes, disabledSeconds
     disabledSeconds,
   )
 
-  const getAvaliableHours = (role, compare?) => {
-    return makeAvaliableArr(getHoursList(role, compare))
+  const getAvailableHours = (role, compare?) => {
+    return makeAvailableArr(getHoursList(role, compare))
   }
 
-  const getAvaliableMinutes = (hour, role, compare?) => {
-    return makeAvaliableArr(getMinutesList(hour, role, compare))
+  const getAvailableMinutes = (hour, role, compare?) => {
+    return makeAvailableArr(getMinutesList(hour, role, compare))
   }
 
-  const getAvaliableSeconds = (hour, minute, role, compare?) => {
-    return makeAvaliableArr(getSecondsList(hour, minute, role, compare))
+  const getAvailableSeconds = (hour, minute, role, compare?) => {
+    return makeAvailableArr(getSecondsList(hour, minute, role, compare))
   }
 
   return {
-    getAvaliableHours,
-    getAvaliableMinutes,
-    getAvaliableSeconds,
+    getAvailableHours,
+    getAvailableMinutes,
+    getAvailableSeconds,
   }
 }
 
diff --git a/packages/time-picker/src/time-picker.ts b/packages/time-picker/src/time-picker.ts
index e56d0e7abf..c7bef7cde6 100644
--- a/packages/time-picker/src/time-picker.ts
+++ b/packages/time-picker/src/time-picker.ts
@@ -28,6 +28,9 @@ export default defineComponent({
       focus: () => {
         commonPicker.value?.handleFocus()
       },
+      blur: () => {
+        commonPicker.value?.handleBlur()
+      },
     }
 
     provide('ElPopperOptions', props.popperOptions)
diff --git a/website/docs/en-US/time-picker.md b/website/docs/en-US/time-picker.md
index 0cfbdc4260..18c0b2e45c 100644
--- a/website/docs/en-US/time-picker.md
+++ b/website/docs/en-US/time-picker.md
@@ -106,7 +106,7 @@ Can pick an arbitrary time range.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| model-value / v-model | binding value | Date | - | - |
+| model-value / v-model | binding value | Date | — | — |
 | readonly | whether TimePicker is read only | boolean | — | false |
 | disabled | whether TimePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
@@ -119,15 +119,15 @@ Can pick an arbitrary time range.
 | arrow-control | whether to pick time using arrow buttons | boolean | — | false |
 | align | alignment | left / center / right | left |
 | popper-class | custom class name for TimePicker's dropdown | string | — | — |
-| range-separator | range separator | string | - | '-' |
+| range-separator | range separator | string | — | '-' |
 | format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | HH:mm:ss |
 | default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
 | name | same as `name` in native input | string | — | — |
 | prefix-icon | Custom prefix icon class | string | — | el-icon-time |
 | clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
-| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
-| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
-| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
+| disabledHours | To specify the array of hours that cannot be selected | function | — | — |
+| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
+| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
 
 ### Events
 | Event Name | Description | Parameters |
@@ -139,4 +139,5 @@ Can pick an arbitrary time range.
 ### Methods
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
-| focus | focus the Input component | - |
+| focus | focus the Input component | — |
+| blur | blur the Input component | — |
diff --git a/website/docs/es/time-picker.md b/website/docs/es/time-picker.md
index a5f3225a24..4894a79686 100644
--- a/website/docs/es/time-picker.md
+++ b/website/docs/es/time-picker.md
@@ -106,7 +106,7 @@ Es posible escoger un rango de tiempo arbitrario.
 ### Atributos
 | Atributo          | Descripción                              | Tipo                                     | Valores aceptados                        | Por defecto          |
 | ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
-| model-value / v-model    | valor enlazado                           | Date    | -                                        | -                    |
+| model-value / v-model    | valor enlazado                           | Date    | —                                        | —                    |
 | readonly          | si el Time Picker está en modo de sólo lectura | boolean                                  | —                                        | false                |
 | disabled          | si el Time Picker se encuentra deshabilitado | boolean                                  | —                                        | false                |
 | editable          | si el input puede ser editado            | boolean                                  | —                                        | true                 |
@@ -119,15 +119,15 @@ Es posible escoger un rango de tiempo arbitrario.
 | arrow-control     | si es posible escoger el tiempo usando los botones de flecha | boolean                                  | —                                        | false                |
 | align             | alineación                               | left / center / right                    | left                                     |                      |
 | popper-class      | nombre de clase personalizada para el dropdown del Time Picker | string                                   | —                                        | —                    |
-| range-separator   | separador de rango                       | string                                   | -                                        | '-'                  |
+| range-separator   | separador de rango                       | string                                   | —                                        | '-'                  |
 | format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | HH:mm:ss |
 | default-value     | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo,  Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | —                    |
 | name              | como `name` en input nativo              | string                                   | —                                        | —                    |
 | prefix-icon       | Clase personalizada para el icono de prefijado | string                                   | —                                        | el-icon-time         |
 | clear-icon        | Clase personalizada para el icono `clear` | string                                   | —                                        | el-icon-circle-close |
-| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
-| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
-| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
+| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
+| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
+| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
 
 
 ### Eventos
@@ -141,3 +141,4 @@ Es posible escoger un rango de tiempo arbitrario.
 | Metodo | Descripción                | Parameteros |
 | ------ | -------------------------- | ----------- |
 | focus  | coloca el foco en el input | —           |
+| blur | blur the Input component | — |
diff --git a/website/docs/fr-FR/time-picker.md b/website/docs/fr-FR/time-picker.md
index c71edf229f..efaafd86de 100644
--- a/website/docs/fr-FR/time-picker.md
+++ b/website/docs/fr-FR/time-picker.md
@@ -107,7 +107,7 @@ Vous pouvez également définir un intervalle libre.
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| model-value / v-model | La valeur liée. | Date | - | - |
+| model-value / v-model | La valeur liée. | Date | — | — |
 | readonly | Si TimePicker est en lecture seule. | boolean | — | false |
 | disabled | Si TimePicker est désactivé. | boolean | — | false |
 | editable | Si le champ d'input est éditable. | boolean | — | true |
@@ -120,15 +120,15 @@ Vous pouvez également définir un intervalle libre.
 | arrow-control | Si les flèches directionnelles peuvent être utilisées | boolean | — | false |
 | align | Alignement. | left / center / right | left |
 | popper-class | Classe du menu du TimePicker. | string | — | — |
-| range-separator | Séparateur d'intervalle. | string | - | '-' |
+| range-separator | Séparateur d'intervalle. | string | — | '-' |
 | format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | HH:mm:ss |
 | default-value | Optionnel, date d'aujourd'hui par défaut. | `Date` pour le TimePicker, `string` pour le TimeSelect | Toute valeur acceptée par `new Date()` pour le TimePicker, une valeur sélectionnable pour TimeSelect. | — |
 | name | Attribut `name` natif de l'input. | string | — | — |
 | prefix-icon | Classe de l'icône de préfixe. | string | — | el-icon-time |
 | clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |
-| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
-| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
-| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
+| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
+| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
+| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
 
 ### Évènements
 
@@ -142,4 +142,5 @@ Vous pouvez également définir un intervalle libre.
 
 | Méthode | Description | Paramètres |
 | ---- | ---- | ---- |
-| focus | Met le focus sur le composant. | - |
+| focus | Met le focus sur le composant. | — |
+| blur | blur the Input component | — |
diff --git a/website/docs/jp/time-picker.md b/website/docs/jp/time-picker.md
index 2a916d0f6d..a65173468f 100644
--- a/website/docs/jp/time-picker.md
+++ b/website/docs/jp/time-picker.md
@@ -106,7 +106,7 @@
 ### 属性
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| model-value / v-model | バインディング値 | date | - | - |
+| model-value / v-model | バインディング値 | date | — | — |
 | readonly | タイムピッカーが読み取り専用かどうか | boolean | — | false |
 | disabled | タイムピッカーが無効になっているかどうか | boolean | — | false |
 | editable | 入力が編集可能かどうか | boolean | — | true |
@@ -119,15 +119,15 @@
 | arrow-control | 矢印ボタンを使って時間を選択するかどうか| boolean | — | false |
 | align | 整列 | left / center / right | left |
 | popper-class | タイムピッカーのドロップダウンのカスタムクラス名 | string | — | — |
-| range-separator | 範囲セパレータ | string | - | '-' |
+| range-separator | 範囲セパレータ | string | — | '-' |
 | format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | HH:mm:ss |
 | default-value | オプション、カレンダーのデフォルトの日付 | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
 | name | ネイティブ入力の `name` と同じ | string | — | — |
 | prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-time |
 | clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
-| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
-| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
-| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
+| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
+| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
+| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
 
 
 ### イベント
@@ -140,4 +140,5 @@
 ### 方法
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
-| focus | インプットコンポーネントにフォーカス | - |
+| focus | インプットコンポーネントにフォーカス | — |
+| blur | blur the Input component | — |
diff --git a/website/docs/zh-CN/time-picker.md b/website/docs/zh-CN/time-picker.md
index e3ec1bb2e2..ace726b5f5 100644
--- a/website/docs/zh-CN/time-picker.md
+++ b/website/docs/zh-CN/time-picker.md
@@ -120,15 +120,15 @@
 | arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
 | align | 对齐方式 | string | left / center / right | left |
 | popper-class | TimePicker 下拉框的类名 | string | — | — |
-| range-separator | 选择范围时的分隔符 | string | - | '-' |
+| range-separator | 选择范围时的分隔符 | string | — | '-' |
 | format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | HH:mm:ss |
 | default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | — |
 | name | 原生属性 | string | — | — |
 | prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
 | clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
-| disabledHours | 禁止选择部分小时选项 | function | — | - |
-| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | — | - |
-| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | — | - |
+| disabled-hours | 禁止选择部分小时选项 | function | — | — |
+| disabled-minutes | 禁止选择部分分钟选项 | function(selectedHour) | — | — |
+| disabled-seconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | — | — |
 
 ### Events
 | 事件名 | 说明 | 参数 |
@@ -140,4 +140,5 @@
 ### Methods
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
-| focus | 使 input 获取焦点 | - |
+| focus | 使 input 获取焦点 | — |
+| blur | 使 input 失去焦点 | — |