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

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

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

  1. 准备环境:
  • Bootstrap文件:bootstrap.min.css和bootstrap.min.js
  • jQuery文件:jquery-1.11.3.min.js
  • calendar文件:WdatePicker.js(核心)和其他相关文件

前端常用插件之calender日历控件_第1张图片

 

 

 

 

 

 

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

 

    2. 代码实现:

需求:查询用户信息。

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>001td>
                <td>aaatd>
                <td>2018-01-01 10:01:22td>
            tr>
            <tr>
                <td>002td>
                <td>bbbtd>
                <td>2018-01-02 11:05:02td>
            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日历控件_第2张图片

   

 

 

 

 

 

 

 

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:可选择的最大日期,可静态/动态配置


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

 

你可能感兴趣的:(前端,前端常用插件)