首页 > 代码库 > JS日历控件 灵活设置: 精确的时分秒.
JS日历控件 灵活设置: 精确的时分秒.
当我切换到其它年份的时候，我点击 "今天"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="http://www.mamicode.com/jquery-1.9.1.js"></script>
<script src="http://www.mamicode.com/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日历控件 灵活设置: 精确的时分秒.