DatePicker 日期选择
简介
H5当中对input应用type="date"（或者week、month、time、datetime和datetime-local）属性即可调用浏览器自带的日期控件，但是问题显而易见的是：各个浏览器对该属性的解释均有不同。为何保持统一的UI效果，做法有二：
1、对input追加ax-input样式，统一风格。
2、将type值写为text，并对该input应用datetime插件。
原生日期控件：
美化日期控件：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">原生日期控件：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="date"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">美化日期控件：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="date" class="ax-input"></div>
</div>
</div>
</div>
日期和时间选择器是项目开发中比较重要的控件，AXUI根据开发经验和常规用户需求开发了自己的日期和时间选择器，她即具备常用的日期时间单选多选功能，还支持多面板和农历显示，详细功能如下：
- 支持多种日期格式，content参数能接收Date类型或日期字符串
- 支持自定义输出日期格式，通过format参数自定义实现
- 支持单选、多选和区间选择三种模式
- 支持3种类型面板，分别是date、datetime、year、month和time
- 支持四种展示方式，通过display参数设置，默认popup方式
- 支持将输入控件、定位控件和按钮控件分开，也可以合体（input既是接收值的控件，又是定位popup的控件，也是打开popup的按钮）
- 使用弹性布局，可适配移动端
- 自动补零，如果传入的日期格式不完整，插件将自动补零，以确保输出完整的正确的日期格式
- 支持自动填充日期值，通过autoFill参数设置，点击日期网格或时间网格可将值自动填入input，不需要经过confirm按钮
- 支持自动填入今日时间作为初始值，通过fillNow参数设置
- 支持使用左侧menu菜单，通过menu参数进行设置，以实现某些快捷操作
- 支持启用右侧事件板块，通过event参数设置，显示事件的方式除了inline行内显示也可以以popup方式悬浮显示
- 支持三个清除关闭相关的按钮，分别是直接关闭按钮（close）、清除按钮（仅清除面板selected项）、取消按钮（等于前两个按钮之和）
- 时间面板中，selected时间定位在顶部，确保打开时间面板尽可能看到selected项
- 支持在使用农历同时，使用文字小标记，通过tags参数设置
- 可自定义农历显示内容的格式
- 使用参数nowClose设置点击“现在”按钮关闭窗口
- 可按需修改插件中使用的占位文字，通过language参数设置
- 如果以气泡的方式显示日期选择控件（popup/dialog/drawer），可通过rel参数，让更多按钮也能打开窗口
- 可设定可选日期或时间范围，超出不可选
使用方法
插件运行方式有两种：
- ax*属性：对input标签使用
axDate属性即可按默认参数运行插件。 - js实例：通过
new axDate('#ID')方式创建实例运行。
属性使用：
JS使用：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">属性使用：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" axDate></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">JS使用：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="jsUse"></div> </div> </div> </div> -
new axDate("#jsUse");
设置初始值
有三种方法设置初始值：
- 1、通过
content参数设置初始值，支持多种格式 - 2、对input直接使用
value属性赋值，插件自动将该值寸为selected值 - 3、通过
fillNow参数设为true将自动填入“今天”，并将“今天”作为selected值
注意：优先从content参数中取值，如果content为空则从input/div中取值，如果input/div也为空则取今天为值。
value：
content：
fillNow：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">value：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" value="2023-5-6" axDate></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">content：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="content:'2023-5-6'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">fillNow：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="fallNow:true"></div>
</div>
</div>
</div>
输出节点
本插件可输出的节点有两类，一是input，二是其他非表单类型标签，如div/span等。如果是input节点在点击“确定”之后会合并日期和事件为文本字符串赋值input；如果是div/span则会将文本字符串作为innerHTML写入div/span。
这是一个span标签，点击可对此赋值：2023-6-4
这是一个span标签，点击可对此赋值：<span axDate style="border:1px solid #ebebeb;padding:0 8px;">2023-6-4</span>
多面板
可通过cols参数和rows参数设置面板数量，默认cols:1，rows:1，即一个子面板。
需要注意的是，如果是range选择模式，并且此时cols:1，则cols将被强制设置2。
底部的按钮行会随着cols数变化而自动变化，cols为1时底部是线状按钮；cols>1时为左右布局的按钮。
对于非inline展示方式，建议rows<=2，否则会产生滚动条。< /p>
一行两列：
两行三列：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">一行两列：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="cols:2,rows:1"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">两行三列：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="cols:3,rows:2"></div>
</div>
</div>
</div>
选择模式
有三种选择模式，可通过mode参数进行设置，可设置single（单选）、multiple（多选）、range（区间），默认是single模式。
range模式会强制以两列面板方式展示。
单选：
多选：
区间：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">多选：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="mode:'multiple'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">区间：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="mode:'range'"></div>
</div>
</div>
</div>
日期格式
通过format设置输出文本格式，支持的格式如下：
- YYYY。该格式将启用year类型主面板
- YYYY-MM或YYYY/MM。该格式将启用month类型主面板
- YYYY-MM-DD或YYYY/MM/DD。该格式将启用date类型主面板
- YYYY-MM-DD hh:mm或YYYY/MM/DD hh:mm。该格式将启用date类型主面板，同时启用time选择副面板
- YYYY-MM-DD hh:mm:ss或YYYY/MM/DD hh:mm:ss。该格式将启用date类型主面板，同时启用time选择副面板
- hh:mm:ss。该格式将不启用主面板，但是启用time选择副面板
- hh:mm。该格式将不启用主面板，但是启用time选择副面板
- hh。该格式将不启用主面板，但是启用time选择副面板
注意：不支持YYYY-MM-DD hh格式，因为此类格式不能使用new Date()方法转成日期。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-6"><input placeholder="YYYY-MM-DD hh:mm:ss" type="text" axDate='format:"YYYY-MM-DD hh:mm:ss"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-6"><input placeholder="YYYY-MM-DD hh:mm" type="text" axDate='format:"YYYY-MM-DD hh:mm"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-6"><input placeholder="YYYY-MM-DD" type="text" axDate='format:"YYYY-MM-DD"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-6"><input placeholder="YYYY-MM" type="text" axDate='format:"YYYY-MM"'></div>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-6"><input placeholder="YYYY" type="text" axDate='format:"YYYY"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-6"><input placeholder="hh:mm:ss" type="text" axDate='format:"hh:mm:ss"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-6"><input placeholder="hh:mm" type="text" axDate='format:"hh:mm"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-6"><input placeholder="hh" type="text" axDate='format:"hh"'></div>
</div>
</div>
</div>
</div>
区间值
区间模式除了常用的区间日期，通过配置format参数，还可以使用区间月份、区间年份和区间时间。
区间日期+时间：
区间日期：
区间年份：
区间月份：
区间时间：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">区间日期+时间：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="mode:'range',format:'YYYY/MM/DD hh:mm:ss'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">区间日期：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="mode:'range',format:'YYYY/MM/DD'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">区间年份：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择年份" type="text" axDate="mode:'range',format:'YYYY'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">区间月份：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择月份" type="text" axDate="mode:'range',format:'YYYY/MM'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">区间时间：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择时间" type="text" axDate="mode:'range',format:'hh:mm:ss'"></div>
</div>
</div>
</div>
星期开始
日期面板默认以周一开始，可通过weekStart参数进行设置，支持两个值，分别是monday和sunday，默认是monday，可选择sunday即一周以周日开始。
星期日开始：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">星期日开始：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="weekStart:'sunday'"></div>
</div>
</div>
</div>
值类型
参照format格式，通过content参数设置日期值，比如format:'YYYY-MM-DD'，content应该设置类似“2023-5-6”的值。
- 文本格式。可填入任意使用new Date(content)方法不报错的字符串
- 单个日期，比如content:'2023-5-6'
- 多个日期，在mode:'multiple'模式下有效，多个日期用英文逗号隔开（与separator参数值相同），比如content:'2023-5-6,2023-5-8'
- 区间日期，在mode:'range'模式下有效，比如ccontent:'2023-5-6至2023-7-9'，其中的分隔符与language.range值相同，默认是“至”
- Date日期。传入的直接是一个Date对象
- 数组格式。在mode:'multiple'模式下有效，每一项的类型可以是单个日期字符串或Date类型数据
单个日期：
多个日期：
日期数组：
区间日期：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">单个日期：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="content:'2023-5-9'"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">多个日期：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="mode:'multiple',content:'2023-5-9,2023-5-12,2023-5-20'"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">日期数组：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="arrIns"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">区间日期：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="mode:'range',content:'2023-5-9至2023-5-12'"></div> </div> </div> </div> -
new axDate('#arrIns',{ mode:'multiple', content:['2023-5-8','2023-5-4',new Date(2023,4,23)] });
显示方式
使用display参数设置日期窗口的显示方式：
inline在input或div的下方显示popup定位气泡窗口显示（默认）dialog居中对话框显示drawer底部抽屉显示
inline：
popup：
dialog：
drawer：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">inline：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"inline"'></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">popup：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"popup"'></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">dialog：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"dialog"'></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">drawer：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"drawer"'></div>
</div>
</div>
</div>
如果需要修改popup、dialog和drawer的默认参数可通过bubble进行修改。bubble是个对象，写法跟写popup、dialog和drawer参数一样。
由于插件默认会在手机端中将popup/dialog都转为drawer显示，但是三者的参数不尽相同，所以可使用toDrawer:false参数禁止转drawer。
修改气泡参数：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">修改气泡参数：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="bubble"></div> </div> </div> </div> -
new axDate('#bubble', { autoFill:true, display:'dialog', toDrawer:false, bubble:{ overlay: false, title: '可以拖拽的日期选择窗口', titleBreak: true, drag: true, close: false, placement:'right-top', } });
另外在使用inline展示方式前提下，通过设置footerShow参数为false隐藏底部按钮可让其直接作为网页文本的一部分。
<div axDate="display:'inline',footerShow:false"></div>
弹性布局
日期选择控件默认是固定宽度以确保日期选择控件主体与普通的input文本框一样的宽度。不排除在inline显示方式下需要铺满整个容器，此时可设置flexible参数为true，此时整个日期选择控件将100%填满容器。
<input placeholder="选择日期" type="text" axDate='display:"inline",flexible:true'>
自动填入
默认点击日期网格会在插件内部保存当前selected值，但并不会直接赋值input，需要通过点击“确认”才会输出。为了实现快速的输出日期值，可设置autoFill参数为true，此后点击日期网格将自动合并时间并填入input当中；点击时间网格也会自动修改input中的值。
<input placeholder="选择日期" type="text" axDate='format:"YYYY/MM/DD hh:mm:ss",autoFill:true,'>
必选一项
默认可以不选择日期输出空值，但可通过forceSelect参数设为true，强制要求至少选一项。
<input placeholder="选择日期" type="text" axDate='format:"YYYY/MM/DD",forceSelect:true,mode:"multiple"'>
自动校验
插件在初始化或打开popup/dialog/drawer时会检测input的值或div中的文本，如果有则会将input值/div文本作为selected值刷新插件，可通过autoCorrect参数设为false取消校验，让input/div成为单向的接收元素。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">自动校验：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="correct01"></div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="correctBtn01">填入2023-8-6</a> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">不校验：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="correct02"></div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="correctBtn02">填入2023-8-6</a> </div> </div> -
let correctInput01 = document.querySelector('#correct01'), correctBtn01 = document.querySelector('#correctBtn01'); new axDate('#correct01'); correctBtn01.onclick = () => { correctInput01.value = '2023-8-6'; } let correctInput02 = document.querySelector('#correct02'), correctBtn02 = document.querySelector('#correctBtn02'); new axDate('#correct02', { autoCorrect: false, });
分步实现
如果对input或div直接绑定插件，那么input或div便既是输入/输出控件，也是气泡定位控件，同时也是打开气泡的按钮。对于axDate(arg01,arg02)插件的第一个参数arg01默认是作为输入/输出控件的，arg02中的buttonDom和positionDom参数分别是按钮控件和定位控件。arg01、buttonDom和positionDom支持#id，.className或其他能转成节点的格式，详细请点击这里。
positionDom如果不填，那么arg01将作为定位节点；buttonDom如果不填，那么arg01将作为按钮节点。
buttonDom可以是单个值也可以是数组，也就是说支持当页多个按钮都能打开一个日期的气泡窗，该参数与axPopup中的rel参数一致
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">三者分开：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="stepInput"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="stepPos">定位</a><a href="###" class="ax-form-btn ax-btn " id="stepBtn">打开</a> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">不使用定位：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="stepInput02"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="stepBtn02">打开</a><a href="###" class="ax-form-btn ax-btn " id="stepBtn03">再打开</a> </div> </div> -
new axDate('#stepInput', { positionDom: '#stepPos', buttonDom: '#stepBtn' }); new axDate('#stepInput02', { buttonDom: ['#stepBtn02','#stepBtn03'] });
点击“现在”赋值
参数nowShow设为true可显示“现在”按钮，nowClose参数控制点击“现在”按钮后的自动操作。将nowClose参数设为true，可使点击“现在”按钮赋值到input并关闭日期窗口；如果display=inline， 那么仅仅赋值并不会关闭日期面板，也就是nowClose参数对inline显示方式无效。
inline：
popup：
dialog：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">inline：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"inline",nowClose:true'></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">popup：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"popup",nowClose:true'></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">dialog：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"dialog",nowClose:true'></div>
</div>
</div>
</div>
使用“取消”按钮
此处的“取消”为清除并关闭气泡的意思。如果是以气泡显示日期默认启用清除按钮，但是点击清除按钮并不会关闭气泡，可通过cancelShow设为true可显示“取消”按钮，点击实现“清除并关闭”效果。
因为“取消”按钮和“清除”按钮功能重复，建议只保留一个。
popup：
dialog：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">popup：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"popup",clearShow:false,cancelShow:true'></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">dialog：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate='display:"dialog",clearShow:false,cancelShow:true'></div>
</div>
</div>
</div>
链式气泡
通过参数next可实现关闭本气泡时打开其他气泡，以方便连续编辑多个日期选择控件。next所填写的值为其他日期实例的insName参数。
需要注意的是，如果气泡类型是popup，由于其默认点击气泡以外区域也会关闭气泡，为了保证链式打开气泡需要关闭“点击气泡以外可关闭”的功能。设置bubble.pageClose参数为false即可。
链式popup：
链式drawer：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">链式popup：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input placeholder="哪天开会" type="text" axDate="insName:'mydate01',next:'mydate02',bubble:{pageClose:false,title:'选择开会日期'}"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="哪天聚餐" type="text" axDate="insName:'mydate02',next:'mydate03',bubble:{pageClose:false,title:'选择聚餐日期'}"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="哪天团建" type="text" axDate="insName:'mydate03',next:'mydate01',bubble:{pageClose:false,title:'选择团建日期'}"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">链式drawer：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input placeholder="哪天开会" type="text" axDate="insName:'mydate11',next:'mydate12',display:'drawer',bubble:{title:'选择开会日期'}"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="哪天聚餐" type="text" axDate="insName:'mydate12',next:'mydate13',display:'drawer',bubble:{title:'选择聚餐日期'}"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="哪天团建" type="text" axDate="insName:'mydate13',next:'mydate11',display:'drawer',bubble:{title:'选择团建日期'}"></div>
</div>
</div>
</div>
</div>
</div>
事件子面板
设置event相关参数可显示事件子面板。
enable：如果需要开启使用事件子面板需要将该参数设为truedisplay：事件子面板有两种展示方式，一是在日期面板右侧显示（inline）；二是以popup气泡形式显示，默认popuptemplate：在事件子面板显示事件内容模板，模板中变量以“<#this.variable#>”格式显示，模板中只有两个变量，分别是label和contentlist：事件列表；该参数是为对象数组，每一项的属性包括date、label和content
popup事件：
inline事件：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">popup事件：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="event01"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">inline事件：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="event02"></div> </div> </div> </div> -
new axDate('#event01', { content: '2023-4-5', display: 'inline', event: { enable: true, display: 'popup', //template: `<#this.label#><#this.content#>`, list: [ { date: '2023-4-11', label: '约朋友钓鱼', content: '人民公园西北角开辟有专门的钓鱼场，而且品质也不错。收费是40元/人。' }, { date: '2023-4-22', label: '跟老同学聚餐', content: '城中村中这家24小时营业的茶餐厅,以烧腊而闻名。' }, { date: '2023-4-27', label: '到图书馆借阅资料', content: '备考公务员，找些新闻类和文学类的资料看看。' }, ], }, }); new axDate('#event02', { content: '2023-4-5', display: 'inline', event: { enable: true, display: 'inline', //template: `<#this.label#><#this.content#>`, list: [ { date: '2023-4-11', label: '约朋友钓鱼', content: '人民公园西北角开辟有专门的钓鱼场，而且品质也不错。收费是40元/人。' }, { date: '2023-4-22', label: '跟老同学聚餐', content: '城中村中这家24小时营业的茶餐厅,以烧腊而闻名。' }, { date: '2023-4-27', label: '到图书馆借阅资料', content: '备考公务员，找些新闻类和文学类的资料看看。' }, ], }, });
农历节日
设置lunar相关参数可显示农历和农历节日。
enable：如果需要开启使用农历需要将该参数设为truehandler：框架本身没有集成公历转农历的插件，所以启用之后还需要配置农历处理函数，函数格式为handler:(year,month,date)=>{return solarToLunar(year,month,date);}，本页面所使用的是公历转农历插件详细请点击这里map：使用公历转农历插件返回的结果通常是一个JSON对象，该JSON对象会包含农历年、月、日、生肖等信息，需要通过map参数进行映射才可在模板中使用template：在事件子面板（event.enable:true）中显示农历的内容模板，模板中变量以“<#this.variable#>”格式显示，变量名来自map参数中的属性，例如<#this.animal#>会在模板中显示“农历生肖”arrange：由于面板特性，农历日期位置只能显示2~3个文字，而使用农历时，会存在农历日、节气、农历节日和公历节日重叠的问题，需要对他们进行优先排序；该参数是数组，越靠左越优先，默认值为['solarFestival', 'lunarFestival', 'term', 'date']tags：在开启农历面板后可使用tags，tags通常为一个length=1的字符串，滚动在单元格的右上角；该参数是为对象数组，每一项的属性包括date、content、props
只显示农历：
显示节日：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">只显示农历：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="lunar01"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">显示节日：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="lunar02"></div> </div> </div> </div> -
<script src="https://src.axui.cn/v2.0/dist/plugins/solar2lunar/v0.0.1/js-calendar-converter.js" type="text/javascript" charset="utf-8"></script> new axDate('#lunar01', { content: '2023-4-5', display: 'inline', lunar: { enable: true, handler: (...arguments) => { return calendar.default.solar2lunar(...arguments); }, map: { date: 'IDayCn' }, arrange: ['date'] } }); new axDate('#lunar02', { content: '2023-4-5', display: 'inline', lunar: { enable: true, handler: (...arguments) => { return calendar.default.solar2lunar(...arguments); }, map: { date: 'IDayCn', term: 'Term', solarFestival: 'festival', lunarFestival: 'lunarFestival' }, arrange: ['solarFestival', 'lunarFestival', 'term', 'date'] } });
如果开启了event事件子面板，那么将在event子面板中显示农历详细内容。
显示农历详细：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">显示农历详细：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="lunar03"></div> </div> </div> </div> -
<script src="https://src.axui.cn/v2.0/dist/plugins/solar2lunar/v0.0.1/js-calendar-converter.js" type="text/javascript" charset="utf-8"></script> new axDate('#lunar03', { content: '2023-4-5', display: 'inline', lunar: { enable: true, handler: (...arguments) => { return calendar.default.solar2lunar(...arguments); }, map: { animal: 'Animal', month: 'IMonthCn', date: 'IDayCn', gzYear: 'gzYear', gzMonth: 'gzMonth', gzDate: 'gzDay', term: 'Term', solarFestival: 'festival', lunarFestival: 'lunarFestival' }, arrange: ['solarFestival', 'lunarFestival', 'term', 'date'] }, event: { enable: true, display: 'inline', } });
启用农历之后便可使用tags参数，tags为一个对象数组，每一项均有以下三个属性：
date：日期，为字符串格式，例如“2023-5-6”或“2023/5/6”content：标记文本内容，通常是一个字符props：标记节点的属性，例如：props:{rest:''}
显示农历标记：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">显示农历标记：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="选择日期" type="text" id="lunar04"></div> </div> </div> </div> -
<script src="https://src.axui.cn/v2.0/dist/plugins/solar2lunar/v0.0.1/js-calendar-converter.js" type="text/javascript" charset="utf-8"></script> new axDate('#lunar04', { content: '2023-4-5', display: 'popup', lunar: { enable: true, handler: (...arguments) => { return calendar.default.solar2lunar(...arguments); }, map: { date: 'IDayCn', term: 'Term', solarFestival: 'festival', lunarFestival: 'lunarFestival' }, arrange: ['solarFestival', 'lunarFestival', 'term', 'date'], tags: [ { date: '2023-4-9', content: '休', props: { rest: '' } }, { date: '2023-4-10', content: '班', props: { work: '' } }, ], }, });
显示选中结果
如果需要在确认之前再检查所选择的日期或时间可实时显示selected的结果。通过设置参数resultShow为true即可开启。
显示结果：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">显示结果：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="resultShow:true,mode:'multiple'"></div>
</div>
</div>
</div>
可选择范围
参数minDate和maxDate可设置可选择的范围。两个参数为字符串类型，格式同format；Date类型亦可。
可选日范围：
可选日+时范围：
可选年范围：
可选月范围：
可选时间范围：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">可选日范围：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="content:'2023-8-12',format:'YYYY/MM/DD',minDate:'2023-8-10',maxDate:'2023-8-18'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">可选日+时范围：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="content:'2023-8-12 12:16:0',format:'YYYY/MM/DD hh:mm:ss',minDate:'2023-8-10 12:10:0',maxDate:'2023-8-18 19:40:0'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">可选年范围：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="content:'2023',format:'YYYY',minDate:'2020',maxDate:'2030'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">可选月范围：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="content:'2023/6',format:'YYYY/MM',minDate:'2023-2',maxDate:'2023-9'"></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">可选时间范围：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="选择日期" type="text" axDate="content:'14:12:0',format:'hh:mm:ss',minDate:'8:8:0',maxDate:'16:20:0'"></div>
</div>
</div>
</div>
快捷菜单
参数menu可设置快捷菜单，menu是对象数组，默认其length=0即不使用快捷菜单面板，如果需要使用快捷菜单面板需要至少添加一项。每一项包含的属性如下：
label：快捷菜单文字action：是函数，点击后的操作，函数内的变量和方法可参见下方
简单菜单：
复杂菜单：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">简单菜单：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="点击选择" value="" type="text" id="menu01"></div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">复杂菜单：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="点击选择" value="" type="text" id="menu02"></div> </div> </div> </div> -
new axDate('#menu01', { menu: [ { label: '弹出message', action: () => { new axMessage({ content: '伟大的中国！' }).show(); } }, { label: '关闭日期控件', action: function () { this.bubbleIns.hide(); } }, ] }); new axDate('#menu02', { format: 'YYYY/MM/DD hh:mm:ss', mode: 'range', menu: [ { label: '选中2023-5-15', action: function () { this.set('2023-5-15'); } }, { label: '不选中2023-5-15', action: function () { this.cancel('2023-5-15'); } }, { label: '日期推后两天', action: function () { this.offset({ DD: 2 }); } }, { label: '日期推前一个月', action: function () { this.offset({ MM: -1 }); } }, { label: '翻页到2030-1-1', action: function () { this.goto('2030-1-1'); } }, { label: '设置时间12:03:12', action: function () { this.setTime('12:03:12'); } }, { label: '设置区间', action: function () { this.setRange(['2030-2-3 05:12:08', '2030-2-16 12:08:26']); } }, { label: '清除所有', action: function () { this.clear(); } }, ] });
菜单+日期+事件
本示例展示具备菜单、日期、时间和事件的综合日期选择控件。
-
<input placeholder="行内显示日期" type="text" id="complete01"> <div class="ax-break"></div> <input placeholder="popup显示日期" type="text" id="complete02"> -
new axDate('#complete01', { content: '2023-4-5', display: 'inline', flexible: true, event: { enable: true, display: 'inline', list: [ { date: '2023-4-11', label: '约朋友钓鱼', content: '人民公园西北角开辟有专门的钓鱼场，而且品质也不错。收费是40元/人。' }, { date: '2023-4-22', label: '跟老同学聚餐', content: '城中村中这家24小时营业的茶餐厅,以烧腊而闻名。' }, { date: '2023-4-27', label: '到图书馆借阅资料', content: '备考公务员，找些新闻类和文学类的资料看看。' }, ], }, menu: [ { label: '弹出message', action: () => { new axMessage({ content: '伟大的中国！' }).show(); } }, { label: '选中今天', action: function () { this.now(false); } }, ] }); new axDate('#complete02', { content: '2023-4-5', event: { enable: true, display: 'inline', list: [ { date: '2023-4-11', label: '约朋友钓鱼', content: '人民公园西北角开辟有专门的钓鱼场，而且品质也不错。收费是40元/人。' }, { date: '2023-4-22', label: '跟老同学聚餐', content: '城中村中这家24小时营业的茶餐厅,以烧腊而闻名。' }, { date: '2023-4-27', label: '到图书馆借阅资料', content: '备考公务员，找些新闻类和文学类的资料看看。' }, ], }, menu: [ { label: '弹出message', action: () => { new axMessage({ content: '伟大的中国！' }).show(); } }, { label: '选中今天', action: function () { this.now(false); } }, ] });
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.selectedDatesProxy：data.selectedDates的代理this.content：修正初始值之后的数组this.raw：插件初始值，通常与this.content相等，只是raw在插件初始化之后便不会再改变this.inputDom：接收输出值的节点，通常是inputthis.positionDom：定位气泡的节点this.buttonDom：打开气泡的节点this.inputDom：接收输出值的节点，通常是inputthis.targetDom：实例总节点(ax-date)this.wrapperDom：实例wrapper节点this.menuDom：实例左侧菜单节点this.resultDom：实例selected结果节点this.outerDom：实例面板outer节点this.prevDom：实例左导航节点this.nextDom：实例右导航节点this.prevYearDom：实例上一年按钮节点this.prevMonthDom：实例上一月按钮节点this.nextYearDom：实例下一年按钮节点this.nextMonthDom：实例下一月节点this.mainDom：实例main节点，包含了面板和footerthis.panelsDom：实例面板节点this.footerDom：实例footer节点this.timeBtnWrapperDom：实例footer左侧节点this.handleBtnsWrapperDom：实例footer右侧节点this.confirmDom：实例“确认”按钮节点this.clearDom：实例“清除”按钮节点this.closeDom：实例“关闭”按钮节点this.cancelDom：实例“取消”按钮节点this.nowDom：实例“现在”按钮节点this.timeBtnDom：实例“选择时间”按钮节点this.yearSearchDom：实例年份搜索节点this.detailDom：实例右侧日期详细节点this.todayDom：实例右侧详细中的今日节点this.eventDom：实例右侧详细中的事件节点this.lunarDom：实例右侧详细中的农历节点this.detailIns：农历日期详细气泡实例this.resultIns：结果tags实例this.destroyed：销毁状态this.bubbleIns：气泡实例（axPopup/axDialog/axDrawer）this.data：实例的总数据，详细如下：startDate：面板初始日期（Date类型），面板将以此日期创建selectedDates：实例当前的selected日期，对象数组type：面板类型，分别date/datetime/year/month/time类型panels：面板数组，对象数组，可包含：yearDom、monthDom、year、month、listDom和list等属性menu：左侧菜单数组，每一项均包含label、actionyear：年选择面板对象，包含：panelDom、prevDom、nextDom、inputDom、goDom、listDom和list等属性month：月选择面板对象，包含：panelDom、listDom和list等属性time：时间选择面板对象数组，每项包含：value、panelDom、closeDom、resetDom、restoreDom、hh、mm和ss等属性
内部操作方法如下：
this.createPanels(dateObj, force = false, callback)：更新面板，支持三个参数：- dateObj：面板开始日期，支持三种格式，分别是日期字符串（2023-6-9）、Date类型（new Date()）和日期对象（{YYYY:'',MM:'',DD:''}）
- force：当dateObj已经出现在当前面板是否还要强制更新，默认false，可选择true强制更新
- callback：回调函数，创建新面板节点后执行，无参数
this.inCurPanels(dateObj, curGrids)：判断日期是否出现在当前面板，支持三个参数：- dateObj：当前日期，支持三种格式，分别是日期字符串（2023-6-9）、Date类型（new Date()）和日期对象（{YYYY:'',MM:'',DD:''}）
- curGrids：当前面板网格对象数组，可不填，不填则默认为当前面板网格对象数组
this.goto(dateObj, setSelected = false, callback)：跳转日期，无参数- dateObj：将跳转的日期，支持三种格式，分别是日期字符串（2023-6-9）、Date类型（new Date()）和日期对象（{YYYY:'',MM:'',DD:''}）
- setSelected：是否将日期设置为selected状态，默认false纯跳转，可选择true即跳转又selected
- callback：回调函数，跳转后执行，无参数
this.offset(dateObj, callback)：日期偏移，如果当前没有selected日期将以今日为基准进行偏移，参数说明如下：- dateObj：偏移量日期对象，格式为{YYYY:'',MM:'',DD:''}，正值表示推后，负值表示前移。比如{YYYY:1}表示日期推后1年；{YYYY:-1}表示日期前移1年
- callback：回调函数，偏移后执行，无参数
this.getCurGrids()：返回获得当前面板的网格对象数组（包含DOM和value）this.findFromPanels(dateObj)：从当前面板找到网格日期对象（包含DOM和value），dateObj支持多种格式：- 日期字符串：例如“2023-6-12”
- Date格式：例如new Date()
- 日期对象：例如{YYYY:2023,MM:2,DD:13}
- 数字索引：如果面板当前有selected日期，那么该参数等于selected数组的索引
this.setTime(timeObj, index = 0, update = false, callback)：设置时间面板，参数说明如下：- timeObj：时间对象或数组，包含hh、mm和ss属性，例如{hh:3,mm:14,ss:23}，如果是range模式，那么应该为数组，例如[{hh:3,mm:14,ss:23},{hh:17,mm:43,ss:5}]
- index：时间子面板的索引，默认为0，但是range模式将有两个时间子面板，如果需要设置第二个时间子面板则需要将index设为1，例如this.setTime({hh:17,mm:43,ss:5},1)
- update：修改时间后是否联动修改selectedDates，默认false不修改，可选择true修改
- callback：回调函数，设置时间后执行，无参数
this.confirm(hide, callback)：合并日期和时间并转为字符串填入input（“确认”按钮的动作），参数说明如下：- hide：是否关闭气泡，默认值随options.confirmToHide
- callback：回调函数，填入input后执行
this.now(hide, callback)：让今日时间变成selected状态（“今天”按钮的动作），参数说明如下：- hide：是否关闭气泡，默认值随options.nowToHide
- callback：回调函数，今日selected后执行，无参数
this.set(data, callback)：设置日期selected，参数说明如下：- data：日期对象或数组，支持格式如下：
- 一个日期字符串：例如“2023-6-13”
- 一个日期对象：例如“{YYYY:2023,MM:3,DD:12}”
- 一个Date对象：例如“new Date()”
- 一个日期数组：数组中每一项的格式可以使用以上三种
- callback：回调函数，设置selected后执行，支持一个参数即当前selected项
this.cancel(data, callback)：取消selected日期（与set相对），参数说明如下：- data：日期对象或数组，同set方法
- callback：回调函数，设置取消selected后执行，支持一个参数即当前取消selected项
this.setRange(data, callback)：设置日期区间，参数说明如下：- data：日期数组，length必须为2，每一项的格式可以是日期字符串、日期对象或Date对象
- callback：回调函数，设置日期区间后执行，支持一个参数即当前selected项
this.clear(resetTime = true, callback)：清除所有selected项，参数说明如下：- resetTime：清除selected项同时是否也让time面板归零，默认true，可选择false不归零
- callback：回调函数，清除所有selected后执行，无参数
this.update(setting,callback)：更新参数并重新渲染节点，参数说明如下：- setting：将要更新的参数，例如：setting={mode:'range',nowShow:true}
- callback：回调函数，无参数
this.destroy(callback)：销毁实例，支持回调函数，回调无参数this.save(setting,callback)：保存参数到本地（基于localstorage），参数说明如下：- setting：保存的参数，支持两种格式：
- 为空，将保持当前content的状态
- 对象格式，比如setting={mode:'range',nowShow:true}
- callback：回调函数，支持一个参数即localstorage值：
-
<input placeholder="选择日期" type="text" id="method"> <div class="ax-break"></div> <a href="###" class="ax-btn" id="createBtn">创建新面板(2029-3-6)</a> <a href="###" class="ax-btn" id="goBtn">跳转到(2026-6-15)</a> <a href="###" class="ax-btn" id="nowBtn">设置今天</a> <a href="###" class="ax-btn" id="forwardBtn">向后偏移1天</a> <a href="###" class="ax-btn" id="backwardBtn">向前偏移1天</a> <a href="###" class="ax-btn" id="timeBtn">设置时间(12:23:5)</a> <a href="###" class="ax-btn" id="selectBtn">设置多个日期(2023-6-2/2023-6-5)</a> <a href="###" class="ax-btn" id="cancelBtn">取消日期(2023-6-2)</a> <a href="###" class="ax-btn" id="fillBtn">input填入日期</a> <a href="###" class="ax-btn" id="clearBtn">清除所有日期</a> <a href="###" class="ax-btn" id="dataBtn">查看数据</a> -
let method = new axDate('#method', { display: 'inline', flexible: true, mode:'multiple', format:'YYYY/MM/DD hh:mm:ss' }), createBtn = document.querySelector('#createBtn'), goBtn = document.querySelector('#goBtn'), forwardBtn = document.querySelector('#forwardBtn'), backwardBtn = document.querySelector('#backwardBtn'), nowBtn = document.querySelector('#nowBtn'), timeBtn = document.querySelector('#timeBtn'), selectBtn = document.querySelector('#selectBtn'), cancelBtn = document.querySelector('#cancelBtn'), fillBtn = document.querySelector('#fillBtn'), clearBtn = document.querySelector('#clearBtn'), dataBtn = document.querySelector('#dataBtn'); createBtn.onclick = ()=>{ method.createPanels('2029-3-6'); } goBtn.onclick = ()=>{ method.goto('2026-6-15'); } forwardBtn.onclick = ()=>{ method.offset({DD:1}); } backwardBtn.onclick = ()=>{ method.offset({DD:-1}); } nowBtn.onclick = ()=>{ method.now(); } timeBtn.onclick = ()=>{ method.setTime({hh:12,mm:23,ss:5}); } selectBtn.onclick = ()=>{ method.set('2023-6-2,2023-6-5'); console.log('当前selected项',method.data.selectedDates); } cancelBtn.onclick = ()=>{ method.cancel('2023-6-2'); } fillBtn.onclick = ()=>{ method.confirm(); } clearBtn.onclick = ()=>{ method.clear(); } dataBtn.onclick = ()=>{ console.log('当前总数据',method.data); }
更新参数
通过使用update方法更新插件参数。该方法有两个参数：
- setting：将要更新的参数，格式：{content:'2023-6-5'}
- callback：回调函数，可不填
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">更新参数：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="点击选择" value="" type="text" id="update"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="updateBtn">修改mode</a> </div> </div> -
let update = new axDate('#update'), updateBtn = document.querySelector('#updateBtn'); updateBtn.onclick = () => { update.update({ mode: 'multiple', content: '2099-8-9 12:23:21', format: 'YYYY/MM/DD hh:mm:ss', nowShow: true, }); }
保存数据
因为主动或被动关闭了浏览器导致对实例的操作未结束，使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态，此状态包括active状态、disabled状态、内容增减状态以及其他参数状态（视插件而定）。
保存数据功能是基于this.save方法实现的，如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。
使用axLocalStorage.get方法来查看保存的数据，关于axLocalStorage用法可点击这里。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">保存数据：</div> <div class="ax-form-con"> <div class="ax-form-input"><input placeholder="点击选择" type="text" id="save"></div> </div> <a href="###" class="ax-form-btn ax-btn" id="saveBtn">查看数据</a> <a href="###" class="ax-form-btn ax-btn" id="saveupdateBtn">更新参数</a> </div> </div> -
let save = new axDate('#save', { storageName: 'mystorage01', mode: 'multiple' }); saveBtn = document.querySelector('#saveBtn'), saveupdateBtn = document.querySelector('#saveupdateBtn'); saveBtn.onclick = () => { console.log('当前保存的selected数据', save.data.selectedDates) } saveupdateBtn.onclick = () => { save.update({ mode: 'single', resultShow:true, content: '2099-8-9 12:23:21', format: 'YYYY/MM/DD hh:mm:ss', nowShow: true, }); }
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<ul class="ax-menu" id="insDestroy"></ul> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a> <a href="###" class="ax-btn ax-primary" id="btnInit">再次启用</a> -
let treeData = [{ id: 1, label: '北京市', children: [{ id: 2, label: '朝阳区' }, { id: 3, label: '丰台区' }, { id: 4, label: '海淀区' }] }, { id: 5, label: '广东省', children: [{ id: 6, label: '广州市' }, { id: 7, label: '深圳市', children: [{ id: 8, label: '福田区' }, { id: 9, label: '龙岗区' }] }] }, { id: 10, label: '上海市', children: [{ id: 11, label: '黄浦区', }, { id: 12, label: '徐汇区', }, { id: 13, label: '长宁区', }] }, { id: 14, label: '重庆市' }]; let insDestroy = new axMenu('#insDestroy', { //演示页面避免重复修改原数组，故先复制 content: axClone(treeData), }), btnDestroy = document.querySelector('#btnDestroy'), btnInit = document.querySelector('#btnInit'); btnDestroy.onclick = function () { insDestroy.destroy(function () { alert('销毁了实例！'); }); } btnInit.onclick = function () { insDestroy.init(); alert('重新初始化了实例！'); console.log('查看初始化数据：'); console.log(insDestroy.flatData); console.log(insDestroy.treeData); }
在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名insName，那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里。
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit/init初始化后执行，无参数onClear/clear清除所有selected后执行，无参数onCancel/cancel取消selected后执行，支持一个参数即取消项onRanged/ranged成功设置日期区间后后执行，支持一个参数即当前selected项onSet/set设置selected项后后执行，支持一个参数即当前selected项onConfirm/confirm合并日期时间填入input后执行，支持一个参数即填入文本onSetTime/setTime设置时间后执行，支持一个参数即当前时间对象onCreatePanels/createPanels更新面板后执行，无参数onUpdated/updated参数更新后执行，无参数onSave/save保存数据后执行，支持一个对象即保存的数据onDestroy/destroy销毁后执行，无参数
另外this.resultIns使用了axTag插件，this.bubbleIns使用axPopup/axDialog/axDrawer插件，也是可以对这些插件实例进行监听的。
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<input placeholder="选择日期" type="text" id="on"> -
let onIns = new axDate('#on', { mode: 'range', format: 'YYYY/MM/DD hh:mm:ss' }); onIns.on('createPanels',()=>{ console.log('面板创建好了！'); }).on('set',(v)=>{ console.log('设置了值！',v); }).on('ranged',(v)=>{ console.log('完成了区间了！',v); }).on('clear',()=>{ console.log('selected项全部清除了！'); }).on('setTime',(v)=>{ console.log('设置了时间！',v); }).on('confirm',(v)=>{ console.log('合并值填入了input！',v); });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axDate('#id',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
storageName: '',//存储名称，字符串格式；如果需要保存实例当前数据请设定唯一的值，比如：storageName:'mystorage001'
content: '',//日期字符串或对象，支持写法如：2022-2-3,2022/2/3，new Date(2022,2,3)，如果为空则取当前日期
format: 'YYYY/MM/DD',//面板类型，默认YYYY/MM/DD，可选择YYYY、YYYY/MM（或-）、YYYY/MM/DD（或-）、YYYY/MM/DD hh:mm（或-）、YYYY/MM/DD hh:mm:ss（或-）、hh:mm:ss、hh:mm、hh
mode: 'single',//selected模式，默认single单选模式，可选择multiple多选模式或range区间模式
maxSelection: 100,//最大选择数量，对multiple:true有效，默认可选中100项
rows: 1,//面板网格显示几行，默认1行，注意非inline展示方式建议rows<=2，否则会产生滚动条
cols: 1,//面板网格显示几列，默认1列
minDate: '',//设置可选的最小日期，小于将禁止操作，日期字符串类型或Date类型，字符串类型则与format格式一致
maxDate: '',//设置可选的最大日期，大于将禁止操作，日期字符串格式或Date格式，字符串类型则与format格式一致
flexible: false,//是否让整个日期选择控件100%铺满容器，默认false，可选择true允许
footerShow: true,//是否显示日期选择控件的底部按钮部分，默认true显示，可选择false不显示
nowToHide: false,//非inline显示状态，点击现在按钮是否关闭窗口，默认false，可选择true
nowShow: false,//底部是否显示“现在”按钮，默认false不显示，可选择true显示
clearShow: true,//底部是否显示“清除”按钮，默认false不显示
closeShow: true,//底部是否显示“关闭”按钮，默认true显示
cancelShow: false,//是否显示“取消”按钮，默认false不显示，该按钮将实现clear+close两者的功能
resultShow: false,//是否在头部显示选中结果，默认不显示，可选择true显示选中结果
confirmToHide: true,//点击确认按钮是否关闭窗口，默认true直接关闭，可选择false手动关闭
autoFill: false,//点击面板网格，面板中的selected值是否自动填充到input，默认false不自动而是通过“确认”按钮填充
autoCorrect: true,//对于非inline展示方式是否需要重新打开时从input/div中读取值作为当前的selected值，默认true自动校正，可选择false不处理
forceSelect: false,//点击确认按钮是否需要强制选择至少一个日期，默认false，可选择true
language: {
month: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],//月份数字表示
week: ['一', '二', '三', '四', '五', '六', '日'],//星期文字表示
year: {//年份下拉框的文字
prev: '上一页',
next: '下一页',
placeholder: '输入年份',
},
range: '至',//区间日期选择的连接文字
unit: {//日期单位表示
Y: '年',
M: '月',
D: '日',
h: '时',
m: '分',
s: '秒',
},
time: {//时分秒选择面板文字
select: '时间选择',
start: '开始时间',
end: '结束时间'
},
button: {//底部按钮文字
clear: '清除',
close: '关闭',
cancel: '取消',
now: '现在',
confirm: '确定',
},
toolTip: {
restore: '还原',
reset: '归零',
now: '现在',
close: '关闭',
},
empty: '还未选择日期!',//结果展示框中为空时默认文字
message: {
requireTwoValue: '区间模式至少需要选择两个日期！',
requireYearFormat: '请填入3或4位年份数字!',
requireOneSelected: '请至少选择一个日期!',
},
noEvent: '今天没有需要安排的事项!',
},
weekStart: 'monday',//一周以周几开始，默认monday即以周一开始，可选择sunday即周日
separator: ',',//输出或输入多个日期的分隔符，默认是英文逗号
buttonDom: '',//打开日期popup或dialog的按钮节点，#id/.classname/DIV或DOM节点
positionDom: '',//定位日期的节点，#id/.classname/DIV或DOM节点
display: 'popup',//显示日期的方式，默认popup气泡小窗显示，可选择inline行内显示、dialog对话框或drawer显示
bubble: {},//popup或dialog的参数
fillNow: false,//如果input没有值，而且content为空，是否以今天作为初始值，默认false不允许，可填true自动填入
next: '',//关闭气泡后将要打开的其他气泡，该参数填写当页的其他气泡的实例名（insName）
lunar: {
enable: false,//是否启用农历日期，默认false不启用，可选择true启用
handler: '',//公历转农历函数，最终返回JSON对象
map: {},//属性映射，常用属性包括animal、month、date、gzYear、gzMonth、gzDate、term、lunarFestival、solarFestival
template: `农历：<#this.animal#>年 <#this.month#><#this.date#>
干支：<#this.gzYear#>年 <#this.gzMonth#>月 <#this.gzDate#>日
节日/节气：<#this.term#> <#this.lunarFestival#> <#this.solarFestival#>
`,//事件容器中显示的内容模板，模板中的变量与map中的属性对应
arrange: ['solarFestival', 'lunarFestival', 'term', 'date'],//单元格中农历位置显示内容的顺序，默认顺序是：如果当天是公历节日则显示公历节日，否则判断是否有农历节日，以此类推
tags: [],//日期单元格右上角显示一个字符，比如“休”或“班”，每一项的属性包括date、content、props
},
event: {
enable: false,//是否显示事件指示功能，默认false不显示，可选择true显示，开启后events.length>0时在日期中以小点表示
display: 'popup',//显示事件的方式，默认popup即气泡方式展示事件，可选择inline的方式以固定面板的方式展示
template: `<#this.label#><#this.content#>`,
list: [],//事件列表数组，每一项的属性有date、label和content
},
menu: [],//是否显示左侧工具面板，其length==0表示不显示，每一项的格式为{label:'',action:()=>{}}
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，初始化后执行，无参数
onClear: '',//回调函数，清除所有selected项后执行，无参数
onSet: '',//回调函数，设置selected后执行，支持一个参数即设置日期对象（数组）
onSetRange: '',//回调函数，设置日期区间后执行，支持一个参数即设置日期对象（数组）
onCreatePanels: '',//回调函数，创新面板（刷新面板）后执行，无参数
onCancel: '',//回调函数，移除selected项并关闭气泡后执行，支持一个参数即设置日期对象（数组）
onConfirm: '',//回调函数，合并日期时间填入input后执行，支持一个参数即填入文本
onSetTime: '',//回调函数，设置时间后执行，支持一个参数即当前时间对象
onUpdate: '',//回调函数，参数更新后执行，无参数
onDestroy: '',//回调函数，销毁后执行，无参数
onSave: '',//回调函数，保存数据后执行，支持一个参数即localstorage值
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"