Heim > Web-Frontend > js-Tutorial > JavaScript blog式日历控件新算法_时间日期

JavaScript blog式日历控件新算法_时间日期

WBOY
Freigeben: 2016-05-16 19:01:15
Original
1155 Leute haben es durchsucht

使用说明:

程序比较简单,代码中都有说明,这里说说怎么使用。
首先是实例化一个Calendar,并设置参数。
参数说明:
Year:要显示的年份
Month:要显示的月份
SelectDay:选择日期
onSelectDay:在选择日期触发
onToday:在当天日期触发
onFinish:日历画完后触发

一般SelectDay设置成选择了的日期,并在onSelectDay中设置一个函数用来设置这个日期的样式,
例如实例里SelectDay设置成今个月10号并在那天样式设为onSelect:

复制代码 代码如下:

SelectDay: new Date().setDate(10),
onSelectDay: function(o){ o.className = "onSelect"; },

而onToday就用来设置今日日期的样式,
例如实例里面把今天的日期的样式设为onToday:

onToday: function(o){ o.className = "onToday"; },
在onFinish中可以放需要设置日历的程序。
可以通过this.Year和this.Month获取当前日历显示的年份和月份。
对有数据的日期的也在这里设置,例如实例中是有一个当前月份的有数据的日期列表,然后根据这个列表对相应的日期进行设置:
复制代码 代码如下:

var flag = [10,15,20];
for(var i = 0, len = flag.length; i this.Days[flag[i]].innerHTML = "" + flag[i] + "";
}
实例中是固定了这个日期列表,实际应用中可以根据年份月份获取对应的日期列表,
个人推荐用年份月份通过ajax获取。

程序中还有两个有用的方法PreMonth(显示上一个月)和NextMonth(显示下一个月)。

测试代码:
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage