前端常用插件之calender日历控件

最近，发现一个插件——简单好用的页面日历控件，个人觉得有必要与大家分享一下，它就是calender日历控件。

准备环境：

Bootstrap文件：bootstrap.min.css和bootstrap.min.js
jQuery文件：jquery-1.11.3.min.js
calendar文件：WdatePicker.js(核心)和其他相关文件

前端常用插件之calender日历控件

这里文件网上都有（尽量用最新版本），大家可以自行下载。

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" onclick="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" onclick="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>

    
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    
    <script src="./calendar/WdatePicker.js"></script>

</body>
</html>

代码运行效果：

前端常用插件之calender日历控件

3. calender功能介绍：

（1）优点：简单易用，快速上手。

（2）从上面代码可知，html里面定义了日期选择控件：

<input id="start-time" name="startDate" onclick="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：可选择的最大日期，可静态/动态配置。

具体就不一一介绍了，大家自行网上查看吧。

前端常用插件之calender日历控件

前端常用插件之calender日历控件

相关推荐