TimePicker

Select a time value.

Basic Usage

<template>
  <bp-time-picker v-model="time" :style="{ width: '180px' }" clearable placeholder="Please select" />
</template>

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

const time = ref("");
</script>

Size

size supports mini, small, default, and large.

mini

small

default

large

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end">
    <div>
      <div class="label">mini</div>
      <bp-time-picker v-model="val" size="mini" style="width: 140px" placeholder="Please select" />
    </div>
    <div>
      <div class="label">small</div>
      <bp-time-picker v-model="val" size="small" style="width: 160px" placeholder="Please select" />
    </div>
    <div>
      <div class="label">default</div>
      <bp-time-picker v-model="val" style="width: 180px" placeholder="Please select" />
    </div>
    <div>
      <div class="label">large</div>
      <bp-time-picker v-model="val" size="large" style="width: 200px" placeholder="Please select" />
    </div>
  </div>
</template>

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

const val = ref("");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Clearable and Disabled

Combine clearable and disabled states.

Clearable

Disabled

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Clearable</div>
      <bp-time-picker v-model="val" clearable style="width: 180px" placeholder="Please select" />
    </div>
    <div>
      <div class="label">Disabled</div>
      <bp-time-picker v-model="val2" disabled style="width: 180px" />
    </div>
  </div>
</template>

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

const val = ref("");
const val2 = ref("14:30:00");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

TimePicker Props

v-model	Bound value	String	-	-
name	Input name	String	-	-
placeholder	Placeholder	String	-	-
size	Size	InputSize	default	-
disabled	Whether disabled	Boolean	-	-
clearable	Whether clearable	Boolean	-	-
value-format	Value format	String	YYYY-MM-DD	-
hide-trigger	Whether to hide the trigger	Boolean	-	-

TimePicker Events

input	Triggered on input	-	-
blur	Triggered on blur	-	-