014_ TimePicker time selector

1. TimePicker Time selector

1.1. Used to select or enter a date .

1.2. Time selector properties

Parameters	explain	type	Optional value	The default value is
value / v-model	Binding value	date(TimePicker) / string(TimeSelect)	nothing	nothing
readonly	Completely read only	boolean	nothing	false
disabled	Ban	boolean	nothing	false
editable	Text box to enter	boolean	nothing	true
clearable	Is the clear button displayed	boolean	nothing	true
size	Input box size	string	medium / small / mini	nothing
placeholder	Space occupying content in non range selection	string	nothing	nothing
start-placeholder	The space occupying content of the start date when selecting the range	string	nothing	nothing
end-placeholder	The space occupying content of the start date when selecting the range	string	nothing	nothing
is-range	Select for time range , Only on <el-time-picker> It works	boolean	nothing	false
arrow-control	Whether to use arrows for time selection , Only on <el-time-picker> It works	boolean	nothing	false
align	Alignment mode	string	left / center / right	left
popper-class	TimePicker The class name of the drop-down box	string	nothing	nothing
picker-options	Refer to the following table for the specific options of the current time and date selector	object	nothing	{}
range-separator	Separator when selecting a range	string	nothing	'-'
value-format	Optional , only TimePicker You can use , The format of the bound value . If not specified, the binding value is Date object	string	See date format	nothing
default-value	Optional , The default time displayed when the selector is on	Date(TimePicker) / string(TimeSelect)	Can be new Date() analysis (TimePicker) / Optional value (TimeSelect)	nothing
name	Native properties	string	nothing	nothing
prefix-icon	Custom header icon class name	string	nothing	el-icon-time
clear-icon	Customize the class name of the empty Icon	string	nothing	el-icon-circle-close

1.3. Time Select Options

Parameters	explain	type	Optional value	The default value is
start	Starting time	string	nothing	09:00
end	End time	string	nothing	18:00
step	Time interval between	string	nothing	00:30
minTime	Minimum time , Time periods less than this time will be disabled	string	nothing	00:00
maxTime	Maximum time , Time periods greater than this time will be disabled	string	nothing	nothing

1.4. Time Picker Options

Parameters	explain	type	Optional value	The default value is
selectableRange	Optional time period , for example : '18:30:00 - 20:30:00' Or pass in an array ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']	string / array	nothing	nothing
format	Time format (TimePicker)	string	Hours : HH, branch : mm, second ：ss, AM/PM	'HH:mm:ss'

1.5. Time selector Events

Event name	explain	Parameters
change	Triggered when the user confirms the selected value	Component binding value
blur	When input Trigger when out of focus	Component instance
focus	When input Trigger when you get focus	Component instance

1.6. Time selector method

Method name	explain
focus	send input Get focus

2. Time selector example

2.1. Use the scaffold to create a new one named element-ui-timepicker Front end projects , At the same time to install Element plug-in unit .

2.2. To write App.vue 

<template>
  <div id="app">
    <h1> Fixed time - Provide several fixed time points for users to choose </h1>
    <h4> Use el-time-select label ,  Pass respectively start、end and step Specify an optional start time 、 End time and step size .</h4>
    <el-time-select v-model="val1" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder=" Selection time "></el-time-select>

    <h1> Any time </h1>
    <h4> Use el-time-picker label ,  adopt selectableRange Limit the optional time range . Provides two ways of interaction :  By default, you can select through the mouse wheel ,  open arrow-control Attribute is selected by the arrow on the interface .</h4>
    <el-time-picker v-model="val21" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder=" Any time "></el-time-picker>
    <div style="display: inline-block; margin-left: 20px;"></div>
    <el-time-picker arrow-control v-model="val22" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder=" Any time "></el-time-picker>

    <h1> Fixed time range </h1>
    <h4> If you select the start time first ,  The status of the options will change during the end time .</h4>
    <el-time-select placeholder=" Starting time " v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"></el-time-select>
    <div style="display: inline-block; margin-left: 20px;"></div>
    <el-time-select placeholder=" End time " v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"></el-time-select>

    <h1> Any time range - Any time range can be selected </h1>
    <h4> add to is-range Property to select the time range ,  Also supports arrow-control attribute .</h4>
    <el-time-picker is-range v-model="val41" range-separator=" to " start-placeholder=" Starting time " end-placeholder=" End time " placeholder=" Choose a time frame "></el-time-picker>
    <div style="display: inline-block; margin-left: 20px;"></div>
    <el-time-picker is-range arrow-control v-model="val42" range-separator=" to " start-placeholder=" Starting time " end-placeholder=" End time " placeholder=" Choose a time frame "></el-time-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val1: '',
      val21: new Date(2016, 9, 10, 18, 40),
      val22: new Date(2016, 9, 10, 18, 40),
      startTime: '',
      endTime: '',
      val41: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      val42: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
    }
  }
}
</script>

2.3. Run the project