首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap laydate日期组件使用详解

Posted in Javascript onJanuary 04, 2017

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

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

闲不多言，直接上码。

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

bootstrap laydate日期组件使用详解

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>laydate 日期插件演示示例</title>

 <script type="text/javascript" src="laydate/laydate.js"></script>
 <script type="text/javascript" src="js/dateUtil.js"></script>
 <link rel="stylesheet" type="text/css" href="css/page.css" />
 </head>

 <body>
 <div class="box">
  <h3>laydate API：</h3>
  <pre>
  一、核心方法：laydate(options);
  options是一个对象，它包含了以下key: '默认值'
   elem: '#id',   // 日期显示元素选择器，laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
   event: 'click',   // 触发事件。如果没有传入event，则按照默认的click
   format: 'YYYY-MM-DD hh:mm:ss', // 日期格式
   istime: false,   // 是否开启时间选择
   isclear: true,   // 是否显示清空
   istoday: true,   // 是否显示今天
   issure: true,   // 是否显示确认
   festival: true,   // 是否显示节日
   min: '1900-01-01 00:00:00',  // 最小日期
   max: '2099-12-31 23:59:59', // 最大日期
   start: '2014-6-15 23:00:00',  // 开始日期
   fixed: false,   // 是否固定在可视区域
   zIndex: 99999999,  // css z-index
   choose: function(dates){  // 选择好日期的回调
  }
  
  二、其它方法/属性

  laydate.v  // 获取laydate版本号
  laydate.skin(lib); // 加载皮肤，参数lib为皮肤名 
  
  /*
   layer.now支持多类型参数。timestamp可以是前后若干天，也可以是一个时间戳。format为日期格式，为空时则采用默认的“-”分割。
   如laydate.now(-2)将返回前天，laydate.now(3999634079890)将返回2096-09-28
  */
  layer.now(timestamp, format); // 该方法提供了丰富的功能，推荐灵活使用。
  
  laydate.reset();  // 重设日历控件坐标，一般用于页面dom结构改变时。无参
 </pre>
 </div>

 <div class="box">
  <h3>演示一：直接调用 laydate，无参调用</h3>

  <input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
 </div>

 <div class="box">
  <h3>演示二：js外部调用</h3>
  
  <input class="laydate-icon" id="demo" value="2014-07-18">
 </div>

 <div class="box">
  <h3>演示三：图标触发日期</h3>

  <input id="ico" readonly><span class="laydate-icon" onclick="laydate({elem: '#ico'});"></span>
 </div>

 <div class="box">
  <h3>演示四：自定义日期格式</h3>
  
  <input id="custom_date_format" class="laydate-icon"></input>
 </div>

 <div class="box">
  <h3>演示五：基于当前日期控制日期范围</h3>
  
  <input id="custom_date_scope" class="laydate-icon"></input>
 </div>

 <div class="box">
  <h3>演示六：显示日期和时间</h3>
  
  <input id="custom_date_full" class="laydate-icon"></input>
 </div>

 <div class="box">
  <h3>演示七：双日期范围显示限制</h3>
  
  有效时间：<input id="time_start" class="laydate-icon"></input> --- <input id="time_end" class="laydate-icon"></input>
 </div>

 <div class="box" style="text-align:center">
  <p>
  以上，就是我基于贤心所作日期插件 layDate 进行的日期组件演示。<br>
  个人觉得，其是一款非常不错的日期插件，对其皮肤样式，我个人比较倾向选择 淡蓝 的样式，简洁明快。<br>
  以下为相应的参考链接以及 layDate 插件下载的目录（内含所需的皮肤）。
  </p>
  <a href="http://www.w3school.com.cn/jsref/jsref_obj_date.asp" target="_blank">JavaScript Date 对象</a>
  <a href="http://yunpan.cn/ccMrbLZbZgMQC" target="_blank">layDate 插件（提取码：a36a）</a>
 </div>

 <script>
  ;!function(){
  laydate.skin('danlan');

  // 演示二：js外部调用
  laydate({
   elem: '#demo'
  })
  }();

  /*
  * 演示四：自定义日期格式
  */
  laydate({
  elem: '#custom_date_format',
  format: 'YYYY-MM', // 分隔符可以任意定义，该例子表示只显示年月
  festival: true, // 显示节日

  choose: function(datas){ // 选择日期完毕的回调
   alert('您选择的日期为：'+datas);
  }
  });

  /*
  * 演示五：基于当前日期控制日期范围
  */
  laydate({
  elem: '#custom_date_scope',
  min: laydate.now(-7), // -1代表昨天，-2代表前天，以此类推
  max: laydate.now(+7) // +1代表明天，+2代表后天，以此类推
  });

  /*
  * 演示六：显示日期和时间
  */
  laydate({
  elem: '#custom_date_full',
  format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
  festival: true,  // 显示节日
  istime: true,

  choose: function(dates){ // 选择日期完毕的回调
   alert('您选择的日期时间为：'+dates);
  }
  });

  /*
  * 演示七：双日期范围显示限制
  */
  var start_time = {
  elem: '#time_start',
  format: 'YYYY-MM-DD hh:mm:ss',
  min: laydate.now(),  // 设定最小日期为当前日期
  //max: laydate.now(+5), // 最大日期
  istime: true,
  istoday: false,

  choose: function(dates){
   var cur = convertString2Date(dates);
   var str = convertDate2String(cur);
   var mse = adjustDate(cur, 0);
   var ad = convertDate2String(mse);

   alert("当前日期：" + cur + "\n\n格式日期：" + str + "\n\n毫秒总数：" + mse + "\n\n调整日期：" + mse
    + "\n\n加 1 秒：" + convertDate2String(adjustDate(cur, 1))
    + "\n\n加 1 分：" + convertDate2String(adjustDate(cur, 60))
    + "\n\n加 1 时：" + convertDate2String(adjustDate(cur, 60*60))
    + "\n\n加 1 天：" + convertDate2String(adjustDate(cur, 60*60*24))
    + "\n\n加 1 月：" + convertDate2String(adjustDate(cur, 60*60*24*30))
    + "\n\n加 1 年：" + convertDate2String(adjustDate(cur, 60*60*24*30*12))
    + "\n\n减 1 秒：" + convertDate2String(adjustDate(cur, -1))
    + "\n\n减 1 分：" + convertDate2String(adjustDate(cur, -60))
    + "\n\n减 1 时：" + convertDate2String(adjustDate(cur, -60*60))
    + "\n\n减 1 天：" + convertDate2String(adjustDate(cur, -60*60*24))
    + "\n\n减 1 月：" + convertDate2String(adjustDate(cur, -60*60*24*30))
    + "\n\n减 1 年：" + convertDate2String(adjustDate(cur, -60*60*24*30*12)));

   // 开始日选好后，重置结束日的最小日期为下一天
   end_time.min = convertDate2String(adjustDate(cur, 60*60*24));
   // 将结束日的初始值设定为开始日的第三天
   end_time.start = convertDate2String(adjustDate(cur, 60*60*24*2));
   // 将结束日的终止值设定为开始日的第三十天，日期范围为一个月
   end_time.max = convertDate2String(adjustDate(cur, 60*60*24*30));
  }
  };

  var end_time = {
  elem: '#time_end',
  format: 'YYYY-MM-DD hh:mm:ss',
  min: laydate.now(),
  max: '2099-06-16 23:59:59',
  istime: true,
  istoday: false,

  choose: function(dates){
   var cur = convertString2Date(dates);

   // 结束日选好后，重置开始日的最大日期为前第一天
   start_time.max = convertDate2String(adjustDate(cur, -60*60*24));
   // 将起始日的初始值设定为结束日的前第三十天
   start_time.start = convertDate2String(adjustDate(cur, -60*60*24*30));
   // 将起始日的起始日期设定为结束日的前第三十天，日期范围为一个月
   start_time.min = convertDate2String(adjustDate(cur, -60*60*24*30));
  }
  };

  laydate(start_time);
  laydate(end_time);
 </script>
 </body>
</html>

page.css 对应的源码为：

*{
 margin:0;
 padding:0;
 list-style:none;
}

html{
 background-color:#E3E3E3;
 font-size:14px;
 color:#000;
 font-family:'微软雅黑'
}

h2{
 line-height:30px;
 font-size:20px;
}

a,a:hover{
 text-decoration:none;
}

pre{
 font-family:'微软雅黑'
}

.box{
 width:1200px;
 padding:10px 20px;
 background-color:#fff;
 margin:10px auto;
}

.box a{
 padding-right:20px;
}

h3{
 margin:10px 0;
}

.layinput{
 height: 22px;
 line-height: 22px;
 width: 150px;
 margin: 0;
}

convertString2Date 函数对应的源码如下：

bootstrap laydate日期组件使用详解

convertDate2String 函数对应的源码如下：

bootstrap laydate日期组件使用详解

adjustDate 函数对应的源码如下：

bootstrap laydate日期组件使用详解

运行结果如下所示：

bootstrap laydate日期组件使用详解

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

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

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望大家多多支持三水点靠木。

bootstrap laydate日期组件使用详解

- Author -

范丰平

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 #Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 #Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 #Javascript
通过sails和阿里大于实现短信验证
Jan 04 #Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 #Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 #Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 #Javascript
plus.io(1) Post(1) 目录管理(1) 入门基础(1) 磁盘管理(1) Vmware(3) html5+(1) 虚拟机(3) Get(1) RabbitMQ(3)
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
php笔记之：文章中图片处理的使用
2013/04/26 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
xmlplus组件设计系列之路由（ViewStack)（7）
2017/05/02 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
python 测试实现方法
2008/12/24 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python调用命令行进度条的方法
2015/05/05 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python和Sublime整合过程图示
2019/12/25 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
100％植物性、有机、即食餐：Sakara Life
2018/10/25 全球购物
Hotels.com拉丁美洲：从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
业务代表的岗位职责
2013/11/16 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
与美同行演讲稿
2014/09/13 职场文书
学校德育工作总结2015
2015/05/11 职场文书
疾病证明书
2015/06/19 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技