比如如下demo年月日的示意圖如下:
時分秒的demo如下:
時分的demo如下:
HTML代碼如下:
1
2
3
4
5
6
|
< p > 開始時間: < input name="mydate"
type="text" class="input_cxcalendar" style="width:200px;"> 結束時間: < input name="mydate2"
type="text" class="input_cxcalendar" style="width:200px;" > </ p > |
當然在頭部要引入如下JS文件:
<script src="jquery-1.9.1.js"></script>
<script src="calendar.js"></script>
依賴於jquery框架。後面的是日曆控件JS
初始化方式如下:
1
2
3
4
5
6
7
8
9
10
|
<script> $( '.input_cxcalendar' ).each( function (){ var a
= new Calendar({ targetCls:
$( this ), type: 'yyyy-mm-dd' 或者
‘yyyy-mm-dd HH:MM:SS’ 或者 ‘yyyy-mm-dd HH:MM’; }, function (val){ console.log(val); //
回調函數 當前選中的值 }); }); </script> |
代碼分析:
1. 頁面初始化時,調用init()方法,生成日曆控件代碼,如下所示:
2. 初始化完成後,調用渲染日曆面板的函數 _renderCalendarPanel(),如下所示:\
3. 在_renderCalendarPanel()函數做一些判斷如下:
4. 在第三步定義了每月的天數 self.month_day; 定義了週末(週六,週日)的位置是第幾個,如下所示:
接着代碼如下:
如下設置wday = 2
_dayNumOfMonth函數的意思如下:
5. 下面我們接着來看看 通過年 月份來渲染天數 _renderBody()函數,如下:
如下所示
接着:
等。
JS所有代碼如下: