Datetime日期选择模块

Datetime模块可创建日期选择实例,支持单选或多选日期,也支持选择日期段,支持使用农历,支持自定义事件。

简单使用

对任意节点使用ax-datetime属性即可表示一个日期选择器,不过通常是inputtextareaax-inputax-textarea节点,默认为当日的日期。

  • 输出
  • HTML
  • 2024/02/06
  •                 
                    
                

也可以通过id+new的方式创建实例。

  • 输出
  • HTML
  • JS
  • 2024/02/06
  •                 
                    
                
  •                 
                    new ax.Datetime('#demo01');
                    new ax.Datetime('#demo02');
                    new ax.Datetime('#demo03');
                    
                

基础配置参数

属性 类型 默认值 说明
name string '' 目标节点的name属性
value string/Date '' 日期值,支持多种格式如:2022-2-3、2022/2/3或Date对象
disabled boolean false 是否禁用
size 'sm'/'md'/'lg'/'' '' 目标节点尺寸
format string '' 日期格式,如:YYYY-MM-DD、YYYY/MM/DD hh:mm:ss等
classes string '' 日期窗口的自定义样式类

显示模式参数

属性 类型 默认值 说明
mode 'single'/'multiple'/'range' 'single' 选择模式:单选/多选/区间
feature 'single'/'static' 'single' 特殊功能组合类型
display 'popup'/'inline'/'dialog'/'drawer' 'popup' 显示方式
toDrawer boolean true 手机端是否转为抽屉式显示
full boolean false 是否100%铺满容器

输入框配置

属性 类型 默认值 说明
multiline boolean false 是否启用多行显示
placeholder string config.lang.form.placeholder 输入框占位文本
label string '' 输入框标签文本
tools object {enable: false, children: ['close']} 工具箱配置

日期限制参数

属性 类型 默认值 说明
maxSelection number 100 最大选择数量(多选模式)
minDate string/Date '' 最小可选日期
maxDate string/Date '' 最大可选日期
datespan array [] 年月日有效时间跨度
timespan array [] 时间有效跨度

布局参数

属性 类型 默认值 说明
rows number 1 面板网格行数
cols number 1 面板网格列数
weekStart 'monday'/'sunday' 'monday' 周起始日
separator string ',' 多个日期的分隔符

按钮控制参数

属性 类型 默认值 说明
nowHide boolean false 点击"现在"按钮是否关闭窗口
nowShow boolean false 是否显示"现在"按钮
clearShow boolean true 是否显示"清除"按钮
closeShow boolean true 是否显示"关闭"按钮
cancelShow boolean false 是否显示"取消"按钮
confirmHide boolean true 点击确认按钮是否关闭窗口

自动化行为参数

属性 类型 默认值 说明
autoFill boolean false 是否自动填充选中值
manual boolean false 是否手动填值
autoCorrect boolean true 是否自动校正当前值
required boolean false 是否强制选择至少一个日期
fillNow boolean false 无值时是否自动填入今天

选择器参数

属性 类型 默认值 说明
btnSel string '' 触发按钮选择器
posSel string '' 定位节点选择器
inputSel string '' 输入输出节点选择器
childSel string '' 子节点选择器

扩展功能参数

属性 类型 默认值 说明
lunar object {enable: false, ...} 农历日期配置
events object {enable: false, ...} 事件指示功能配置
menu array [] 左侧工具面板配置
bubble object {} 弹窗参数配置
footer object {enable: true, layout: 'plain', children: ['clear', 'confirm']} 底部按钮配置

前置函数

属性 类型 默认值 说明
b4fill function null 填充值前回调
b4Remove function null 移除选中项前回调
b4Set function null 设置选中项前回调
b4Clear function null 清空选中项前回调
b4Cancel function null 取消前回调
b4Confirm function null 确认前回调

回调函数

属性 类型 默认值 说明
onFilled function null 填充值后回调
onRemoved function null 移除选中项后回调
onSetted function null 设置选中项后回调
onSettedRange function null 设置日期区间后回调
onCreatedPanels function null 创建新面板后回调
onCanceled function null 取消后回调
onConfirmed function null 确认后回调
onCleared function null 清除后回调
onOpened function null 显示后回调
onClosed function null 关闭后回调
onTransferred function null 转移节点后回调
onUpdatedTime function null 更新时间后回调