Skip to content

DateTime Picker 日期时间选择器

type : 'datetime-picker'

日期时间选择器:选择日期和时间。

代码演示

分组形式选择

设置 showTypegroup 或不设置时,组件会以分组形式展示。

group 模式下是基于 date-pickertime-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

注: startPropsendProp 配置参数值优先级会高于普通配置

参数说明类型默认值
showType选择器组件类型,可选值为 groupsinglestring'group'
startProps日期选择配置参数,配置与官方组件 date-picker 参数保持一致。
只有当 showType = 'group' 时有效。
object-
endProps时间选择配置参数,配置与官方组件time-picker 参数保持一致。
只有当 showType = 'group' 时有效。
object-
columnsType选项类型,由 yearmonthday hourminutesecond 组成的数组。
只有当 showType = 'single' 时有效。
string[]['year', 'month', 'day', 'hour', 'minute', 'second']

Events