DatePicker 日期选择器

在线预览

Maker

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

JSON

  1. {
  2.     type: "DatePicker",
  3.     field: "section_day",
  4.     title: "活动日期",
  5.     value: ['2018-02-20', new Date()], 
  6.     props: {
  7.         "type": "datetimerange",
  8.         "format": "yyyy-MM-dd HH:mm:ss", 
  9.         "placeholder":"请选择活动日期", 
  10.     }
  11. }

参考:iview2.x | iview3.x

value: String | Array

props

属性 说明 类型 默认值
type 显示类型，可选值为 date、daterange、datetime、datetimerange、year、month String date
format 展示的日期格式 Date **date \ daterange： yyyy-MM-dddatetime \ datetimerange： yyyy-MM-dd HH:mm:ssyear：yyyymonth**：yyyy-MM
placement 日期选择器出现的位置，可选值为top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end，2.12.0 版本开始支持自动识别 String bottom-start
placeholder 占位文本 String 空
options 选择器额外配置，比如不可选日期与快捷选项，具体项详见下表 Object -
split-panels 开启后，左右面板不联动，仅在 daterange 和 datetimerange 下可用。 Boolean false
multiple 开启后，可以选择多个日期，仅在 date 下可用。 Boolean false
show-week-numbers 开启后，可以显示星期数。 Boolean false
start-date 设置默认显示的起始日期。 Date -
confirm 是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭 Boolean false
open 手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用 Boolean null
size 尺寸，可选值为large、small、default或者不设置 String -
disabled 是否禁用选择器 Boolean false
clearable 是否显示清除按钮 Boolean true
readonly 完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效 Boolean false
editable 文本框是否可以输入，只在没有使用 slot 时有效 Boolean true
transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
element-id 给表单元素设置 id，详见 Form 用法。 String -
time-picker-options 可以在 type 为 datetime 和 datetimerange 下，配置 TimePicker 的属性，比如时间间隔 steps：:time-picker-options="{steps: [1, 10, 10]}" Object {}
separator 3.3.0 两个日期间的分隔符 String -

Props.options

选择器额外配置

属性 说明 类型 默认值
shortcuts 设置快捷选项，每项内容：**text \ String：显示的文案value \ Function：返回指定的日期，如需自己控制逻辑，可不设置，并使用 onClick 回调onClick \ Function**：点击时的回调，参数为当前日期选择器的 Vue 实例，当需要自定义复杂操作时，可以使用 Array -
disabledDate 设置不可选择的日期，参数为当前的日期，需要返回 Boolean 是否禁用这天 Function -

on 事件

事件名 说明 返回值
on-change 日期发生变化时触发 返回两个值，已经格式化后的日期，比如 2016-01-01，和当前的日期类型，比如 date
on-open-change 弹出日历和关闭日历时触发 true \ false
on-ok 在 confirm 模式下有效，点击确定按钮时触发 -
on-clear 在 confirm 模式或 clearable = true 时有效，在清空日期时触发 -
on-clickoutside 3.4.0 点击外部关闭下拉菜单时触发 event