前端常用插件之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>


    <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>

代码运行效果：

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》。

前端常用插件之calender日历控件相关推荐

可编辑的日历控件_选择正确的WordPress编辑日历插件
可编辑的日历控件什么是编辑日历? (What is an Editorial Calendar?) An editorial calendar is the foundation of strate ...
【前端】小程序日历控件分享
之前小程序开发需要用到日历控件,但是关于小程序可用的实在资源有限,于是就自己写了一个,如今项目上线后将它分享出来,希望能帮到需要的人. 效果图: JS代码: dateData: function () ...
java日历控件开源_6种Google日历的开源替代方案
java日历控件开源对于我们许多人来说,我们的日历是我们的命脉. 尽管有些人可以不用挂历或纸制日程安排者来安排他们的日程安排,但我们中的很多人已经将管理时间分配的过程转移到了数字日历上. 大多数主要 ...
WdatePicker 日历控件的onchange事件无作用
2019独角兽企业重金招聘Python工程师标准>>> 来源:https://blog.csdn.net/gaoxiong335/article/details/70146664 在 ...
日历控件的android代码,Android日历控件PickTime代码实例
Android日历控件PickTime代码实例发布时间:2020-10-03 16:05:51 来源:脚本之家阅读:86 作者:手撕高达的村长最近做项目,需要设置用户的生日,所以做这样一个功能. ...
自定义日历控android,Android 一个日历控件的实现小记
先看几张动态的效果图吧! 这里主要记录一下在编写日历控件过程中一些主要的点: 一.主要功能 1.支持农历.节气.常用节假日 2.日期范围设置,默认支持的最大日期范围[1900.1~2049.12] 3 ...
开源一个ReactNative日历控件
项目地址: react-native-slideable-calendar-strip 演示地址: Calendar-Strip.mp4 为何要再实现一个日历控件已经有了react-native-c ...
android仿小米日历,实现一个仿小米日历控件
先看效果图: 效果图根据效果,我们可以看到,要实现该控件,需要具备: 容器以及触摸事件处理周日历布局以及选择,切换上下周处理月日历布局以及选择,切换上下月处理首先说说容器对于其他使用者来说, ...
日历控件(bootstrap-datetimepicker.js)
最常用的日历控件 <script src="assets/js/jquery-1.11.1.js"> ...

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

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

前端常用插件之calender日历控件相关推荐

最新文章

热门文章