From f67390ed312e5c38e2ed048aed0e143d94637aab Mon Sep 17 00:00:00 2001
From: zazzaz <izazzaz@hotmail.com>
Date: Wed, 16 Dec 2020 22:09:48 +0800
Subject: [PATCH] fix: update time select & doc (#1014)

---
 .../time-select/__tests__/time-select.spec.ts | 69 +++++++++++++++
 packages/time-select/src/time-select.vue      | 83 ++++++++-----------
 website/docs/en-US/time-picker.md             |  2 +-
 website/docs/en-US/time-select.md             | 35 +++-----
 website/docs/es/time-picker.md                |  2 +-
 website/docs/es/time-select.md                | 34 +++-----
 website/docs/fr-FR/time-picker.md             |  2 +-
 website/docs/fr-FR/time-select.md             | 35 +++-----
 website/docs/jp/time-picker.md                |  2 +-
 website/docs/jp/time-select.md                | 34 +++-----
 website/docs/zh-CN/time-picker.md             |  2 +-
 website/docs/zh-CN/time-select.md             | 34 +++-----
 12 files changed, 167 insertions(+), 167 deletions(-)
 create mode 100644 packages/time-select/__tests__/time-select.spec.ts

diff --git a/packages/time-select/__tests__/time-select.spec.ts b/packages/time-select/__tests__/time-select.spec.ts
new file mode 100644
index 0000000000..1340e8402d
--- /dev/null
+++ b/packages/time-select/__tests__/time-select.spec.ts
@@ -0,0 +1,69 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import TimeSelect from '../src/time-select.vue'
+
+const _mount = (template: string, data, otherObj?) => mount({
+  components: {
+    'el-time-select': TimeSelect,
+  },
+  template,
+  data,
+  ...otherObj,
+},{
+  attachTo: 'body',
+})
+
+afterEach(() => {
+  document.documentElement.innerHTML = ''
+})
+
+describe('TimeSelect', () => {
+  it('create', async () => {
+    const wrapper = _mount(`<el-time-select
+    :style="{color:'red'}"
+    class="customClass"
+  />`, () => ({
+      readonly: true }))
+    const outterInput = wrapper.find('.el-select')
+    expect(outterInput.classes()).toContain('customClass')
+    expect(outterInput.attributes().style).toBeDefined()
+  })
+
+  it('set default value', async () => {
+    const wrapper = _mount(`<el-time-select
+    v-model="value"
+  />`, () => ({ value: '14:30' }))
+    const input = wrapper.find('input')
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+    expect(document.querySelector('.selected')).toBeDefined()
+    expect(document.querySelector('.selected').textContent).toBe('14:30')
+  })
+
+  it('set minTime', async () => {
+    const wrapper = _mount(`<el-time-select
+    minTime='14:30'
+    />`, () => ({}))
+    const input = wrapper.find('input')
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+    const elms = document.querySelectorAll('.is-disabled')
+    const elm = elms[elms.length - 1]
+    expect(elm.textContent).toBe('14:30')
+  })
+
+  it('set maxTime', async () => {
+    const wrapper = _mount(`<el-time-select
+    maxTime='14:30'
+    />`, () => ({}))
+    const input = wrapper.find('input')
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+    const elm = document.querySelector('.is-disabled')
+    expect(elm.textContent).toBe('14:30')
+  })
+})
+
diff --git a/packages/time-select/src/time-select.vue b/packages/time-select/src/time-select.vue
index 996fa2a1f5..79c996426f 100644
--- a/packages/time-select/src/time-select.vue
+++ b/packages/time-select/src/time-select.vue
@@ -33,11 +33,12 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue'
 import ElSelect from '@element-plus/select'
+import ElOption from '@element-plus/option'
 interface Time {
   hours: number
   minutes: number
 }
-const parseTime = function (time: string): null | Time {
+const parseTime = (time: string): null | Time => {
   const values = (time || '').split(':')
   if (values.length >= 2) {
     const hours = parseInt(values[0], 10)
@@ -49,7 +50,7 @@ const parseTime = function (time: string): null | Time {
   }
   return null
 }
-const compareTime = function (time1: string, time2: string): number {
+const compareTime = (time1: string, time2: string): number => {
   const value1 = parseTime(time1)
   const value2 = parseTime(time2)
   const minutes1 = value1.minutes + value1.hours * 60
@@ -59,14 +60,14 @@ const compareTime = function (time1: string, time2: string): number {
   }
   return minutes1 > minutes2 ? 1 : -1
 }
-const formatTime = function (time: Time): string {
+const formatTime = (time: Time): string => {
   return (
     (time.hours < 10 ? '0' + time.hours : time.hours) +
     ':' +
     (time.minutes < 10 ? '0' + time.minutes : time.minutes)
   )
 }
-const nextTime = function (time: string, step: string): string {
+const nextTime = (time: string, step: string): string => {
   const timeValue = parseTime(time)
   const stepValue = parseTime(step)
   const next = {
@@ -83,7 +84,7 @@ const nextTime = function (time: string, step: string): string {
 export default defineComponent({
   name: 'ElTimeSelect',
 
-  components: { ElSelect },
+  components: { ElSelect, ElOption },
   model: {
     prop: 'value',
     event: 'change',
@@ -101,19 +102,31 @@ export default defineComponent({
     size: {
       type: String,
       default: '',
-      validator: function (value) {
-        return !value || ['medium', 'small', 'mini'].indexOf(value) !== -1
-      },
+      validator: (value: string) => !value || ['medium', 'small', 'mini'].indexOf(value) !== -1,
     },
     placeholder: {
       type: String,
       default: '',
     },
-    pickerOptions: {
-      type: Object,
-      default: () => {
-        return {}
-      },
+    start: {
+      type: String,
+      default: '09:00',
+    },
+    end: {
+      type: String,
+      default: '18:00',
+    },
+    step: {
+      type: String,
+      default: '00:30',
+    },
+    minTime: {
+      type: String,
+      default: '',
+    },
+    maxTime: {
+      type: String,
+      default: '',
     },
     name: {
       type: String,
@@ -131,57 +144,27 @@ export default defineComponent({
   emits: ['change', 'blur', 'focus', 'update:modelValue'],
   setup(props) {
     // data
-    const start = ref('09:00')
-    const end = ref('18:00')
-    const step = ref('00:30')
     const value = ref(props.modelValue)
-    const minTime = ref('00:00')
-    const maxTime = ref('')
-    let data = {
-      start,
-      end,
-      step,
-      value,
-      minTime,
-      maxTime,
-    }
     // computed
     const items = computed(() => {
       const result = []
-      if (start.value && end.value && step.value) {
-        let current = start.value
-        while (compareTime(current, end.value) <= 0) {
+      if (props.start && props.end && props.step) {
+        let current = props.start
+        while (compareTime(current, props.end) <= 0) {
           result.push({
             value: current,
             disabled:
-              compareTime(current, minTime.value || '-1:-1') <= 0 ||
-              compareTime(current, maxTime.value || '100:100') >= 0,
+              compareTime(current, props.minTime || '-1:-1') <= 0 ||
+              compareTime(current, props.maxTime || '100:100') >= 0,
           })
-          current = nextTime(current, step.value)
+          current = nextTime(current, props.step)
         }
       }
       return result
     })
-    // methods
-    const updateOptions = () => {
-      const options = props.pickerOptions
-      for (const option in options) {
-        if (options.hasOwnProperty(option)) {
-          data[option].value = options[option]
-        }
-      }
-    }
-    // watch
-    watch(
-      () => props.pickerOptions,
-      () => {
-        updateOptions()
-      },
-    )
     return {
-      ...data,
+      value,
       items,
-      updateOptions,
     }
   },
 })
diff --git a/website/docs/en-US/time-picker.md b/website/docs/en-US/time-picker.md
index 28dd9c0cbe..74adc1500b 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  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
+| 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 |
diff --git a/website/docs/en-US/time-select.md b/website/docs/en-US/time-select.md
index 463225edf2..bf8c22c195 100644
--- a/website/docs/en-US/time-select.md
+++ b/website/docs/en-US/time-select.md
@@ -10,11 +10,9 @@ Provide a list of fixed time for users to choose.
 ```html
 <el-time-select
   v-model="value"
-  :picker-options="{
-    start: '08:30',
-    step: '00:15',
-    end: '18:30'
-  }"
+  start='08:30'
+  step='00:15'
+  end='18:30'
   placeholder="Select time">
 </el-time-select>
 
@@ -40,21 +38,18 @@ If start time is picked at first, then the end time will change accordingly.
   <el-time-select
     placeholder="Start time"
     v-model="startTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30'
-    }">
+    start='08:30'
+    step='00:15'
+    end='18:30'
+  >
   </el-time-select>
   <el-time-select
     placeholder="End time"
     v-model="endTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: startTime
-    }">
+    start='08:30'
+    step='00:15'
+    end='18:30'
+    :minTime="startTime">
   </el-time-select>
 </template>
 
@@ -74,25 +69,21 @@ If start time is picked at first, then the end time will change accordingly.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
+| value / v-model | binding value | string | - | - |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | whether to show clear button | boolean | — | true |
 | size | size of Input | string | medium / small / mini | — |
 | placeholder | placeholder in non-range mode | string | — | — |
-| picker-options | additional options, check the table below | object | — | {} |
 | 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 |
-
-### Time Select Options
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
 | start | start time | string | — | 09:00 |
 | end | end time | string | — | 18:00 |
 | step | time step | string | — | 00:30 |
 | minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
 | maxTime | maximum time, any time after this time will be disabled | string | — | — |
 
+
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
diff --git a/website/docs/es/time-picker.md b/website/docs/es/time-picker.md
index a48212d6ce..3611bf3ef1 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          |
 | ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
-| value / v-model    | valor enlazado                           | date(TimePicker) / string(TimeSelect)    | -                                        | -                    |
+| 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                 |
diff --git a/website/docs/es/time-select.md b/website/docs/es/time-select.md
index 3c1e9df613..855ff2e04c 100644
--- a/website/docs/es/time-select.md
+++ b/website/docs/es/time-select.md
@@ -10,11 +10,9 @@ Provee una lista de tiempo fijo para que los usuarios escojan.
 ```html
 <el-time-select
   v-model="value"
-  :picker-options="{
-    start: '08:30',
-    step: '00:15',
-    end: '18:30'
-  }"
+  start='08:30'
+  step='00:15'
+  end='18:30'
   placeholder="Select time">
 </el-time-select>
 
@@ -40,21 +38,17 @@ Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambia
   <el-time-select
     placeholder="Start time"
     v-model="startTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30'
-    }">
+    start='08:30'
+  step='00:15'
+  end='18:30'>
   </el-time-select>
   <el-time-select
     placeholder="End time"
     v-model="endTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: startTime
-    }">
+    start='08:30'
+    step='00:15'
+    end='18:30'
+    :minTime="startTime">
   </el-time-select>
 </template>
 
@@ -74,26 +68,20 @@ Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambia
 ### Atributos
 | Atributo          | Descripción                              | Tipo                                     | Valores aceptados                        | Por defecto          |
 | ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
-| value / v-model    | valor enlazado                           | date(TimePicker) / string(TimeSelect)    | -                                        | -                    |
+| value / v-model    | valor enlazado                           | string    | -                                        | -                    |
 | editable          | si el input puede ser editado            | boolean                                  | —                                        | true                 |
 | clearable         | si mostrar el botón de borrado           | boolean                                  | —                                        | true                 |
 | size              | tamaño del input                         | string                                   | medium / small / mini                    | —                    |
 | placeholder       | placeholder en un modo fuera de rango    | string                                   | —                                        | —                    |
-| picker-options    | opciones adicionales, revisar la tabla posterior | object                                   | —                                        | {}                   |
 | 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 |
-
-### Opciones para Time Select
-| Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
-| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
 | start    | tiempo de inicio                         | string | —                 | 09:00       |
 | end      | tiempo de finalización                   | string | —                 | 18:00       |
 | step     | salto de tiempo                          | string | —                 | 00:30       |
 | minTime  | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | —                 | 00:00       |
 | maxTime  | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | —                 | —           |
 
-
 ### Eventos
 | Nombre de Evento | Descripción                              | Parámetros                     |
 | ---------------- | ---------------------------------------- | ------------------------------ |
diff --git a/website/docs/fr-FR/time-picker.md b/website/docs/fr-FR/time-picker.md
index 04fdf144d8..9b65315c96 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  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | La valeur liée. | date(TimePicker) / string(TimeSelect) | - | - |
+| 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 |
diff --git a/website/docs/fr-FR/time-select.md b/website/docs/fr-FR/time-select.md
index f013584d1d..7c09d1eafb 100644
--- a/website/docs/fr-FR/time-select.md
+++ b/website/docs/fr-FR/time-select.md
@@ -10,11 +10,9 @@ Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisi
 ```html
 <el-time-select
   v-model="value"
-  :picker-options="{
-    start: '08:30',
-    step: '00:15',
-    end: '18:30'
-  }"
+  start='08:30'
+  step='00:15'
+  end='18:30'
   placeholder="Choisissez un horaire">
 </el-time-select>
 
@@ -40,21 +38,17 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
   <el-time-select
     placeholder="Horaire de début"
     v-model="startTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30'
-    }">
+    start='08:30'
+  step='00:15'
+  end='18:30'>
   </el-time-select>
   <el-time-select
     placeholder="Horaire de fin"
     v-model="endTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: startTime
-    }">
+    start='08:30'
+    step='00:15'
+    end='18:30'
+    :minTime="startTime">
   </el-time-select>
 </template>
 
@@ -75,26 +69,21 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | La valeur liée. | date(TimePicker) / string(TimeSelect) | - | - |
+| value / v-model | La valeur liée. | string | - | - |
 | editable | Si le champ d'input est éditable. | boolean | — | true |
 | clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |
 | size | Taille du champ. | string | medium / small / mini | — |
 | placeholder | Placeholder en mode non-intervalle. | string | — | — |
-| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
 | 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 |
-
-### Options de TimeSelect
-
-| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
 | start | Horaire de début. | string | — | 09:00 |
 | end | Horaire de fin. | string | — | 18:00 |
 | step | Intervalle entre les horaires. | string | — | 00:30 |
 | minTime | Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé. | string | — | 00:00 |
 | maxTime | Horaire maximum, n'importe quel horaire après celui-ci sera désactivé. | string | — | — |
 
+
 ### Évènements
 
 | Nom | Description | Paramètres |
diff --git a/website/docs/jp/time-picker.md b/website/docs/jp/time-picker.md
index 12e0fb0fc7..e402522757 100644
--- a/website/docs/jp/time-picker.md
+++ b/website/docs/jp/time-picker.md
@@ -175,7 +175,7 @@
 ### 属性
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | バインディング値 | date(TimePicker) / string(TimeSelect) | - | - |
+| value / v-model | バインディング値 | date | - | - |
 | readonly | タイムピッカーが読み取り専用かどうか | boolean | — | false |
 | disabled | タイムピッカーが無効になっているかどうか | boolean | — | false |
 | editable | 入力が編集可能かどうか | boolean | — | true |
diff --git a/website/docs/jp/time-select.md b/website/docs/jp/time-select.md
index 463225edf2..c10e051b6b 100644
--- a/website/docs/jp/time-select.md
+++ b/website/docs/jp/time-select.md
@@ -10,11 +10,9 @@ Provide a list of fixed time for users to choose.
 ```html
 <el-time-select
   v-model="value"
-  :picker-options="{
-    start: '08:30',
-    step: '00:15',
-    end: '18:30'
-  }"
+  start='08:30'
+  step='00:15'
+  end='18:30'
   placeholder="Select time">
 </el-time-select>
 
@@ -40,21 +38,17 @@ If start time is picked at first, then the end time will change accordingly.
   <el-time-select
     placeholder="Start time"
     v-model="startTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30'
-    }">
+    start='08:30'
+  step='00:15'
+  end='18:30'>
   </el-time-select>
   <el-time-select
     placeholder="End time"
     v-model="endTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: startTime
-    }">
+    start='08:30'
+    step='00:15'
+    end='18:30'
+    :minTime="startTime">
   </el-time-select>
 </template>
 
@@ -74,25 +68,21 @@ If start time is picked at first, then the end time will change accordingly.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
+| value / v-model | binding value | string | - | - |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | whether to show clear button | boolean | — | true |
 | size | size of Input | string | medium / small / mini | — |
 | placeholder | placeholder in non-range mode | string | — | — |
-| picker-options | additional options, check the table below | object | — | {} |
 | 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 |
-
-### Time Select Options
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
 | start | start time | string | — | 09:00 |
 | end | end time | string | — | 18:00 |
 | step | time step | string | — | 00:30 |
 | minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
 | maxTime | maximum time, any time after this time will be disabled | string | — | — |
 
+
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
diff --git a/website/docs/zh-CN/time-picker.md b/website/docs/zh-CN/time-picker.md
index d83fc2a300..f6f017dcf3 100644
--- a/website/docs/zh-CN/time-picker.md
+++ b/website/docs/zh-CN/time-picker.md
@@ -107,7 +107,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
+| value / v-model | 绑定值 | date | — | — |
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |
diff --git a/website/docs/zh-CN/time-select.md b/website/docs/zh-CN/time-select.md
index b14396640b..1941adada4 100644
--- a/website/docs/zh-CN/time-select.md
+++ b/website/docs/zh-CN/time-select.md
@@ -10,11 +10,9 @@
 ```html
 <el-time-select
   v-model="value"
-  :picker-options="{
-    start: '08:30',
-    step: '00:15',
-    end: '18:30'
-  }"
+  start='08:30'
+  step='00:15'
+  end='18:30'
   placeholder="选择时间">
 </el-time-select>
 
@@ -40,21 +38,17 @@
   <el-time-select
     placeholder="起始时间"
     v-model="startTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30'
-    }">
+    start='08:30'
+  step='00:15'
+  end='18:30'>
   </el-time-select>
   <el-time-select
     placeholder="结束时间"
     v-model="endTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: startTime
-    }">
+    start='08:30'
+    step='00:15'
+    end='18:30'
+    :minTime="startTime">
   </el-time-select>
 </template>
 
@@ -74,25 +68,21 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
+| value / v-model | 绑定值 | string | — | — |
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
 | size          | 输入框尺寸     | string          | medium / small / mini  | — |
 | placeholder | 非范围选择时的占位内容 | string | — | — |
-| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
 | name | 原生属性 | string | — | — |
 | prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
 | clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
-
-### Time Select Options
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
 | start | 开始时间 | string | — | 09:00 |
 | end | 结束时间 | string | — | 18:00 |
 | step | 间隔时间 | string | — | 00:30 |
 | minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |
 | maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — |
 
+
 ### Events
 | 事件名 | 说明 | 参数 |
 |---------|--------|---------|