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: "请选择日期",
        allowClear: true,
    }
}

日期时间选择（datetime）

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

日期范围选择（daterange）

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

日期时间范围选择（datetimerange）

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

月份选择（month）

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

Events 事件示例

监听日期变化

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

完整配置项:Ant-design-vue_DatePicker

value: String | Array

DatePicker

Props

参数名	描述	类型	默认值	版本
locale	国际化配置，用于覆盖locale中的 `datePicker` 字段	`Record<string, any>`	`-`
hide-trigger	没有触发元素，只显示选择面板	`boolean`	`false`
allow-clear	是否允许清除	`boolean`	`true`
readonly	是否为只读	`boolean`	`false`
error	是否为错误状态	`boolean`	`false`
size	日期选择器的尺寸	`'mini'	'small'	'medium'
shortcuts	预设时间范围快捷选择	`ShortcutType[]`	`[]`
shortcuts-position	预设范围在面板上的位置，默认放在下方，侧边一般用于大量预设时间的场景	`'left'	'bottom'	'right'`
position	弹出的框的位置	`'top'	'tl'	'tr'
popup-visible	控制弹出框的打开或者关闭状态	`boolean`	`-`
default-popup-visible	默认弹出框是打开或者关闭	`boolean`	`false`
trigger-props	可以传入 `Trigger` 组件的参数	`Record<string, unknown>`	`-`
unmount-on-close	是否在隐藏的时候销毁DOM结构	`boolean`	`false`
placeholder	提示文案	`string`	`-`
disabled	是否禁用	`boolean`	`false`
disabled-date	不可选取的日期	`(current?: Date) => boolean`	`-`
disabled-time	不可选取的时间	`(current: Date) => DisabledTimeProps`	`-`
picker-value (v-model)	面板显示的日期	`Date	string	number`
default-picker-value	面板默认显示的日期	`Date	string	number`
popup-container	弹出框的挂载容器	`string	HTMLElement	null
value-format	值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。如果没有指定，将格式化为字符串，格式同 `format`。	`'timestamp'	'Date'	string`

Events

事件名	描述	参数
change	组件值发生改变	value: `Date
select	选中日期发生改变但组件值未改变	value: `Date
popup-visible-change	打开或关闭弹出框	visible: `boolean`
ok	点击确认按钮	value: `Date
clear	点击清除按钮	-
select-shortcut	点击快捷选项	shortcut: `ShortcutType`
picker-value-change	面板日期改变	value: `Date

`<date-picker>` Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	`Date	string
default-value	默认值	`Date	string
format	展示日期的格式，参考字符串解析格式	`string	((current: Date) => string)`
day-start-of-week	每周的第一天开始于周几，0 - 周日，1 - 周一。(默认0)	`0	1`
show-time	是否增加时间选择	`boolean`	`false`
timepicker-props	时间显示的参数，参考 TimePickerProps	`Partial<TimePickerProps>`	`-`
disabled-time	不可选取的时间	`(current: Date) => DisabledTimeProps`	`-`
show-now-btn	是否显示 `showTime` 时，选择当前时间的按钮	`boolean`	`true`

`<month-picker>` Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	`Date	string
default-value	默认值	`Date	string
format	展示日期的格式，参考字符串解析格式	`string`	`'YYYY-MM'`

`<year-picker>` Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	`Date	string
default-value	默认值	`Date	string
format	展示日期的格式，参考字符串解析格式	`string`	`'YYYY'`

`<quarter-picker>` Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	`Date	string
default-value	默认值	`Date	string
format	展示日期的格式，参考字符串解析格式	`string`	`'YYYY-[Q]Q'`

`<week-picker>` Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	`Date	string
default-value	默认值	`Date	string
format	展示日期的格式，参考字符串解析格式	`string`	`'gggg-wo'`
day-start-of-week	每周的第一天开始于周几，0 - 周日，1 - 周一。(默认0)	`0	1`

`<range-picker>` Props

参数名	描述	类型	默认值	版本
mode	范围选择器的类型	`'date'	'year'	'quarter'
model-value (v-model)	绑定值	`(Date	string	number)[]`
default-value	默认值	`(Date	string	number)[]`
picker-value	默认面板显示的日期	`(Date	string	number)[]`
default-picker-value	面板显示的日期	`(Date	string	number)[]`
disabled	是否禁用	`boolean	boolean[]`	`false`
day-start-of-week	每周的第一天开始于周几，0 - 周日，1 - 周一。(默认0)	`0	1`	`0`
format	展示日期的格式，参考字符串解析格式	`string`	`-`
value-format	值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。如果没有指定，将格式化为字符串，格式同 `format`。	`'timestamp'	'Date'	string`
show-time	是否增加时间选择	`boolean`	`false`
time-picker-props	时间显示的参数，参考 TimePickerProps	`Partial<TimePickerProps>`	`-`
placeholder	提示文案	`string[]`	`-`
disabled-date	不可选的日期	`(current: Date, type: 'start'	'end') => boolean`	`-`
disabled-time	不可选取的时间	`(current: Date, type: 'start'	'end') => DisabledTimeProps`	`-`
separator	范围选择器输入框内的分割符号	`string`	`-`

`<range-picker>` Events

事件名	描述	参数
change	组件值发生改变	value: `(Date
select	选中日期发生改变但组件值未改变	value: `(Date
popup-visible-change	打开或关闭弹出框	visible: `boolean`
ok	点击确认按钮	value: `Date
clear	点击清除按钮	-
select-shortcut	点击快捷选项	shortcut: `ShortcutType`
picker-value-change	面板日期改变	value: `Date

字符串解析格式

格式	输出	描述
`YY`	21	两位数的年份
`YYYY`	2021	四位数年份
`M`	1-12	月份，从 1 开始
`MM`	01-12	月份，两位数
`MMM`	Jan-Dec	缩写的月份名称
`MMMM`	January-December	完整的月份名称
`D`	1-31	月份里的一天
`DD`	01-31	月份里的一天，两位数
`d`	0-6	一周中的一天，星期天是 0
`dd`	Su-Sa	最简写的一周中一天的名称
`ddd`	Sun-Sat	简写的一周中一天的名称
`dddd`	Sunday-Saturday	一周中一天的名称
`H`	0-23	小时
`HH`	00-23	小时，两位数
`h`	1-12	小时, 12 小时制
`hh`	01-12	小时, 12 小时制, 两位数
`m`	0-59	分钟
`mm`	00-59	分钟，两位数
`s`	0-59	秒
`ss`	00-59	秒，两位数
`S`	0-9	数百毫秒，一位数
`SS`	00-99	几十毫秒，两位数
`SSS`	000-999	毫秒，三位数字
`Z`	-5:00	UTC 的偏移量
`ZZ`	-0500	UTC 的偏移量，数字前面加上 0
`A`	AM PM	-
`a`	am pm	-
`Do`	1st... 3st	带序号的月份中的某天
`X`	1410715640.579	Unix 时间戳
`x`	1410715640579	Unix 毫秒时间戳

DatePicker 日期选择器 ​

规则 ​

基础示例 ​

Props 配置示例 ​

日期选择（date） ​

日期时间选择（datetime） ​

日期范围选择（daterange） ​

日期时间范围选择（datetimerange） ​

月份选择（month） ​

Events 事件示例 ​

监听日期变化 ​

日期选择后联动更新 ​

DatePicker ​

Props ​

Events ​

<date-picker> Props ​

<month-picker> Props ​

<year-picker> Props ​

<quarter-picker> Props ​

<week-picker> Props ​

<range-picker> Props ​

<range-picker> Events ​

字符串解析格式 ​

DatePicker 日期选择器

规则

基础示例

Props 配置示例

日期选择（date）

日期时间选择（datetime）

日期范围选择（daterange）

日期时间范围选择（datetimerange）

月份选择（month）

Events 事件示例

监听日期变化

日期选择后联动更新

DatePicker

Props

Events

`<date-picker>` Props

`<month-picker>` Props

`<year-picker>` Props

`<quarter-picker>` Props

`<week-picker>` Props

`<range-picker>` Props

`<range-picker>` Events

字符串解析格式