在日常的网页开发过程中，日期组件已经成为不可或缺的组件之一。同时，随着广大杰出攻城狮的不懈努力，也出现了很多优秀的日期组件，其中我个人觉得 layDate 日期组件是一个非常不错的组件，简洁易用，样式清爽。

此文主要以贤心所作的 layDate 组件进行日期选择的演示，敬请各位小主们参阅，若有不足之处，敬请大神指正，不胜感激！

闲不多言，直接上码。

演示文档的工程目录如下图所示：

laydate-demo.html 对应的源代码为：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.      <head>
  4.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.          <title>laydate 日期插件演示示例</title>
  6.  
  7.          <script type="text/javascript" src="laydate/laydate.js"></script>
  8.          <script type="text/javascript" src="js/dateUtil.js"></script>
  9.          <link rel="stylesheet" type="text/css" href="css/page.css" />
  10.      </head>
  11.  
  12.      <body>
  13.          <div class="box">
  14.              <h3>laydate API：</h3>
  15.              <pre>
  16.                  一、核心方法：laydate(options);
  17.                  options是一个对象，它包含了以下key: '默认值'
  18.                      elem: '#id',                        // 日期显示元素选择器，laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
  19.                      event: 'click',                    // 触发事件。如果没有传入event，则按照默认的click
  20.                      format: 'YYYY-MM-DD hh:mm:ss',    // 日期格式
  21.                      istime: false,                        // 是否开启时间选择
  22.                      isclear: true,                        // 是否显示清空
  23.                      istoday: true,                    // 是否显示今天
  24.                      issure: true,                        // 是否显示确认
  25.                      festival: true,                    // 是否显示节日
  26.                      min: '1900-01-01 00:00:00',            // 最小日期
  27.                      max: '2099-12-31 23:59:59',        // 最大日期
  28.                      start: '2014-6-15 23:00:00',            // 开始日期
  29.                      fixed: false,                        // 是否固定在可视区域
  30.                      zIndex: 99999999,                // css z-index
  31.                      choose: function(dates){            // 选择好日期的回调
  32.                  }
  33.  
  34.                  二、其它方法/属性
  35.  
  36.                  laydate.v            // 获取laydate版本号
  37.                  laydate.skin(lib);    // 加载皮肤，参数lib为皮肤名 
  38.  
  39.                  /*
  40.                      layer.now支持多类型参数。timestamp可以是前后若干天，也可以是一个时间戳。format为日期格式，为空时则采用默认的“-”分割。
  41.                      如laydate.now(-2)将返回前天，laydate.now(3999634079890)将返回2096-09-28
  42.                  */
  43.                  layer.now(timestamp, format);   // 该方法提供了丰富的功能，推荐灵活使用。
  44.  
  45.                  laydate.reset();                // 重设日历控件坐标，一般用于页面dom结构改变时。无参
  46.          </pre>
  47.          </div>
  48.  
  49.          <div class="box">
  50.              <h3>演示一：直接调用 laydate，无参调用</h3>
  51.  
  52.              <input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
  53.          </div>
  54.  
  55.          <div class="box">
  56.              <h3>演示二：js外部调用</h3>
  57.  
  58.              <input class="laydate-icon" id="demo" value="2014-07-18">
  59.          </div>
  60.  
  61.          <div class="box">
  62.              <h3>演示三：图标触发日期</h3>
  63.  
  64.              <input id="ico" readonly><span class="laydate-icon" onclick="laydate({elem: '#ico'});"></span>
  65.          </div>
  66.  
  67.          <div class="box">
  68.              <h3>演示四：自定义日期格式</h3>
  69.  
  70.              <input id="custom_date_format" class="laydate-icon"></input>
  71.          </div>
  72.  
  73.          <div class="box">
  74.              <h3>演示五：基于当前日期控制日期范围</h3>
  75.  
  76.              <input id="custom_date_scope" class="laydate-icon"></input>
  77.          </div>
  78.  
  79.          <div class="box">
  80.              <h3>演示六：显示日期和时间</h3>
  81.  
  82.              <input id="custom_date_full" class="laydate-icon"></input>
  83.          </div>
  84.  
  85.          <div class="box">
  86.              <h3>演示七：双日期范围显示限制</h3>
  87.  
  88.              有效时间：<input id="time_start" class="laydate-icon"></input> --- <input id="time_end" class="laydate-icon"></input>
  89.          </div>
  90.  
  91.          <div class="box" style="text-align:center">
  92.              <p>
  93.                  以上，就是我基于贤心所作日期插件 layDate 进行的日期组件演示。<br>
  94.                  个人觉得，其是一款非常不错的日期插件，对其皮肤样式，我个人比较倾向选择 淡蓝 的样式，简洁明快。<br>
  95.                  以下为相应的参考链接以及 layDate 插件下载的目录（内含所需的皮肤）。
  96.              </p>
  97.              <a href="http://www.w3school.com.cn/jsref/jsref_obj_date.asp" target="_blank">JavaScript Date 对象</a>
  98.              <a href="http://yunpan.cn/ccMrbLZbZgMQC" target="_blank">layDate 插件（提取码：a36a）</a>
  99.          </div>
  100.  
  101.          <script>
  102.              ;!function(){
  103.                  laydate.skin('danlan');
  104.  
  105.                  // 演示二：js外部调用
  106.                  laydate({
  107.                     elem: '#demo'
  108.                  })
  109.              }();
  110.  
  111.              /*
  112.               * 演示四：自定义日期格式
  113.               */
  114.              laydate({
  115.                  elem: '#custom_date_format',
  116.                  format: 'YYYY-MM', // 分隔符可以任意定义，该例子表示只显示年月
  117.                  festival: true,    // 显示节日
  118.  
  119.                  choose: function(datas){ // 选择日期完毕的回调
  120.                      alert('您选择的日期为：'+datas);
  121.                  }
  122.              });
  123.  
  124.              /*
  125.               * 演示五：基于当前日期控制日期范围
  126.               */
  127.              laydate({
  128.                  elem: '#custom_date_scope',
  129.                  min: laydate.now(-7), // -1代表昨天，-2代表前天，以此类推
  130.                  max: laydate.now(+7)  // +1代表明天，+2代表后天，以此类推
  131.              });
  132.  
  133.              /*
  134.               * 演示六：显示日期和时间
  135.               */
  136.              laydate({
  137.                  elem: '#custom_date_full',
  138.                  format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
  139.                  festival: true,                // 显示节日
  140.                  istime: true,
  141.  
  142.                  choose: function(dates){       // 选择日期完毕的回调
  143.                      alert('您选择的日期时间为：'+dates);
  144.                  }
  145.              });
  146.  
  147.              /*
  148.               * 演示七：双日期范围显示限制
  149.               */
  150.              var start_time = {
  151.                  elem: '#time_start',
  152.                  format: 'YYYY-MM-DD hh:mm:ss',
  153.                  min: laydate.now(),           // 设定最小日期为当前日期
  154.                  //max: laydate.now(+5),       // 最大日期
  155.                  istime: true,
  156.                  istoday: false,
  157.  
  158.                  choose: function(dates){
  159.                      var cur = convertString2Date(dates);
  160.                      var str = convertDate2String(cur);
  161.                      var mse = adjustDate(cur, 0);
  162.                      var ad  = convertDate2String(mse);
  163.  
  164.                      alert("当前日期：" + cur + "\n\n格式日期：" + str + "\n\n毫秒总数：" + mse + "\n\n调整日期：" + mse
  165.                             + "\n\n加 1 秒：" + convertDate2String(adjustDate(cur, 1))
  166.                             + "\n\n加 1 分：" + convertDate2String(adjustDate(cur, 60))
  167.                             + "\n\n加 1 时：" + convertDate2String(adjustDate(cur, 60*60))
  168.                             + "\n\n加 1 天：" + convertDate2String(adjustDate(cur, 60*60*24))
  169.                             + "\n\n加 1 月：" + convertDate2String(adjustDate(cur, 60*60*24*30))
  170.                             + "\n\n加 1 年：" + convertDate2String(adjustDate(cur, 60*60*24*30*12))
  171.                             + "\n\n减 1 秒：" + convertDate2String(adjustDate(cur, -1))
  172.                             + "\n\n减 1 分：" + convertDate2String(adjustDate(cur, -60))
  173.                             + "\n\n减 1 时：" + convertDate2String(adjustDate(cur, -60*60))
  174.                             + "\n\n减 1 天：" + convertDate2String(adjustDate(cur, -60*60*24))
  175.                             + "\n\n减 1 月：" + convertDate2String(adjustDate(cur, -60*60*24*30))
  176.                             + "\n\n减 1 年：" + convertDate2String(adjustDate(cur, -60*60*24*30*12)));
  177.  
  178.                      // 开始日选好后，重置结束日的最小日期为下一天
  179.                      end_time.min = convertDate2String(adjustDate(cur, 60*60*24));
  180.                      // 将结束日的初始值设定为开始日的第三天
  181.                      end_time.start = convertDate2String(adjustDate(cur, 60*60*24*2));
  182.                      // 将结束日的终止值设定为开始日的第三十天，日期范围为一个月
  183.                      end_time.max = convertDate2String(adjustDate(cur, 60*60*24*30));
  184.                  }
  185.              };
  186.  
  187.              var end_time = {
  188.                  elem: '#time_end',
  189.                  format: 'YYYY-MM-DD hh:mm:ss',
  190.                  min: laydate.now(),
  191.                  max: '2099-06-16 23:59:59',
  192.                  istime: true,
  193.                  istoday: false,
  194.  
  195.                  choose: function(dates){
  196.                      var cur = convertString2Date(dates);
  197.  
  198.                      // 结束日选好后，重置开始日的最大日期为前第一天
  199.                      start_time.max = convertDate2String(adjustDate(cur, -60*60*24));
  200.                      // 将起始日的初始值设定为结束日的前第三十天
  201.                      start_time.start = convertDate2String(adjustDate(cur, -60*60*24*30));
  202.                      // 将起始日的起始日期设定为结束日的前第三十天，日期范围为一个月
  203.                      start_time.min = convertDate2String(adjustDate(cur, -60*60*24*30));
  204.                  }
  205.              };
  206.  
  207.              laydate(start_time);
  208.              laydate(end_time);
  209.          </script>
  210.      </body>
  211.  </html>

page.css 对应的源码为：

  1.  *{
  2.      margin:;
  3.      padding:;
  4.      list-style:none;
  5.  }
  6.  
  7.  html{
  8.      background-color:#E3E3E3;
  9.      font-size:14px;
  10.      color:#000;
  11.      font-family:'微软雅黑'
  12.  }
  13.  
  14.  h2{
  15.      line-height:30px;
  16.      font-size:20px;
  17.  }
  18.  
  19.  a,a:hover{
  20.      text-decoration:none;
  21.  }
  22.  
  23.  pre{
  24.      font-family:'微软雅黑'
  25.  }
  26.  
  27.  .box{
  28.      width:1200px;
  29.      padding:10px 20px;
  30.      background-color:#fff;
  31.      margin:10px auto;
  32.  }
  33.  
  34.  .box a{
  35.      padding-right:20px;
  36.  }
  37.  
  38.  h3{
  39.      margin:10px 0;
  40.  }
  41.  
  42.  .layinput{
  43.      height: 22px;
  44.      line-height: 22px;
  45.      width: 150px;
  46.      margin:;
  47.  }

convertString2Date 函数对应的源码如下：

convertDate2String 函数对应的源码如下：

adjustDate 函数对应的源码如下：

运行结果如下所示：

至此， HTML-001-日期组件 layDate 演示 顺利完结，希望此文能够给初学 HTML 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

HTML-001-日期组件 layDate 演示的更多相关文章

  1. [Swift实际操作]七、常见概念-(7)日历Calendar和日期组件DateComponents

    本文将为你演示日历和日期组件的使用.通过日历的日期部件,可以获得日期的各个部分. 首先引入需要用到的界面工具框架 import UIKit 初始化一个日期对象,其值为当前的日期. let dt = D ...

  2. amazeui-js插件-ui增强-日期组件如何使用（把实例做一下）

    amazeui-js插件-ui增强-日期组件如何使用(把实例做一下) 一.总结 一句话总结:需要jquery.js和amazeui.js一切才能使用 1.amazeui中的各种js效果要怎么才能使用? ...

  3. yii2超好用的日期组件和时间组件

    作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  4. JavaScript日期组件的实现

    旅游频道的开发中需要定义各种日期组件,有的是基本的日期选择, 这个基本日期只包含如下功能 左右翻(月) 点击天回填到输入域 点击“今天”,回填今天的日期到输入域 点击“关闭”,日期控件关闭 有的同时显 ...

  5. EXTJS项目实战经验总结一：日期组件的change事件：

    1  依据选择的日期,加载相应的列表数据,如图:   开发说明    1 开发思路: 在日期值变化的事件中获得选择后的日期值,传给后台,然后从后台加载相应的数据 2 问题:在查看extjs2.2 的a ...

  6. vue自定义日期组件

    vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 ...

  7. 为Ext添加下拉框和日期组件

    Ext.onReady(function(){ var config = { fields:['module'], data:[['新建'],['删除'],['增加']}; var store = n ...

  8. 改写element-ui中的日期组件

    如果你想实现一个自定义的日期组件规则如下:日期组件未点开前左右两边有前一天后一天控制箭头,且前一天后一天有数据时才显示箭头,没有数据时,快速切换箭头隐藏.当日期组件点开后,有数据的天为可点击状态,无数 ...

  9. 使用WdatePicker日期组件时，选择日期后，执行某个方法

    WdatePicker({onpicked:function(){alert(123);},dateFmt:'yyyy年MM月dd日',maxDate:'%y-%M-%d'}) 1.onpicked: ...

随机推荐

  1. BZOJ3211 花神游历各国

    Description   Input   Output 每次x=1时,每行一个整数,表示这次旅行的开心度 Sample Input 4 1 100 5 5 5 1 1 2 2 1 2 1 1 2 2 ...

  2. Linux命令总结_文件查找之grep

    1.grep命令 grep一般格式为:grep [选项]基本正则表达式[文件]这里基本正则表达式可为字符串,字符串或变量应该用双引号,模式匹配用单引号 选项: -c  只输出匹配行的计数 -i  不区 ...

  3. MySql之触发器【过度变量 new old】

    trigger是由事件触发某个操作.这些事件包括insert语句.update语句和delete语句.当数据库执行这些事件时,就会激活触发器执行相应的操作. [1]只有一个执行语句 create tr ...

  4. 单词游戏-基于SQLite+Qt的C++项目

    SQLite文件数据库的操作 Qt插件的安装配置 1.VS2008下安装Qt开发包 解压缩4.7.3.rar到C:\Qt\4.7.3\ Qt for VS addin2.安装并配置Visual Ass ...

  5. AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  6. .NET开发问题汇总

    问题一: mvc 部署到iis 提示错误未能加载文件或程序集System.Web.Http.WebHost 解决方案: Nuget程序包管理 —>程序包管理控制台,运行以下命令即可:Update ...

  7. linux mysql服务器迁移

    服务器即将过保,重新申请了一台虚机,折腾了一下数据库的迁移.以下是主要步骤: 1.在windows上用navicat把数据和结构转储成sql文件 2.在mysql官网上下载rpm的压缩包 3.使用se ...

  8. [转]理解OAuth 2.0

    作者: 阮一峰 OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释, ...

  9. HAProxy安装及初步使用

    1.yum安装wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpmrpm -ivh epel-r ...

  10. laravel 部分路由取消csrf

    // app/Http/Middleware/VerifyCsrfToken protected $except = [ 'webhook/*' ];