VEUI

VEUI on GitHub
Play!中文

TimePicker

Examples

Modes

Supports three modes, hour, minute, and second, which can be controlled by the mode prop.

Hour mode

请选择时间

Minute mode

请选择时间

Second mode

请选择时间
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Hour mode</h4>
    <veui-time-picker mode="hour"/>
  </section>
  <section>
    <h4>Minute mode</h4>
    <veui-time-picker
      v-model="value"
      mode="minute"
    />
  </section>
  <section>
    <h4>Second mode</h4>
    <veui-time-picker
      v-model="value"
      mode="second"
    />
  </section>
</article>
</template>

<script>
import { TimePicker } from 'veui'

export default {
  components: {
    'veui-time-picker': TimePicker
  },
  data () {
    return {
      value: null
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

Custom options

Supports custom time options, which can be customized with hours , minutes and seconds props.

请选择时间
请选择时间
请选择时间
Edit this demo on GitHubEdit
<template>
<article>
  <veui-time-picker
    class="time-picker"
    mode="hour"
    :hours="[2, 4, 6, 8, 10, 12, 14, 16]"
  />
  <veui-time-picker
    class="time-picker"
    mode="minute"
    :hours="[2, 4, 6, 8, 10, 12, 14, 16]"
    :minutes="[0, 10, 20, 30, 40, 50]"
  />
  <veui-time-picker
    class="time-picker"
    mode="second"
    :hours="[2, 4, 6, 8, 10, 12, 14, 16]"
    :minutes="[0, 10, 20, 30, 40, 50]"
    :seconds="[0, 10, 20, 30, 40, 50]"
  />
</article>
</template>

<script>
import { TimePicker } from 'veui'

export default {
  components: {
    'veui-time-picker': TimePicker
  }
}
</script>

<style lang="less" scoped>
.time-picker {
  & + & {
    margin-left: 20px;
  }
}
</style>

Range restriction

Supports range restriction, which can be set by min and max props respectively.

请选择时间
~
请选择时间
Edit this demo on GitHubEdit
<template>
<article>
  <veui-time-picker
    v-model="min"
    :max="max"
  />
  ~
  <veui-time-picker
    v-model="max"
    :min="min"
  />
</article>
</template>

<script>
import { TimePicker } from 'veui'

export default {
  components: {
    'veui-time-picker': TimePicker
  },
  data () {
    return {
      min: null,
      max: null
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring-

Presets for style variants. A combination of space-separated enumerated values.

ValueDescription
sSmall size style.
mMedium size style.
modestring'second'Specifies the granularity of selection, which can be precise to hours (hour), minutes (minute), or seconds (second).
valuestring-

v-model

The currently selected value.

placeholderstringtimepicker.placeholderThe placeholder text when no option is selected.
hoursArray<number>-Options for hours, default is 0-23.
minutesArray<number>-Options for minutes, default is 0-59.
secondsArray<number>-Options for seconds, default is 0-59.
minstring-The minimum value.
maxstring-The maximum value.
autofocusbooleanfalseWhether to automatically get focus.
clearablebooleanfalseWhether the selected value can be cleared.
expandedbooleanfalse

.sync

Whether the dropdown is expanded.

disabledbooleanfalseWhether it is disabled.
readonlybooleanfalseWhether it is read-only.
overlay-classstring | Array | Object-Refer to the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object-Refer to the overlay-style prop of the Overlay component.

Slots

NameDescription
option

Slot for time options in the dropdown panel.

NameTypeDescription
labelstringText to display.
valuestringCorresponding value.
disabledbooleanWhether the option is disabled.
partstringWhich part the option belongs to, can be hour / minute / second.

Events

NameDescription
input

v-model

Triggered when the value is manually input or selected in the dropdown panel. The parameter is the current input value.

changeTriggered when the selected value changes. The parameter is the current selected value, and it is triggered when the dropdown panel is closed.
toggleTriggered when the dropdown panel's expand state is toggled. The callback parameter is (expanded: boolean), where expanded indicates whether the operation will expand or collapse the dropdown panel.
clearClear the currently selected value.

Configs

KeyTypeDefaultDescription
timepicker.placeholderstring@@timepickerpicker.placeholderPlaceholder text when no value is selected.

Icons

NameDescription
clockClock icon.
clearClear content icon.

CSS

NameTypeDefaultDescription
--dls-dropdown-max-display-items<integer>8

The maximum number of items displayed in the dropdown options at the same time. The maximum height of the dropdown will be calculated based on this value.

Edit this page on GitHubEdit
© Baidu, Inc. 2024