日期时间选择器

对一些属性封装了封装

宽度设置

可以直接通过width属性控制组件的宽度

<template>
  <p><bc-date-picker v-model="value" /></p>
  <p><bc-date-picker v-model="value" width="200px" /></p>
  <p><bc-date-picker v-model="value" :width="200" /></p>
  <p><bc-date-picker v-model="value" width="20vw" /></p>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value = ref('')
</script>

Hide Source

默认时间

如果是范围选择，可以通过dayEnd属性，快速设置默认选择的起始时间为00:00:00，结束时间为23:59:59

WARNING

只针对通过选择面板确定触发的日期变更，才会自动设置起始和结束时间。如果是通过代码直接或间接赋值的，需要手动修改。

至

至

至

<template>
  <p><bc-date-picker v-model="defaultValue" day-end type="datetimerange" /></p>
  <p><bc-date-picker v-model="value" day-end type="datetimerange" /></p>
  <p><bc-date-picker v-model="value" :default-time="defaultTime" type="datetimerange" /></p>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value = ref([])
const defaultTime = ['08:30:00', '17:30:00']
const defaultValue = ref(['2022-03-04', '2022-03-05'])
</script>

Hide Source

date-picker属性

属性	说明	类型	可选值	默认值
day-end	default-time=['00:00:00', '23:59:59']的速记属性	Date[]	-	-
width	选择器的宽度	string/number	-	-

Source

Docs