DateTime Picker 日期时间选择器
type : 'datetime-picker'
日期时间选择器:选择日期和时间。
代码演示
分组形式选择
设置 showType
为 group
或不设置时,组件会以分组形式展示。
group
模式下是基于 date-picker
和 time-picker
开发,因此配置属性可通过 startProps
完成 date-picker
的配置,通过 endProps
可完成 time-pciker
的配置
<template>
<x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({});
const formOptions = ref([
{
type: 'datetime-picker',
label: '日期时间分组形式选择',
name: 'datetime1',
attrs: {
showType: 'group'
}
},
{
type: 'datetime-picker',
label: '日期时间分组形式选择',
name: 'datetime1',
attrs:{
endProps:{ //设置时间展示项
columnsType:['hour','minute']
}
}
},
]);
</script>
<style lang="scss" scoped></style>
分组形式选择
单页模式选择
单页模式下,组件会以单页形式展示,配置属性与官方组件 datetime-picker 保持一致。所以可直接参照官方文档进行配置。
<template>
<x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({});
const formOptions = ref([
{
type: 'datetime-picker',
label: '默认展示',
name: 'datetime2',
attrs: {
showType: 'single'
}
},
{
type: 'datetime-picker',
label: '设置展示项(单页模式)',
name: 'datetime3',
attrs: {
showType: 'single',
columnsType:['year', 'month', 'day', 'hour', 'minute']
}
},
]);
</script>
<style lang="scss" scoped></style>
单页模式选择
进阶用法
<template>
<x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({});
const formOptions = ref([
{
type: 'datetime-picker',
label: '单页模式日期时间选择',
name: 'datetime2',
placeholder: '请输入内容',
required: true,
attrs: {
showType: 'single',
columnsType: ['year', 'month', 'day', 'hour', 'minute'],
formatter: (type, option) => {
if (type === 'year') {
option.text += '年';
}
if (type === 'month') {
option.text += '月';
}
if (type === 'day') {
option.text += '日';
}
if (type === 'hour') {
option.text += '时';
}
if (type === 'minute') {
option.text += '分';
}
if (type === 'second') {
option.text += '秒';
}
return option;
},
}
},
]);
</script>
<style lang="scss" scoped></style>
进阶用法
API
Props
注: startProps
和endProp
配置参数值优先级会高于普通配置
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
showType | 选择器组件类型,可选值为 group 、single | string | 'group' |
startProps | 日期选择配置参数,配置与官方组件 date-picker 参数保持一致。 只有当 showType = 'group' 时有效。 | object | - |
endProps | 时间选择配置参数,配置与官方组件time-picker 参数保持一致。 只有当 showType = 'group' 时有效。 | object | - |
columnsType | 选项类型,由 year 、month 、day 、hour 、minute 、second 组成的数组。只有当 showType = 'single' 时有效。 | string[] | ['year', 'month', 'day', 'hour', 'minute', 'second'] |