TimePicker

Examples

Modes

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

Hour mode

Minute mode

Second mode

<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

Name Type Default Description

ui

string

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

Value	Description
`xs`	Extra small size style.
`s`	Small size style.
`m`	Medium size style.
`l`	Large size style.

mode string 'second' Specifies the granularity of selection, which can be precise to hours (hour), minutes (minute), or seconds (second).

value

string

v-model

The currently selected value.

placeholder string timepicker.placeholder The placeholder text when no option is selected.

hours Array<number> - Options for hours, default is 0-23.

minutes Array<number> - Options for minutes, default is 0-59.

seconds Array<number> - Options for seconds, default is 0-59.

min string - The minimum value.

max string - The maximum value.

autofocus boolean false Whether to automatically get focus.

clearable boolean false Whether the selected value can be cleared.

expanded

boolean

false

.sync

Whether the dropdown is expanded.

disabled boolean false Whether it is disabled.

readonly boolean false Whether it is read-only.

overlay-class string | Array | Object - Refer to the overlay-class prop of the Overlay component.

overlay-style string | Array | Object - Refer to the overlay-style prop of the Overlay component.

Slots

Name Description

option

Slot for time options in the dropdown panel.

Name	Type	Description
`label`	`string`	Text to display.
`value`	`string`	Corresponding value.
`disabled`	`boolean`	Whether the option is disabled.
`part`	`string`	Which part the option belongs to, can be `hour` / `minute` / `second`.

Events

Name	Description
`input`	`v-model` Triggered when the value is manually input or selected in the dropdown panel. The parameter is the current input value.
`change`	Triggered when the selected value changes. The parameter is the current selected value, and it is triggered when the dropdown panel is closed.
`toggle`	Triggered 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.
`clear`	Clear the currently selected value.

Configs

Key	Type	Default	Description
`timepicker.placeholder`	`string`	`@@timepickerpicker.placeholder`	Placeholder text when no value is selected.

Values starting with @@ refer to the corresponding properties in the multilingual configuration.

Icons

Name	Description
`clock`	Clock icon.
`clear`	Clear content icon.

CSS

Name	Type	Default	Description
`--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. The `overlay-style` property needs to be used to set this value.

Edit this page on GitHubEdit