您的位置:首页 > Web前端 > JavaScript

JS日历控件 灵活设置: 精确的时分秒.

2017-05-19 08:51 295 查看
在今年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" 年月日时分秒。



[b] 3. "yyyy-mm-dd HH:MM" 年月日时分

[/b]
separator日期的分隔符 默觉得 -
wday 0, 设置周的第一天,默认从第一天開始

language对象:

{

year: "年",

month: "月",

monthList: ["1","2","3","4","5","6","7","8","9","10","11","12"],

[b] weekList: ["日","一","二","三","四","五","六"]}

[/b]
比方例如以下demo年月日的示意图例如以下:



时分秒的demo例如以下:



时分的demo例如以下:



HTML代码例如以下:

当然在头部要引入例如以下JS文件:

<script src="jquery-1.9.1.js"></script>

<script src="calendar.js"></script>

依赖于jquery框架。

后面的是日历控件JS

初始化方式例如以下:

代码分析:

1. 页面初始化时。调用init()方法,生成日历控件代码,例如以下所看到的:



2. 初始化完毕后,调用渲染日历面板的函数
_renderCalendarPanel(),例如以下所看到的:\



3. 在_renderCalendarPanel()函数做一些推断例如以下:



4. 在第三步定义了每月的天数 self.month_day; 定义了周末(周六,周日)的位置是第几个,例如以下所看到的:



接着代码例如以下:









例如以下设置wday = 2



_dayNumOfMonth函数的意思例如以下:



5. 以下我们接着来看看 通过春节 月份来渲染天数 _renderBody()函数,例如以下:





例如以下所看到的



接着:









等。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: