JS日曆控件 靈活設置: 精確的時分秒.

 在今年7月份時候 寫了一篇關於 "JS日曆控件" 的文章 , 當時只支持 年月日 的日曆控件，現在優化如下：

     1. 在原基礎上 支持 yyyy-mm-dd 的年月日的控件。

     2. 在原基礎上增加支持 yyyy-mm-dd HH:MM 年月日時分的控件。

     3. 在原基礎上增加支持 yyyy-mm-dd HH:MM:SS 年月日時分秒的控件。

     4. 增加確定按鈕 及 今天 和關閉按鈕。當我切換到其他年份的時候，我點擊 "今天"按鈕 就可以返回當前的年月份。

 

配置項如下：

targetCls	渲染日曆的class 默認爲空
beginyear	日曆的開始年份 默認爲1949
endyear	日曆的結束年份 默認爲2049
date	new Date() 默認日期 也可以在input框自己自定義值
type	日期格式。目前支持三種格式：      1. "yyyy-mm-dd" 年月日      2. "yyyy-mm-dd HH:MM:SS" 年月日時分秒。     3. "yyyy-mm-dd HH:MM" 年月日時分
separator	日期的分隔符 默認爲 -
wday	0, 設置周的第一天，默認從第一天開始
language	對象： {       year: "年",       month: "月",       monthList:       ["1","2","3","4","5","6","7","8","9","10","11","12"],       weekList: ["日","一","二","三","四","五","六"]}

比如如下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()函數，如下：

    

如下所示

接着：

等。