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')]
input外选择:
打开
多个按钮打开:
打开 也可打开
                            <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>