日期选择

选择日期。

概念说明

属性

组件通用属性请参见组件通用说明。

• 值：当前选择的值。
• 最小日期：设置日期范围，支持输入的最小日期，
• 最大日期：设置日期范围，支持输入的最大日期。
• 只读：正常显示，但禁止选择或输入。
• 禁用：置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。
• 弹出状态：开启时加载日期组件时，下拉框自动弹出，默认关闭。
• 自动获取焦点：控制是否在进入页面时聚焦到该组件。
• 默认提示文字：日期选择框无内容时的提示信息，支持自定义编辑，默认为请输入。
• 清除按钮：控制是否显示清除按钮，支持一键清除所选内容。
• 日历弹窗对齐方式：日期选择弹出层与输入框的对齐方式，支持左对齐、右对齐2种模式。默认为左对齐。
• 最小可选年份与当前年份的差值：设置日期范围，最小可选择的年份。
• 最大可选年份与当前年份的差值：设置日期范围，最大可选择的年份。
• 转换器：用于转换选中的日期格式，支持JSON、Unix 时间戳、Date对象、YYYY-MM-DD共4种模式。默认YYYY-MM-DD。
• 格式：日期选择弹出层里的日期展示格式，支持日期、月份、季度、年份4种模式。默认日期格式。
• 前缀图标：支持添加前缀图标，如搜索图标。
• 后缀图标：支持添加后缀图标，如搜索图标。
• 宽度：设置日期选择框宽度大小，支持占满、巨大、大、中型、正常、小共6种模式。
• 高度：设置日期选择框高度大小，支持占满、巨大、大、中型、正常、小共6种模式。
• 弹出层展示位置：设置弹出层添加到哪个元素。

事件

• 日期选择组件支持鼠标事件和组件事件。

  • 鼠标事件

    事件名	触发条件
    失去焦点	鼠标指针点击其他区域，组件失去焦点时

  • 组件事件

    事件名	触发条件
    值输入时	值变化时
    值变化时	值变化时
    选择时	选择日期时
    弹出/隐藏时	日期下拉弹窗打开/关闭时

样式

样式说明请参见组件通用说明。

主题样式

• pre-icon-color：日期选择器前缀图标颜色，如：#223325。默认值#ccc。
• after-icon-color：日期选择器后缀图标颜色，如：#223325。默认值#ccc。
• border-color：日期选择器输入框边框颜色，如：#223325。默认值#e5e5e5。
• border-width：日期选择器输入框边框宽度，如：1px。默认值1px。
• color：日期选择器输入框字体颜色，如：#223325。默认值#333。
• background：日期选择器输入框背景颜色，如：#223325。默认值white。
• border-radius：日期选择器输入框圆角，如：1px。默认值4px。
• background-disabled：日期选择器输入框背景颜色（禁用状态），如：1px。默认值#F7F8FA。
• border-color-error：日期选择器输入框边框颜色（错误状态），如：1px。默认值#F24957。
• border-color-focus：日期选择器输入框边框颜色（选中状态），如：1px。默认值#4c88FF。
• box-shadow-focus：日期选择器输入框边框阴影（选中状态），默认值0 0 0 2px rgba(77, 136, 255, 0.2)。
• placeholder-color：日期选择器输入框提示字体颜色名，如：#223325。默认值#ccc。
• popper-box-shadow：日期选择弹出层边框阴影，默认值0 0 4px rgba(3, 3, 3, .1)。
• popper-border-radius：日期选择弹出层边框圆角，默认值4px。
• width：日期选择器输入框宽度，如：1px，默认值240px。
• height：日期选择器输入框高度，如：1px，默认值32px。
• padding-x：日期选择器输入框水平内边距，如：1px。默认值10px。