DatePicker 日期选择器

规则

基础示例（日期）

Props 配置示例

按粒度：周 / 月 / 季度 / 年

// 周
const week = {
    type: "datePicker",
    title: "周",
    field: "section_day2",
    value: "2026-20th",
    props: { picker: "week" },
}


// 月
const month = {
    type: "datePicker",
    title: "月",
    field: "section_day3",
    value: "2020-04",
    props: { picker: "month" },
}


// 季度（4.1.0+）
const quarter = {
    type: "datePicker",
    title: "季度",
    field: "section_day4",
    value: "2020-q4",
    props: { picker: "quarter" },
}


// 年
const year = {
    type: "datePicker",
    title: "年",
    field: "section_day5",
    value: "2020",
    props: { picker: "year" },
}

日期区间（RangePicker）

日期时间区间

多选日期（不支持 showTime）

整段禁用

尺寸对比（小 / 中 / 大）

Events 事件示例

参考：Antdv Next DatePicker

value：string | string[]

---

DatePicker（默认 picker=date）

参数	说明	类型	默认值	版本
defaultPickerValue	默认面板日期	dayjs	-	-
defaultValue	默认日期	dayjs	-	-
disabledTime	不可选择的时间	function(date)	-	-
format	展示格式	formatType	YYYY-MM-DD	-
multiple	多选（不支持 showTime）	boolean	false	-
pickerValue	受控面板日期	dayjs	-	-
renderExtraFooter	面板额外页脚	(mode) => VueNode	-	-
showNow	显示「此刻」	boolean	-	-
showTime	时间选择	Object | boolean	TimePicker Options	-
showWeek	展示当前周	boolean	false	-
value	日期，支持 v-model:value	dayjs	-	-

DatePicker[picker=year]

参数	说明	类型	默认值
defaultValue	默认日期	dayjs	-
format	展示格式	formatType	YYYY
multiple	多选	boolean	false
renderExtraFooter	页脚	() => VueNode	-
value	日期	dayjs	-

DatePicker[picker=quarter]（4.1.0+）

参数	说明	类型	默认值
defaultValue	默认日期	dayjs	-
format	展示格式	formatType	YYYY-\QQ
multiple	多选	boolean	false
renderExtraFooter	页脚	() => VueNode	-
value	日期	dayjs	-

DatePicker[picker=month]

参数	说明	类型	默认值
defaultValue	默认日期	dayjs	-
format	展示格式	formatType	YYYY-MM
multiple	多选	boolean	false
renderExtraFooter	页脚	() => VueNode	-
value	日期	dayjs	-

DatePicker[picker=week]

参数	说明	类型	默认值
defaultValue	默认日期	dayjs	-
format	展示格式	formatType	YYYY-wo
multiple	多选	boolean	false
renderExtraFooter	页脚	(mode) => VueNode	-
value	日期	dayjs	-
showWeek	展示当前周	boolean	true

---

RangePicker

参数	说明	类型	默认值	版本
allowEmpty	允许起止为空	[boolean, boolean]	[false, false]	-
cellRender	自定义单元格	(current, info) => VueNode	-	-
dateRender	已废弃，请用 cellRender	function	-	-
defaultPickerValue	默认面板日期	dayjs[]	-	-
defaultValue	默认日期	dayjs[]	-	-
disabled	禁用起止项	[boolean, boolean]	-	-
disabledTime	不可选时间	function(date, partial, info)	-	-
format	展示格式	formatType	YYYY-MM-DD HH:mm:ss	-
id	输入框 id		-	-
pickerValue	受控面板日期	dayjs[]	-	-
presets	快捷预设	{ label: VueNode, value: (Dayjs | (() => Dayjs))[] }[]	-	-
renderExtraFooter	页脚	() => VueNode	-	-
separator	分隔符	VueNode	SwapRightOutlined	-
showTime	时间选择	Object | boolean	TimePicker Options	-
value	日期区间	dayjs[]	-	-

---

Events（DatePicker / RangePicker）

事件	说明	类型	版本
change	值变化	(date: Dayjs | Dayjs[] | null, dateString: string | string[] | null) => void	-
update:value	同步值	(date: Dayjs | Dayjs[] | null) => void	-
calendarChange	待选区间变化（info.range）	(dates, dateStrings, info) => void	-
panelChange	面板切换	(value: Dayjs, mode: PickerMode) => void	-
openChange	弹层开关	(open: boolean) => void	-
ok	确定	() => void	-
select	选择日期	(date: Dayjs) => void	-
focus	聚焦	(event: FocusEvent, info: { range: 'start' | 'end' }) => void	-
blur	失焦	(event: FocusEvent, info: { range: 'start' | 'end' }) => void	-
keydown	按键	(event: KeyboardEvent, preventDefault: VoidFunction) => void	-