FxTimePicker Time Picker

Different interaction patterns exist between mobile and PC versions, thus requiring different parameters. For mobile usage, please refer directly to the mobile section at the bottom.

Used for selecting or inputting time values.

Fixed Time Points

Provides several fixed time points for user selection.

Use the fx-time-select tag with start, end and step parameters to specify selectable start time, end time and interval.

<fx-time-select
  v-model="value"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="Select time">
</fx-time-select>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  }
</script>

Expand Copy Copy

Arbitrary Time Points

Allows selecting any time point.

Use the fx-time-picker tag with selectableRange to limit selectable time range. Two interaction modes are provided: default wheel selection or arrow controls when arrow-control is enabled.

<template>
  <fx-time-picker
    v-model="value1"
    placeholder="Arbitrary time"
    @change="onChange">
  </fx-time-picker>
  <fx-time-picker
    arrow-control
    v-model="value2"
    :picker-options="{
       selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 06:00:00']
    }"
    placeholder="Arbitrary time">
  </fx-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value1:0,
        value2: new Date(2016, 9, 10, 18, 40)
      };
    },
    methods:{
      onChange(date){
        console.log('onChange...',date,this.value1,this.value1.getTime())
      }
    }
  }
</script>

Expand Copy Copy

Fixed Time Range

End time options will update dynamically after selecting start time.

<template>
  <fx-time-select
    placeholder="Start time"
    v-model="startTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
  </fx-time-select>
  <fx-time-select
    placeholder="End time"
    v-model="endTime"
    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
  </fx-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>

Expand Copy Copy

Arbitrary Time Range

Allows selecting any time range.

Enable time range selection with is-range attribute, also supports arrow-control.

<template>
  <fx-time-picker
    is-range
    v-model="value1"
    range-separator="to"
    start-placeholder="Start time"
    end-placeholder="End time"
    placeholder="Select time range">
  </fx-time-picker>
  <fx-time-picker
    is-range
    arrow-control
    v-model="value2"
    range-separator="to"
    start-placeholder="Start time"
    end-placeholder="End time"
    placeholder="Select time range">
  </fx-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      };
    }
  }
</script>

Expand Copy Copy

Attributes

Parameter	Description	Type	Options	Default
value / v-model	binding value	date(TimePicker) / string(TimeSelect)	—	—
readonly	complete readonly	boolean	—	false
disabled	disabled	boolean	—	false
editable	text box editable	boolean	—	true
clearable	whether to show clear button	boolean	—	true
size	input size	string	medium / small / mini	—
placeholder	placeholder in non-range mode	string	—	—
start-placeholder	placeholder for start date in range mode	string	—	—
end-placeholder	placeholder for end date in range mode	string	—	—
is-range	whether to select time range, only works with <fx-time-picker>	boolean	—	false
arrow-control	whether to use arrow buttons, only works with <fx-time-picker>	boolean	—	false
align	alignment	string	left / center / right	left
popper-class	custom class name for TimePicker dropdown	string	—	—
picker-options	additional options, see below	object	—	{}
range-separator	range separator	string	-	'-'
value-format	optional, value format (only for TimePicker)	string	see date formats	—
default-value	default time when picker opens	Date(TimePicker) / string(TimeSelect)	parsable by new Date()(TimePicker) / selectable values(TimeSelect)	—
name	native attribute	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

Parameter	Description	Type	Options	Default
start	start time	string	—	09:00
end	end time	string	—	18:00
step	time interval	string	—	00:30
minTime	minimum time, disables time before this	string	—	00:00
maxTime	maximum time, disables time after this	string	—	—

Time Picker Options

Parameter	Description	Type	Options	Default
selectableRange	available time range, e.g. '18:30:00 - 20:30:00' or array ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']	string / array	—	—
format	time format	string	hour: HH, minute: mm, second: ss, AM/PM A	'HH:mm:ss'

Events

Event	Description	Parameters
change	triggers when user confirms selection	component's binding value
blur	triggers when input loses focus	component instance
focus	triggers when input gets focus	component instance

Methods

Method	Description	Parameters
focus	focus the input	-

Mobile Time Picker

Supports time format (hours and minutes).

Basic Usage

When using .sync modifier with visible parameter, the component will automatically control popup display without manual handling in cancel and confirm events.

<template>
  <fx-time-select
    :visible.sync="show"
    v-model="value"
  ></fx-time-select>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: new Date(),
    }
  }
}
</script>

Time Selection

In type=='time' mode, v-model accepts string format like '19:00' (can also initialize with Date type).

<template>
  <fx-time-select
    :visible.sync="show"
    v-model="value"
    :min-hour="9"
    :max-hour="20"
  ></fx-time-select>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: new Date(),
    }
  }
}
</script>

Custom Format

Similar to most date format functions, captures format placeholders and displays corresponding strings without affecting value.

<template>
  <fx-time-select
    :visible.sync="show"
    v-model="value"
    format="yyyy,MM,dd,hh时,mm分"
  ></fx-time-select>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: new Date(),
    }
  }
}
</script>

One-way Data Flow

Other pickers don't support one-way data flow. Consider wrapping components for this purpose.

Set :value-binding="false" to disable two-way data binding (allows omitting v-model), useful for only listening to confirm events.

API

Option	Description	Type	Acceptable Values	Default
visible	controls visibility	Boolean		false
v-model	selected value	Date|String		--
min-date	minimum selectable date	Date		Jan 1, 10 years ago
max-date	maximum selectable date	Date		Dec 31, 10 years later
min-hour	minimum selectable hour	Number		0
max-hour	maximum selectable hour	Number		23
format	display format (comma separated)	String		yyyy,MM,dd,hh,mm
item-height	item height in px	Number		36
visible-item-count	number of visible items	Number		7
value-binding	enables two-way binding when true	Boolean		true
cancel-btn-text	cancel button text	String		Cancel
confirm-btn-text	confirm button text	String		Confirm
class-name	root class name for popup	String		--

Events

Event	Description	Parameters
cancel	triggers when clicking cancel	--
confirm	triggers when clicking confirm	value
update:visible	triggers when popup visibility changes	visible

Additional API

Includes all Datetime Picker APIs plus:

Option	Description	Type	Acceptable Values	Default
show-toolbar	whether to show toolbar	Boolean		true
prevent-click	disable click events when picker isn't at page bottom	Boolean		false