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>