laydate.js日期时间选择插件

laydate.js日期时间选择插件

1. 引入JS。 官网:

<script type="text/javascript" src="https://www.jb51.net/js/laydate.js"></script> 

2. 根据需要做相应的配置。详情参看官网。

<script> laydate({ elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class' event: 'focus', //响应事件。如果没有传入event,则按照默认的click format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义,该例子表示只显示年月 festival: true, //显示节日 istime: true, //显示时间选项 choose: function(datas){ //选择日期完毕的回调 alert('得到:'+datas); } }); </script>

实例源码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <!-- <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> --> <meta content="EditPlus®"> <meta content=""> <meta content=""> <meta content=""> <title>layDate日期时间选择插件</title> <link href="" /> <script type="text/javascript" src="https://www.jb51.net/js/laydate.js"></script> </head> <body> <form method="post" action=""> Way1, 请选择日期:<input type="text" /> <hr /> Way2, <input type="text" /><hr /> <script> laydate({ elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class' event: 'focus', //响应事件。如果没有传入event,则按照默认的click format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义,该例子表示只显示年月 festival: true, //显示节日 istime: true, //显示时间选项 choose: function(datas){ //选择日期完毕的回调 alert('得到:'+datas); } }); </script> Way3, <input> <span></span> </form> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjgyd.html