當我切換到其它年份的時候,我點擊 "今天"button 就能夠返回當前的年月份。
比方例如以下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()函數,例如以下:
例如以下所看到的
接着:
等。
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。