DatePicker 日期选择器

Maker

$formCreate.maker.date('活动日期','section_day',['2018-02-20', new Date()]).props({
    "type": "datetimerange",
    "placeholder":"请选择活动日期"
})

JSON

{
    type: "DatePicker",
    field: "section_day",
    title: "活动日期",
    value: ['2018-02-20', new Date()],
    props: {
        "type": "datetimerange",
        "format": "yyyy-MM-dd HH:mm:ss",
        "placeholder":"请选择活动日期",
    }
}

参考:Element_DatePicker,Element_DateTimePicker

value: String | Array

DatePicker

props

参数 说明 类型 可选值 默认值
readonly 完全只读 boolean false
disabled 禁用 boolean false
editable 文本框可输入 boolean true
clearable 是否显示清除按钮 boolean true
size 输入框尺寸 string large, small, mini
placeholder 非范围选择时的占位内容 string
startPlaceholder 范围选择时开始日期的占位内容 string
endPlaceholder 范围选择时结束日期的占位内容 string
type 显示类型 string year/month/date/dates/ week/datetime/datetimerange/daterange date
format 显示在输入框中的格式 string 日期格式 yyyy-MM-dd
align 对齐方式 string left, center, right left
popperClass DatePicker 下拉框的类名 string
pickerOptions 当前时间日期选择器特有的选项参考下表 object {}
rangeSeparator 选择范围时的分隔符 string '-'
defaultValue 可选,选择器打开时默认显示的时间 Date 可被new Date()解析
defaultTime 范围选择时选中日期所使用的当日内具体时刻 string[] 数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻,不指定会使用时刻 00:00:00
valueFormat 可选,绑定值的格式。不指定则绑定值为 Date 对象 string 日期格式
name 原生属性 string
unlinkPanels 在范围选择器里取消两个日期面板之间的联动 boolean false
prefixIcon 自定义头部图标的类名 string el-icon-date
clearIcon 自定义清空图标的类名 string el-icon-circle-close
validateEvent 输入时是否触发表单的校验 boolean - true

Picker Options

参数 说明 类型 可选值 默认值
shortcuts 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 Object[]
disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean Function
firstDayOfWeek 周起始日 Number 1 到 7 7
onPick 选中日期后会执行的回调,只有当 daterangedatetimerange 才生效 Function({ maxDate, minDate })

events

事件名称 说明 回调参数
change 用户确认选定的值时触发 组件绑定值。格式与绑定值一致,可受 value-format控制
blur 当 input 失去焦点时触发 组件实例
focus 当 input 获得焦点时触发 组件实例

DateTimePicker

props

参数 说明 类型 可选值 默认值
readonly 完全只读 boolean false
disabled 禁用 boolean false
editable 文本框可输入 boolean true
clearable 是否显示清除按钮 boolean true
size 输入框尺寸 string large, small, mini
placeholder 非范围选择时的占位内容 string
startPlaceholder 范围选择时开始日期的占位内容 string
endPlaceholder 范围选择时结束日期的占位内容 string
timeArrowControl 是否使用箭头进行时间选择 boolean false
type 显示类型 string year/month/date/week/ datetime/datetimerange/daterange date
format 显示在输入框中的格式 string 日期格式 yyyy-MM-dd
align 对齐方式 string left, center, right left
popperClass DateTimePicker 下拉框的类名 string
pickerOptions 当前时间日期选择器特有的选项参考下表 object {}
rangeSeparator 选择范围时的分隔符 string - '-'
defaultValue 可选,选择器打开时默认显示的时间 Date 可被new Date()解析
defaultTime 选中日期后的默认具体时刻 非范围选择时:string / 范围选择时:string[] 非范围选择时:形如12:00:00的字符串;范围选择时:数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻。不指定会使用时刻 00:00:00
valueFormat 可选,绑定值的格式。不指定则绑定值为 Date 对象 string 日期格式
name 原生属性 string
unlinkPanels 在范围选择器里取消两个日期面板之间的联动 boolean false
prefixIcon 自定义头部图标的类名 string el-icon-date
clearIcon 自定义清空图标的类名 string el-icon-circle-close

Picker Options

参数 说明 类型 可选值 默认值
shortcuts 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 Object[]
disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean Function
firstDayOfWeek 周起始日 Number 1 到 7 7

events

事件名称 说明 回调参数
change 用户确认选定的值时触发 组件绑定值。格式与绑定值一致,可受 value-format 控制
blur 当 input 失去焦点时触发 组件实例
focus 当 input 获得焦点时触发 组件实例