时间插件My97DatePicker---时段选择
近日项目中有做到关于时段的内容,因为是时段需要对于起始时间与结束时间进行判断,于是就使用了My97DatePicker时间插件(同事推荐,因为看到我自己写的判断方法太low),下面就对My97DatePicker进行简单了解
首先给出插件网址My97时间控件 (这是楼主觉得最好看的皮肤)
首先进行简单配置
(1)下载WdatePicker.js(包括lang和skin文件夹)。
(2)在html页面中导入WdatePicker.js。
(3)在输入框input元素上加入class="Wdate" onFocus(或onclick)="WdatePicker({lang:'zh-cn'(等一系列属性用','分割)})"代码。
然后就开始我们的使用:
首先这个div中有两个input框分别为 1.开始时间、2.结束时间
1 <div id="existing" style="margin-top: 10px;margin-bottom: 10px;"> 2 开始时间:<input name="startTime" id="beg${status.index}" type="text" maxlength="20" 3 class="input-medium Wdate" required value="<fmt:formatDate value="${list.startTime}" pattern="HH:mm"/>" 4 onclick="WdatePicker({dateFmt:'HH:mm',isShowClear:true,maxDate:'#F{$dp.$D(\'end${status.index}\')}'});"/> 5 结束时间:<input name="endTime" id="end${status.index}" type="text" maxlength="20" 6 class="input-medium Wdate" required value="<fmt:formatDate value="${list.endTime}" pattern="HH:mm"/>" 7 onclick="WdatePicker({dateFmt:'HH:mm',isShowClear:true,minDate:'#F{$dp.$D(\'beg${status.index}\')}'});"/> 8 <input type="button" onclick="timeManagement(this)" class="btn btn-primary " value="删除"/> 9</div>
主要说下在WdatePicker内的各属性意义
1.dateFmt:限定在使用者在点击这个input框时日期控件是以一种什么格式出现的 HH:mm 就是--时:分(注大写的HH为24小时制,hh为12小时制),‘yyyy-MM-dd’则为年-月-日 这种形式,有灵活的可调控性
2.isShowClear:是一个清空按钮,点击直接清空日期,有这个属性控件中就会出现
3.maxDate(此属性用来控制时段):最大时间
4.minDate(此属性用来控制时段):最小时间
这个表达式是关键#F{$dp.$D()}:
把他拆分开分为:1.#F{ }、2.$dp.$D( )两部分
1.#F{ }在{}中可以自定义的js代码
2.$dp.$D( ):$dp.$相当于document.getElementById函数--获取id,没错就是在起始时间maxDate的$dp.$D( )中写入结束时间的id就行了!是不是很easy!但是记得id要被----\' \' 框住(注:id必须唯一,我写的花里胡哨是因为做的动态表单,id要有唯一标识)
更多的时间控制请前往这里继续深入学习~