jQuery LigerUI 外掛介紹及使用之ligerDateEditor
阿新 • • 發佈：2019-02-02
描述:
- 可以將一個'文字框'的表單物件轉換成可日期選擇。
- 支援精確到小時和分鐘
- 支援直接在文字框改日期(會自動驗證)
設計思路：
通過觀察知道，無論是哪個月，這30左右的天數總會落在7*6的表格上面，
所以只需要知道某月，第N行、第M列應該填入什麼樣的數字就可以。
按下面的演算法就可以計算出來：
步驟一：以本月第一天為基點，計算出第N行、第M列的偏差：先把第一天所在相應的單元格填入0，單元格前面的為負數（遞減），後面的為正數（遞加）。
可用公式(N-1)*7 + M-D計算（第N行，第M列，D為某月的第一天的星期）
步驟二：負數的，如-N，在上一個月找倒數N天的日期。正數的，全部加一，如果大於本月天數，減去本月天數即可。
這樣描述有點抽像啊，以一個例子來做說明吧，這個月是4月，有30天，第一天是星期五，那麼就先在第一行星期五的單元格填入0，按單元格從左到右,從上到下的順序編號，結果如圖：
這樣上面說的步驟一就完成了，步驟二分為2小步完成：
1， 對於第一行星期五之前負數部分，觀察下知道-1替換要成上一個月最後一天，-2、-3依此類推。我們很容易可以知道上個月(3月)有31天，因此就替換成27、28、29、30、31
2， 正數部分就容易處理多了，全部加1，如果大於30天，減去30即可。如圖：
例子：
引入庫檔案：
遵循ligerUI的設計原則（外掛儘量單獨），ligerDateEditor僅需要一個ligerDateEditor.js，不依賴任何其他js檔案。使用時再引入css和jQuery即可。
<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script><link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"/><script src="lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
準備HTML:
<input type="text"
呼叫：
$("#txt2").ligerDateEditor();
API：
| 引數名 | 型別 | 描述 | 預設值 |
| p | {Object} | 主要引數 | null |
| p.width | {Int} | 寬度 | null |
| p.format | {String} | Date格式化 | "yyyy-MM-dd hh:mm" |
| p.showTime | {Bool} | 是否顯示時間 | false |
| p.onChangeDate | {Function} | 改變Date事件
|
null |