前端常用插件之calender日历控件
最近，发现一个插件——简单好用的页面日历控件，个人觉得有必要与大家分享一下，它就是calender日历控件。
- 准备环境：
- Bootstrap文件：bootstrap.min.css和bootstrap.min.js
- jQuery文件：jquery-1.11.3.min.js
- calendar文件：WdatePicker.js(核心)和其他相关文件
这里文件网上都有（尽量用最新版本），大家可以自行下载。
2. 代码实现：
需求：查询用户信息。
Html代码：
<!DOCTYPE html>
<head>
<title>查询用户信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div style="margin-left: 20px;width: 700px;">
<h4>查询用户信息</h4>
<hr>
<form class="form-inline">
<label class="control-label">开始时间</label>
<input id="start-time" name="startDate" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd', el:'start-time', maxDate:'#F{$dp.$D('end-time')}'})" type="text" readonly="readonly" style="width: 188px;cursor: pointer;">
<label class="control-label">结束时间</label>
<input id="end-time" name="endDate" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd', el:'end-time', minDate:'#F{$dp.$D('start-time')}'})" type="text" readonly="readonly" style="width: 188px;cursor: pointer;">
</form>
<table class="table table-bordered">
<thead>
<tr>
<th>用户编号</th>
<th>用户姓名</th>
<th>添加时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>aaa</td>
<td>2018-01-01 10:01:22</td>
</tr>
<tr>
<td>002</td>
<td>bbb</td>
<td>2018-01-02 11:05:02</td>
</tr>
</tbody>
</table>
</div>
<!– 引用的js文件 –>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<!– calender –>
<script src="./calendar/WdatePicker.js"></script>
</body>
</html>
代码运行效果：
3. calender功能介绍：
（1）优点：简单易用，快速上手。
（2）从上面代码可知，html里面定义了日期选择控件：
<input id="start-time" name="startDate" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd', el:'start-time', maxDate:'#F{$dp.$D('end-time')}'})" type="text" readonly="readonly" style="width: 188px;cursor: pointer;">，它的核心是WdatePicker方法，根据需要的日期格式，进行配置，就可以使用了。
（3）WdatePicker方法基本参数：
dateFmt：日期格式，如yyyy-MM-dd或者yyyy/MM/dd。
el：唯一标识（页面可多个控件）。
minDate：可选择的最小日期，可静态/动态配置。
maxDate：可选择的最大日期，可静态/动态配置。
具体就不一一介绍了，大家自行网上查看吧。
最近有一些小伙伴需要这个示例，我就上传了一下，在我的资源里面《日历插件示例art-calender-test》。