Skip to content

DatePicker 日期选择器

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

规则

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

参考:Ant-design-vue_DatePicker

value: String | Array

DatePicker

Props

以下 API 为 DatePicker、MonthPicker、RangePicker, WeekPicker 共享的 API。

参数说明类型默认值
type组件类型'date', 'month', 'week', 'range''date'
allowClear是否显示清除按钮booleantrue
autoFocus自动获取焦点booleanfalse
dateRender作用域插槽,自定义日期单元格的内容slot="dateRender" slot-scope="current, today"-
disabled禁用booleanfalse
disabledDate不可选择的日期(currentDate: moment) => boolean
getCalendarContainer定义浮层的容器,默认为 body 上新建 divfunction(trigger)
locale国际化配置object默认配置
mode日期面板的状态(设置后无法选择年份/月份?`timedate
open控制弹层是否展开boolean-
placeholder输入框提示文字string|RangePicker[]-
popupStyle额外的弹出日历样式object{}
dropdownClassName额外的弹出日历 classNamestring-
size输入框大小,large 高度为 40px,small 为 24px,默认是 32pxstring
suffixIcon自定义的选择框后缀图标VNode | slot-

共有的事件

事件名称说明回调参数
openChange弹出日历和关闭日历的回调function(status)
panelChange日期面板变化时的回调function(value, mode)

DatePicker

参数说明类型默认值
defaultValue默认日期moment
defaultPickerValue默认面板日期moment
disabledTime不可选择的时间function(date)
format设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 moment.jsstring | string[]"YYYY-MM-DD"
renderExtraFooter在面板中添加额外的页脚slot="renderExtraFooter" slot-scope="mode"-
showTime增加时间选择功能Object|booleanTimePicker Options
showTime.defaultValue设置用户选择日期时默认的时分秒momentmoment()
showToday是否展示“今天”按钮booleantrue
value(v-model)日期moment

DatePicker 事件

事件名称说明回调参数
change时间发生变化的回调function(date: moment, dateString: string)
ok点击确定按钮的回调function()

MonthPicker

参数说明类型默认值
defaultValue默认日期moment
defaultPickerValue默认面板日期moment
format展示的日期格式,配置参考 moment.jsstring"YYYY-MM"
monthCellContentRender自定义的月份内容渲染方法slot="monthCellContentRender" slot-scope="date, locale"-
renderExtraFooter在面板中添加额外的页脚slot="renderExtraFooter" slot-scope="mode"-
value(v-model)日期moment

MonthPicker 事件

事件名称说明回调参数
change时间发生变化的回调,发生在用户选择时间时function(date: moment, dateString: string)

WeekPicker

参数说明类型默认值
defaultValue默认日期moment-
defaultPickerValue默认面板日期moment
format展示的日期格式,配置参考 moment.jsstring"YYYY-wo"
value(v-model)日期moment-
renderExtraFooter在面板中添加额外的页脚slot="renderExtraFooter" slot-scope="mode"-

WeekPicker 事件

事件名称说明回调参数
change时间发生变化的回调,发生在用户选择时间时function(date: moment, dateString: string)

RangePicker

参数说明类型默认值
defaultValue默认日期moment[]
defaultPickerValue默认面板日期moment[]
disabledTime不可选择的时间function(dates: [moment, moment], partial: `'start''end'`)
format展示的日期格式string"YYYY-MM-DD HH:mm:ss"
ranges预设时间范围快捷选择{ [range: string]: moment[] } | { [range: string]: () => moment[] }
renderExtraFooter在面板中添加额外的页脚slot="renderExtraFooter" slot-scope="mode"-
separator设置分隔符string'~'
showTime增加时间选择功能Object|booleanTimePicker Options
showTime.defaultValue设置用户选择日期时默认的时分秒moment[][moment(), moment()]
value(v-model)日期moment[]

RangePicker 事件

事件名称说明回调参数
calendarChange待选日期发生变化的回调function(dates: [moment, moment], dateStrings: [string, string])
change日期范围发生变化的回调function(dates: [moment, moment], dateStrings: [string, string])
ok点击确定按钮的回调function(dates: moment[])

Released under the MIT License.