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

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

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

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

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

     4. 添加確定button 及 今天 和關閉button。

當我切換到其它年份的時候，我點擊 "今天"button 就能夠返回當前的年月份。

 

配置項例如以下：

 

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

    

例如以下所看到的

接着：

等。