DatePicker 日期选择器

DatePicker、MonthPicker、RangePicker, WeekPicker组件都通过 datePicker 生成,可配合props.type生成不同的组件

规则

基础示例

const rule = {
    type: "DatePicker",
    field: "section_day",
    title: "活动日期",
    value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
    props: {
        type: "datetimerange",
        placeholder:"请选择活动日期",
    }
}

Props 配置示例

日期选择（date）

const rule = {
    type: "DatePicker",
    field: "date",
    title: "选择日期",
    value: null,
    props: {
        type: "date",
        format: "YYYY-MM-DD",
        placeholder: "请选择日期",
        clearable: true,
    }
}

日期时间选择（datetime）

const rule = {
    type: "DatePicker",
    field: "datetime",
    title: "选择日期时间",
    value: null,
    props: {
        type: "datetime",
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: "请选择日期时间",
        clearable: true,
    }
}

日期范围选择（daterange）

const rule = {
    type: "DatePicker",
    field: "dateRange",
    title: "日期范围",
    value: null,
    props: {
        type: "daterange",
        format: "YYYY-MM-DD",
        placeholder: ["开始日期", "结束日期"],
        clearable: true,
    }
}

日期时间范围选择（datetimerange）

const rule = {
    type: "DatePicker",
    field: "datetimeRange",
    title: "日期时间范围",
    value: null,
    props: {
        type: "datetimerange",
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: ["开始日期时间", "结束日期时间"],
        clearable: true,
    }
}

月份选择（month）

const rule = {
    type: "DatePicker",
    field: "month",
    title: "选择月份",
    value: null,
    props: {
        type: "month",
        format: "YYYY-MM",
        placeholder: "请选择月份",
        clearable: true,
    }
}

Events 事件示例

监听日期变化

const rule = {
    type: "DatePicker",
    field: "date",
    title: "选择日期",
    value: null,
    props: {
        type: "date",
        format: "YYYY-MM-DD",
        placeholder: "请选择日期",
        clearable: true,
    },
    on: {
        change: (value) => {
            console.log('日期改变:', value);
        },
        clear: () => {
            console.log('清空日期');
        },
    },
}

日期选择后联动更新

const rule = [
    {
        type: "DatePicker",
        field: "startDate",
        title: "开始日期",
        value: null,
        props: {
            type: "date",
            format: "YYYY-MM-DD",
            placeholder: "请选择开始日期",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 开始日期改变时，自动设置结束日期（开始日期+7天）
                if (value) {
                    const date = new Date(value);
                    date.setDate(date.getDate() + 7);
                    $inject.api.setValue('endDate', date.toISOString().split('T')[0]);
                }
            },
        },
    },
    {
        type: "DatePicker",
        field: "endDate",
        title: "结束日期",
        value: null,
        props: {
            type: "date",
            format: "YYYY-MM-DD",
            placeholder: "请选择结束日期",
        },
    },
]

完整配置项:TDesign_DatePicker

value: String | Array