LayDate 時間選擇外掛的使用介紹
阿新 • • 發佈：2019-01-06
使用例項：
<span style="font-size:18px;"><!doctype html> <html> <head> <meta charset="utf-8"> <title>layDate 呼叫例項</title> <script src="laydate/laydate.js"></script> <style> 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:970px; padding:10px 20px; background-color:#fff; margin:10px auto;} .box a{padding-right:20px;} </style> </head> <body> <div style="width:970px; margin:10px auto;"> 演示一：<input placeholder="請輸入日期" class="laydate-icon" onclick="laydate()"> </div> <div class="box"> <pre> <strong>【注意事項】</strong> 一、請千萬勿移動laydate中的目錄結構，它們具有完整的依賴體系。使用時，只需引入laydate/laydate.js即可。 二、如果您的網站的js採用合併或模組載入，您需要開啟laydate.js，修改path。 三、laydate遵循LGPL開源協議，永不收費！ 四、版權最終解釋權：賢心。 </pre> 演示二：<input class="laydate-icon" id="demo" value="2014-6-25更新"> </br> 演示三： <input class="laydate-icon" onclick="laydate()"></br> 這是是一個最簡單的呼叫方式，它會把自身作為目標元素。除此之外，您還可以按照需求傳入一些其它key，比如：</br> 演示四： <input class="laydate-icon" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"></br> 那麼對於輸入框，如果使用者亂填怎麼辦？沒關係，laydate會智慧糾錯，你可以嘗試在上述表單輸入任意值，然後點選頁面其它處測試一下。</br> 當然，您其實還可以設定任何html元素作為目標物件，又比如：<div onclick="laydate()"></div></br> 注意事項</br> 解壓後，將laydate整個檔案放至您專案的任意目錄，不要移動其檔案結構，它們具有完整的依賴體系。</br> 使用只需在頁面引入laydate.js即可。</br> 如果您的網站的js採用合併或模組載入，您需要開啟laydate.js，修改path。</br> 用於實際專案時請保留來源，勿剔除laydate.js頭部註釋。</br> </br> 選擇理由</br> layDate除了包含日期範圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的前後若干天返回、</br>時分秒選擇、智慧響應、自動糾錯、節日識別，快捷鍵操作等常規功能外，還擁有更多趨近完美的解決方案。 </br> 科學的介面設計1</br> 她並不提倡API的數量性，而是儘可能呈現最人性合理的介面，減少使用成本。</br> 一流的程式碼驅動2</br> layDate完全用原生JavaScript實現，程式碼採用自由靈活風格，內部封裝了眾多輕量級的方法引擎，保證了良好的速度體驗和接近於零的程式碼冗餘.</br> 人性的面板體系3</br> 她非常注重外觀設計，因此她提供了非常強大的面板選擇支援，不僅官方會提供海量的面板下載，</br>您還可以很方便地按照喜好去自定義面板，我們非常歡迎您能夠貢獻面板包，具體操作事宜請檢視面板庫頁面。</br> </br> 功能演示</br> 外部js呼叫：</br> 【外部js呼叫】</br> <input id="hello" class="laydate-icon"> <script> laydate({ elem: '#hello', //目標元素。由於laydate.js封裝了一個輕量級的選擇器引擎，因此elem還允許你傳入class、tag但必須按照這種方式 '#id .class' event: 'focus' //響應事件。如果沒有傳入event，則按照預設的click }); </script> </br> 圖示觸發日期：</br> 【圖示觸發日期】</br> <input id="hello1"> <span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span> </br> 自定義日期格式：</br> 【自定義日期格式】</br> <div id="test1" class="laydate-icon"></div> <script> laydate({ elem: '#test1', format: 'YYYY/MM', // 分隔符可以任意定義，該例子表示只顯示年月 festival: true, //顯示節日 choose: function(datas){ //選擇日期完畢的回撥 alert('得到：'+datas); } }); </script></br> 日期範圍限定在昨天到明天：</br> 【日期範圍限定在昨天到明天】</br> <div id="hello3" class="laydate-icon"></div> <script> laydate({ elem: '#hello3', min: laydate.now(-1), //-1代表昨天，-2代表前天，以此類推 max: laydate.now(+1) //+1代表明天，+2代表後天，以此類推 }); </script> </br> 日期範圍限制： 開始日： 結束日：</br> 開始日：<li class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></li></br> 結束日：<li class="laydate-icon" id="end" style="width:200px;"></li> <script> var start = { elem: '#start', format: 'YYYY/MM/DD hh:mm:ss', min: laydate.now(), //設定最小日期為當前日期 max: '2099-06-16 23:59:59', //最大日期 istime: true, istoday: false, choose: function(datas){ end.min = datas; //開始日選好後，重置結束日的最小日期 end.start = datas //將結束日的初始值設定為開始日 } }; var end = { elem: '#end', format: 'YYYY/MM/DD hh:mm:ss', min: laydate.now(), max: '2099-06-16 23:59:59', istime: true, istoday: false, choose: function(datas){ start.max = datas; //結束日選好後，重置開始日的最大日期 } }; laydate(start); laydate(end); </script> </div> </div> <script> ;!function(){ //laydate.skin('molv'); laydate({ elem: '#demo' }) }(); </script> <b>API文件臨時版，後面會陸續整理詳細資料：</b><br/> 一、核心方法：laydate(options);<br/> options是一個物件，它包含了以下key: '預設值'<br/> elem: '#id', //需顯示日期的元素選擇器<br/> event: 'click', //觸發事件<br/> format: 'YYYY-MM-DD hh:mm:ss', //日期格式<br/> istime: false, //是否開啟時間選擇<br/> isclear: true, //是否顯示清空<br/> istoday: true, //是否顯示今天<br/> issure: true, 是否顯示確認<br/> festival: true //是否顯示節日<br/><br/> min: '1900-01-01 00:00:00', //最小日期<br/> max: '2099-12-31 23:59:59', //最大日期<br/> start: '2014-6-15 23:00:00', //開始日期<br/> fixed: false, //是否固定在可視區域<br/> zIndex: 99999999, //css z-index<br/> choose: function(dates){ //選擇好日期的回撥<br/> }<br/> 二、其它方法/屬性<br/> laydate.v //獲取laydate版本號<br/> laydate.skin(lib); //載入面板，引數lib為面板名 <br/> /*<br/> layer.now支援多型別引數。timestamp可以是前後若干天，也可以是一個時間戳。format為日期格式，為空時則採用預設的“-”分割。<br/> 如laydate.now(-2)將返回前天，laydate.now(3999634079890)將返回2096-09-28<br/> */<br/> layer.now(timestamp, format); //該方法提供了豐富的功能，推薦靈活使用。<br/> laydate.reset(); //重設日曆控制元件座標，一般用於頁面dom結構改變時。無參<br/> 面板使用說明<br/> 下載面板包解壓後，把整個資料夾存放在laydate/skins目錄下，不要改動檔名。<br/> 比如您下載了雅蘭（yalan），那麼您只需要在您的js初始的時候執行：<br/> laydate.skin('yalan')即可使用面板[雅蘭]了。<br/> </body> </html></span>