Datetime日期选择模块
Datetime模块可创建日期选择实例,支持单选或多选日期,也支持选择日期段,支持使用农历,支持自定义事件。
简单使用
对任意节点使用ax-datetime
属性即可表示一个日期选择器,不过通常是input
、textarea
、ax-input
和ax-textarea
节点,默认为当日的日期。
也可以通过id+new
的方式创建实例。
-
-
-
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 |
更新时间后回调 |