时间插件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               οnclick="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               οnclick="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要有唯一标识)

更多的时间控制请前往这里继续深入学习~

 

转载于:https://www.cnblogs.com/zlxyh/p/7216446.html