请选择 进入手机版 | 继续访问电脑版

找我啊

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 221|回复: 0

js日期插件

[复制链接]

17

主题

19

帖子

99

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
99
QQ
发表于 2019-6-12 20:34:38 | 显示全部楼层 |阅读模式
推荐一款贤心写的js日期插件;
调用非常方便;
顺手写了一个demo。
先列举下这款插件的优点:
日期范围限制;
开始日期设定;
自定义日期格式;
时间戳转换;
当天的前后若干天返回;
时分秒选择;
智能响应;
自动纠错;
节日识别;
快捷键操作;
更换皮肤等。
当然还有很重要的一点是使用简单;
代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>data_demo</title>
  6. <!-- 引入laydate插件开始 -->
  7. <script type="text/javascript" src="http://baijunyao.com/Demo/date_demo/laydate-v1.1/laydate.js"></script>
  8. <!-- 引入laydate插件结束 -->
  9. </head>
  10. <body>
  11. <!-- 基础日期调用开始 -->
  12. 基础调用开始:<input onclick="laydate()">
  13. <!-- 基础日期调用结束 -->
  14. <br><br>
  15. <!-- 带时间时分秒调用开始 -->
  16. 带时间时分秒调用:<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
  17. <!-- 带时间时分秒调用结束 -->
  18. <br><br>
  19. <!-- 带时间、带图标调用开始 -->
  20. 带时间、带图标调用:<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
  21. <!-- 带时间、带图标调用结束 -->
  22. <br><br>
  23. <!-- 外部js简单调用开始 -->
  24. 外部js简单调用:<input id="hello">
  25. <script type="text/javascript">
  26. laydate({
  27.     elem: '#hello', //需显示日期的元素选择器
  28.     event: 'focus' //响应事件。如果没有传入event,则按照默认的click
  29. });
  30. </script>
  31. <!-- 外部js简单调用结束 -->
  32. <br><br>
  33. <!-- 外部js设置具体参数调用开始 -->
  34. 外部js设置具体参数调用:<input id="test">
  35. <script type="text/javascript">
  36. /*方法属性开始*/
  37.     laydate.skin('molv'); // 设置皮肤 官方默认可以调用的皮肤有'default'、'dahong'、'molv' 此版本已集成了'default'、'dahong'、'molv'、'danlan'、'yalan'、'qianhuang'、'yahui'、'huanglv'
  38.     var tody=laydate.now('-2'); // laydate.now(timestamp, format); timestamp可以是前后若干天,也可以是一个时间戳。format为日期格式,为空时则采用默认的“-”分割。如laydate.now(-2)将返回前天,laydate.now(3999634079890)将返回2096-09-28
  39. /*方法属性结束*/
  40. /*参数设置开始*/
  41.     laydate({
  42.         elem: '#test', //需显示日期的元素选择器
  43.         event: 'mouseover', //触发事件 可以调用的事件'click'、'focus'、'mouseover'、'mouseout'等
  44.         format: 'YYYY/MM/DD hh:mm:ss', //日期格式
  45.         istime: false, //是否开启时间选择
  46.         isclear: true, //是否显示清空
  47.         istoday: true, //是否显示今天
  48.         issure: true, //是否显示确认
  49.         festival: true, //是否显示节日
  50.         min: '2015-03-01 00:00:00', //最小日期
  51.         max: '2015-04-01 23:59:59', //最大日期
  52.         start: laydate.now(),    //开始日期 例如:'2015-04-01 23:59:59' 此处是先用laydate.now('-1')获得了昨天的时间
  53.         fixed: false, //是否固定在可视区域
  54.         zIndex: 99999999, //css z-index
  55.         choose: function(dates){ //选择好日期后的回调
  56.             alert(tody);
  57.         }
  58.     })
  59. /*参数设置结束*/
  60. </script>
  61. <!-- 外部js设置具体参数调用结束 -->
  62. </body>
  63. </html>
复制代码

到此结束;
可以无视下面这样用来做文章封面的图片;



转自 https://baijunyao.com/article/30
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|找我啊 ( 沪ICP备17031007号-2 )

GMT+8, 2019-8-24 01:26 , Processed in 0.035800 second(s), 22 queries .

Powered by Discuz! X3.4 Licensed

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表