Date Picker 日期选择器

type : 'date-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: 'date-picker',
        label: '选择日期',
        name: 'day',
    },
    {
        type: 'date-picker',
        label: '选择年月',
        name: 'month',
        attrs: {
            'columnsType': ['year', 'month']
        }
    },
    {
        type: 'date-picker',
        label: '选择年',
        name: 'year',
        attrs: {
            'columnsType': ['year']
        }
    },
]);
</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: 'date-picker',
        label: '格式化',
        name: 'day1',
        attrs: {
            formatter: (type:string, option:any) => {
                if (type === 'year') {
                    option.text += '年';
                }
                if (type === 'month') {
                    option.text += '月';
                }
                if (type === 'day') {
                    option.text += '日';
                }
                return option;
            },
        }
    },
    {
        type: 'date-picker',
        label: '设置可选区间',
        name: 'day',
        attrs: {
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 11, 31),
        }
    },
     {
        type: 'date-picker',
        label: '过滤可选日期',
        name: 'day',
        attrs: {
            filter: (type:string, options:any) => {
                if (type === 'month') {
                    return options.filter((option:any) => Number(option.value) % 6 === 0);
                }
                return options;
            }
            // 'column-type':['year', 'month', 'day']
        }
    },
]);
</script>
<style lang="scss" scoped></style>

进阶用法

API

Props

与官方组件 date-picker 参数保持一致，这里以展示新增属性配置为主，具体配置参见官方文档。

Events