TimePicker

A time picker component.

Basic Usage

Limit selectable time ranges via disabledHours, disabledMinutes, and disabledSeconds.

Two interaction modes are provided: by default, use the mouse wheel to select; with arrow-control, use the arrow buttons on the interface.

<template>
  <div flex>
    <div style="width: 220px; margin-right: 20px">
      <b-time-picker
        v-model="value1"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
        placeholder="Any time point"
      ></b-time-picker>
    </div>
    <div style="width: 220px; margin-right: 20px">
      <b-time-picker
        v-model="value2"
        arrow-control
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
        placeholder="Any time point"
      ></b-time-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(new Date(2016, 9, 10, 18, 40))
const value2 = ref(new Date(2016, 9, 10, 18, 40))

const makeRange = (start, end) => {
  const result = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}

function disabledHours() {
  return makeRange(0, 16).concat(makeRange(19, 23))
}

function disabledMinutes(hour) {
  if (hour === 17) {
    return makeRange(0, 29)
  }
  if (hour === 18) {
    return makeRange(31, 59)
  }
}

function disabledSeconds(hour, minute) {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59)
  }
}
</script>

Time Range

Add is-range to enable time range selection. Also supports the arrow-control prop.

<template>
  <div flex>
    <b-time-picker
      v-model="value1"
      style="width: 340px"
      is-range
      range-separator="To"
      start-placeholder="Start Time"
      end-placeholder="End Time"
      placeholder="Select Time Range"
    ></b-time-picker>
    &nbsp; &nbsp;
    <b-time-picker
      v-model="value2"
      style="width: 340px"
      is-range
      arrow-control
      range-separator="To"
      start-placeholder="Start Time"
      end-placeholder="End Time"
      placeholder="Select Time Range"
    ></b-time-picker>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
const value2 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
</script>

Disabled State and Disabled Time

Limit selectable time ranges via disabledHours, disabledMinutes, and disabledSeconds.

<template>
  <div flex>
    <div style="width: 220px; margin-right: 20px">
      <b-time-picker
        v-model="value1"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
        placeholder="Any time point"
      ></b-time-picker>
    </div>
    <div style="width: 220px; margin-right: 20px">
      <b-time-picker disabled placeholder="Disabled"></b-time-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(new Date(2016, 9, 10, 18, 40))

const makeRange = (start, end) => {
  const result = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}

function disabledHours() {
  return makeRange(0, 16).concat(makeRange(19, 23))
}

function disabledMinutes(hour) {
  if (hour === 17) {
    return makeRange(0, 29)
  }
  if (hour === 18) {
    return makeRange(31, 59)
  }
}

function disabledSeconds(hour, minute) {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59)
  }
}
</script>

Time Format

Set the format prop to change the display format of the time.

Note: format only changes the display format, not the bound value.

<template>
  <div flex>
    <div style="width: 220px; margin-right: 20px">
      <b-time-picker
        v-model="value1"
        format="HH:mm:ss"
        placeholder="Any time"
      ></b-time-picker>
    </div>
    <div style="width: 220px; margin-right: 20px">
      <b-time-picker
        v-model="value2"
        is-range
        arrow-control
        format="HH:mm:ss"
        range-separator="~"
        start-placeholder="Start time"
        end-placeholder="End time"
        placeholder="Select time range"
      >
        >
      </b-time-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(new Date(2023, 9, 10, 18, 40))
const value2 = ref([new Date(2023, 4, 270, 18, 40), new Date(2023, 4, 30, 11, 40)])
</script>

Sizes

Different sizes can be configured.

<template>
  <div flex>
    <div style="width: 240px; margin-right: 20px">
      <b-time-picker v-model="value1" size="large"></b-time-picker>
    </div>
    <div style="width: 240px; margin-right: 20px">
      <b-time-picker v-model="value1"></b-time-picker>
    </div>
    <div style="width: 240px; margin-right: 20px">
      <b-time-picker v-model="value1" size="small"></b-time-picker>
    </div>
    <div style="width: 240px; margin-right: 20px">
      <b-time-picker v-model="value1" size="mini"></b-time-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(new Date(2016, 9, 10, 18, 40))
</script>

Props

Parameter	Description	Type	Options	Default
value / v-model	Bound value	date (Date)	—	—
readonly	Fully read-only	boolean	—	false
disabled	Disabled	boolean	—	false
editable	Text field is editable	boolean	—	true
clearable	Show clear button	boolean	—	true
size	Input size	string	medium / small / mini	—
placeholder	Placeholder for non-range selection	string	—	—
start-placeholder	Placeholder for start date in range selection	string	—	—
end-placeholder	Placeholder for start date in range selection	string	—	—
is-range	Is a time range selection	boolean	—	false
arrow-control	Use arrow buttons for time selection	boolean	—	false
align	Alignment	string	left / center / right	left
popper-class	Custom class name for TimePicker dropdown	string	—	—
range-separator	Separator for range selection	string	-	'-'
format	Display format in the input	string	-	HH:mm:ss
default-value	Optional, default time displayed when the picker opens	Date(TimePicker) / string(TimeSelect)	Parseable by `new Date()`(TimePicker) / Options(TimeSelect)	—
name	Native attribute	string	—	—
prefix-icon	Custom prefix icon class name	string	—	time-circle
clear-icon	Custom clear icon class name	string	—	close-circle-fill
disabledHours	Disable specific hour options	function	—	-
disabledMinutes	Disable specific minute options	function(selectedHour)	—	-
disabledSeconds	Disable specific second options	function(selectedHour, selectedMinute)	—	-

Events

Event Name	Description	Parameter
change	Triggers when the user confirms the selected value	Component bound value
blur	Triggers when input loses focus	Component instance
focus	Triggers when input gains focus	Component instance

Methods

Method Name	Description	Parameter
focus	Make input gain focus	-

TimePicker ​

Basic Usage ​

Time Range ​

Disabled State and Disabled Time ​

Time Format ​

Sizes ​

Props ​

Events ​

Methods ​