日期选择 DatePicker ​

选择某一特定年份、月份，以及日期。

基础用法 ​

配合 v-mdoel 实现日期选择

<template>
  <bp-date-picker v-model="val" style="width: 200px" placeholder="Please select"> </bp-date-picker>
</template>

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

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

带时间的选择器 ​

通过增加属性 show-time 实现日期时间选择

<template>
  <bp-date-picker show-time v-model="val" style="width: 200px" placeholder="Please select"> </bp-date-picker>
</template>

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

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

仅面板 ​

通过 hide-trigger 属性可以控制组件只展示选择面板

<template>
  <bp-date-picker v-model="val" valueFormat="YYYY-MM-DD HH:mm:ss" hide-trigger style="width: 200px" placeholder="Please select">
  </bp-date-picker>
</template>

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

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

DatePicker 属性 ​

v-model
绑定值
String
-
size
按钮尺寸
Enum
normal
disabled
是否禁用
Boolean
false
readonly
是否只读状态
Boolean
true
is-danger
是否警示状态
Boolean
false
placeholder
占位提示文字
String
-
clearable
是否允许清空
Boolean
false
langs
语言包
String
zh-cn
value-format
值格式
String
YYYY-MM-DD
hide-trigger
隐藏触发器
Boolean
false

DatePicker 事件 ​

input
输入内容触发
none
blur
失焦触发
none