# bz-datetime-picker 日期选择器

# 基本用法

时间选择器，支持年月日时分秒等维度，支持区间选择，倾向宽屏设计，与 bz-picker 组件更多为交互设计上的区别。 1.0.1 版本开始支持此组件。

支持宽屏差异

扫码预览

<template>
    <view class="demo-ui-page">
        <view class="demo-content">
            <view class="demo-title">bz-datetime-picker 日期时间选择器</view>
            <demo-cell title="日期用法">
                <bz-datetime-picker
                    type="date"
                    v-model="single"
                    @close="close"
                />
            </demo-cell>
            <demo-cell
                title="日期时间用法"
                subTitle="type=datetime"
            >
                <view class="demo-flex-between">
                    <view></view>
                    <bz-datetime-picker
                        style="width: 250px"
                        color="#5358de"
                        type="datetime"
                        v-model="datetimesingle"
                        @change="changeLog"
                        hideSecond
                        :clear-icon="false"
                    />
                </view>
            </demo-cell>
            <demo-cell
                title="日期时间范围用法"
                subTitle="isRange"
            >
                <bz-datetime-picker
                    v-model="datetimerange"
                    type="datetime"
                    isRange
                    rangeSeparator="至"
                />
            </demo-cell>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            params: {
                single: '',
                datetimesingle: '2023-04-02 12:01',
                datetimerange: []
            }
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

展开刷新关闭

# 属性说明

属性名	类型	说明	默认值
color	String	主题颜色	#1890ff
type	date ｜ datetime	选择器类型	-
isRange	Boolean	初始化默认选中数据，如[value1, value2, value3]	date
value(v-model)	String(单选)｜ Array(区间选)	绑定值	-
placeholder	String	单选择时的占位内容	选择日期/时间
start	String	起始时间
end	String	截止时间
startPlaceholder	String	范围选择时开始日期的占位内容
endPlaceholder	String	范围选择时结束日期的占位内容
rangeSeparator	String	选择范围时的分隔符	'-'
hideSecond	Boolean	是否不需要秒，只展示时分	false
bordered	Boolean	是否需要边框	true
disabled	Boolean	是否禁用	false
isRight	Boolean	是否右对齐	false
closeable	Boolean	是否展示清除按钮	true
recent	Boolean	是否展示内置日期区间选择	false
appendRoot `1.0.2`	Boolean	是否挂载到根节点	false
@change	value：String ｜ Array	确定选择时间时触发事件	-
@visibleChange	visible: boolean	显示隐藏事件	-

← bz-checkbox 单选多选框 bz-picker 滚动选择器 →