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

    

如下所示

接着：

等。