DatePicker

DatePicker, MonthPicker, RangePicker, WeekPicker components are all generated through datePicker, and can be combined with props.type to generate different components

Rules

Basic Example

const rule = {
    type: "DatePicker",
    field: "section_day",
    title: "Event Date",
    value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
    props: {
        type: "datetimerange",
        placeholder:"Select event date",
    }
}

Props Configuration Examples

Date Selection (date)

const rule = {
    type: "DatePicker",
    field: "date",
    title: "Select Date",
    value: null,
    props: {
        type: "date",
        format: "YYYY-MM-DD",
        placeholder: "Select date",
        clearable: true,
    }
}

Date Time Selection (datetime)

const rule = {
    type: "DatePicker",
    field: "datetime",
    title: "Select Date Time",
    value: null,
    props: {
        type: "datetime",
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: "Select date time",
        clearable: true,
    }
}

Date Range Selection (daterange)

const rule = {
    type: "DatePicker",
    field: "dateRange",
    title: "Date Range",
    value: null,
    props: {
        type: "daterange",
        format: "YYYY-MM-DD",
        placeholder: ["Start Date", "End Date"],
        clearable: true,
    }
}

Date Time Range Selection (datetimerange)

const rule = {
    type: "DatePicker",
    field: "datetimeRange",
    title: "Date Time Range",
    value: null,
    props: {
        type: "datetimerange",
        format: "YYYY-MM-DD HH:mm:ss",
        placeholder: ["Start Date Time", "End Date Time"],
        clearable: true,
    }
}

Month Selection (month)

const rule = {
    type: "DatePicker",
    field: "month",
    title: "Select Month",
    value: null,
    props: {
        type: "month",
        format: "YYYY-MM",
        placeholder: "Select month",
        clearable: true,
    }
}

Events Examples

Listen to Date Changes

const rule = {
    type: "DatePicker",
    field: "date",
    title: "Select Date",
    value: null,
    props: {
        type: "date",
        format: "YYYY-MM-DD",
        placeholder: "Select date",
        clearable: true,
    },
    on: {
        change: (value) => {
            console.log('Date changed:', value);
        },
        clear: () => {
            console.log('Date cleared');
        },
    },
}

Linkage Update Other Fields

const rule = [
    {
        type: "DatePicker",
        field: "startDate",
        title: "Start Date",
        value: null,
        props: {
            type: "date",
            format: "YYYY-MM-DD",
            placeholder: "Select start date",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Auto-set end date (start date + 7 days) when start date changes
                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: "End Date",
        value: null,
        props: {
            type: "date",
            format: "YYYY-MM-DD",
            placeholder: "Select end date",
        },
    },
]

Complete configuration items: TDesign_DatePicker

value: String | Array