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>
在浏览国内外datetime插件中意外发现了jeDate插件，详见官网演示或Github，本框架使用版本是v6.5.0。虽然该插件的用户不多，而且还存在一些BUG，但是好在该插件功能比较全面，在修改之后还是比较好用的。本框架做了如下修改：
- 修改了整体dom结构，重新定义了css
- 增加左侧快速按钮点击后保持高亮
- 美化了整体界面
- 修改两种按钮模式，在双面板和单面板情况下自动使用不同的按钮
- 支持axDate=*使用参数
- 对使用axDate属性的元素均可启用插件
- 使用弹性布局，可适配移动端
- 增加关闭按钮（仅仅是关闭不清除），并增加相应的参数：closeFun和languge（close），closeBtn和clearBtn二者只能选其一
- 修改默认关闭按钮为close，而不是clear
- 增加时间段选择的起点终点类名：ax-start和ax-end，以便于控制风格
- 当公历农历共存的时候给窗口追加上ax-with-calendar类名
- 图标均换成ax框架自带的图标库
- 修改加载页面即刻渲染日期dom
- 增加mode参数，打开日期的方式为三种：inline，popup和dialog
- isShow=false和mode=inline强制不使用关闭按钮（可以使用清除按钮）
- 选择时间初始定位在顶部，而不是中部，点击选择不再强制跳转
- 插件实例一律给dom添加随机id
- 修改点击“现在”无法在日期控件中定位问题
- 新增参数nowClose，设置点击“现在”按钮是否关闭窗口，默认false，对mode=inline做了特别处理
- 农历小窗改为气泡显示，去掉多余style
- 错误提示使用axMessage表示
- 新增rel参数，让其他按钮也能打开窗口
使用方法
插件运行方式有两种：
- ax*属性：对input标签使用
axDate属性即可按默认参数运行插件。 - js实例：通过
new axDate('#ID')方式创建实例运行。
属性使用：
JS使用：
除了通过axTab属性方式运行tab切换，也可以使用js运行tab切换。
-
<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");
显示方式
使用mode参数设置日期窗口的显示方式：
inline在input的下方显示popup气泡窗口显示（默认）dialog对话框显示
inline：
popup：
dialog：
另外通过设置原插件的isShow参数为false也算一种展示方式，该显示效果将直接作为网页文本的一部分。
-
<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='mode:"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='mode:"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='mode:"dialog"'></div> </div> </div> </div> <div id="isShow"></div> -
new axDate("#isShow", { isShow:false, });
点击“现在”赋值并关闭
nowClose参数控制点击“现在”按钮后的自动操作。将nowClose参数设为true，可使点击“现在”按钮赋值到input并关闭日期窗口；如果mode=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='mode:"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='mode:"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='mode:"dialog",nowClose:true'></div>
</div>
</div>
</div>
日期类型
通过设置format参数改变日期的格式。日期格式如下：
- YYYY-MM-DD hh:mm:ss 或者 MM-DD-YYYY hh:mm:ss 或者 MM/DD/YYYY hh:mm:ss
- YYYY-MM-DD hh:mm 或者 MM-DD-YYYY hh:mm 或者 MM/DD/YYYY hh:mm
- YYYY-MM-DD hh 或者 MM-DD-YYYY hh 或者 MM/DD/YYYY hh
- YYYY-MM-DD 或者 MM-DD-YYYY 或者 MM/DD/YYYY
- YYYY-MM
- YYYY
- hh:mm:ss
- hh:mm
- hh
- YYYY-MM-DD hh:zz (zz等于00)
- hh:zz (zz等于00)
<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-8"><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-8"><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-8"><input placeholder="YYYY-MM-DD hh" type="text" axDate='format:"YYYY-MM-DD hh"'></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-8"><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-8"><input placeholder="hh:mm" type="text" axDate='format:"hh:mm"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="hh" type="text" axDate='format:"hh"'></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-8"><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-8"><input placeholder="YYYY-MM" type="text" axDate='format:"YYYY-MM"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="YYYY" type="text" axDate='format:"YYYY"'></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-8"><input placeholder="YYYY-MM-DD hh:zz" type="text" axDate='format:"YYYY-MM-DD hh:zz"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="hh:zz" type="text" axDate='format:"hh:zz"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"></div>
</div>
</div>
</div>
</div>
农历节日
设置festival参数为true即可显示农历和节日。
inline：
popup：
<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='mode:"inline",festival: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='mode:"popup",festival:true'></div>
</div>
</div>
</div>
双面板操作
通过设置multiPane参数为false即可显示双面板。在双面板更方便操作日期段选择。
<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='multiPane:false,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" type="text" axDate='multiPane:false,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='multiPane:false,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-8"><input placeholder="YYYY" type="text" axDate='multiPane:false,format:"YYYY"'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="左侧快速选择" type="text" id="leftBtn"></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="YYYY-MM-DD hh:mm:ss区间选择" type="text" axDate='multiPane:false,format:"YYYY-MM-DD hh:mm:ss",range:" 至 "'></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-8"><input placeholder="YYYY区间选择" type="text" axDate='multiPane:false,format:"YYYY",range:" 至 "'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="YYYY-MM区间选择" type="text" axDate='multiPane:false,format:"YYYY-MM",range:" 至 "'></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input placeholder="YYYY-MM-DD区间选择" type="text" axDate='multiPane:false,format:"YYYY-MM-DD",range:" 至 "'></div>
</div>
</div>
</div>
</div>
区域外打开
在原插件基础上增加了rel参数，通过该参数可点击input之外的区域打开日期窗口。该参数可以是#id，dom对象或者数组。
- string，按钮的ID，比如rel:'#outBtn'
- Object，按钮的dom节点，比如rel:document.querySelector('#outBtn')
- Array，多个按钮，比如rel:["#btnA","#btnB",document.querySelector('#outBtn')]
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">input外选择：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input placeholder="点击选择" value="" type="text" axDate='rel:"#outBtn"'></div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary" id="outBtn">打开</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="点击选择" value="" type="text" axDate='rel:["#btnA","#btnB"]'></div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary" id="btnA">打开</a>
<a href="###" class="ax-form-btn ax-btn ax-primary" id="btnB">也可打开</a>
</div>
</div>