JS日歷控件 靈活設置: 精確的時分秒.
1. 在原基礎上 支持 yyyy-mm-dd 的年月日的控件。
2. 在原基礎上添加支持 yyyy-mm-dd HH:MM 年月日時分的控件。
3. 在原基礎上添加支持 yyyy-mm-dd HH:MM:SS 年月日時分秒的控件。
4. 添加確定button 及 今天 和關閉button。
當我切換到其它年份的時候，我點擊 "今天"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()函數，例如以下：
例如以下所看到的
接着：
等。
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。