日期時間選擇插件laydate.js：
效果圖：
1. 引入JS。 官網：http://laydate.layui.com
<script type="text/javascript" src="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 name="viewport" content="width=device-width, initial-scale=1"> <!-- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> --> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>layDate日期時間選擇插件</title> <link href="" rel="stylesheet" /> <script type="text/javascript" src="js/laydate.js"></script> </head> <body> <form method="post" action=""> Way1, 請選擇日期:<input type="text" name="date" onclick="laydate()" /> <hr /> Way2, <input type="text" name="date" id='seldate' class="laydate-icon" /><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 id="seldate1"> <span class="laydate-icon" onclick="laydate({elem:'#seldate1'});"></span> </form> </body> </html>Find more here：http://laydate.layui.com/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
