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

    

例如以下所看到的

接着:

等。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com