帶時分秒的JS日曆控

君望永遠發表於2014-12-21
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()函式，如下：

    

如下所示

接著：

等。

JS所有程式碼如下：

 View Code

JS日曆控制元件demo下載

相關文章