日历插件 js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>blog式日历控件</title>
</head>
<body>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var Calendar = Class.create();
Calendar.prototype = {
initialize: function(container, options) {
this.Container = $(container);//容器(table结构)
this.Days = [];//日期对象列表
this.SetOptions(options);
this.Year = this.options.Year || new Date().getFullYear();
this.Month = this.options.Month || new Date().getMonth() + 1;
this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
this.onSelectDay = this.options.onSelectDay;
this.onToday = this.options.onToday;
this.onFinish = this.options.onFinish;
this.Draw();
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Year: 0,//显示年
Month: 0,//显示月
SelectDay: null,//选择日期
onSelectDay: function(){},//在选择日期触发
onToday: function(){},//在当天日期触发
onFinish: function(){}//日历画完后触发
};
Extend(this.options, options || {});
},
//当前月
NowMonth: function() {
this.PreDraw(new Date());
},
//上一月
PreMonth: function() {
this.PreDraw(new Date(this.Year, this.Month - 2, 1));
},
//下一月
NextMonth: function() {
this.PreDraw(new Date(this.Year, this.Month, 1));
},
//上一年
PreYear: function() {
this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1));
},
//下一年
NextYear: function() {
this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1));
},
//根据日期画日历
PreDraw: function(date) {
//再设置属性
this.Year = date.getFullYear(); this.Month = date.getMonth() + 1;
//重新画日历
this.Draw();
},
//画日历
Draw: function() {
//用来保存日期列表
var arr = [];
//用当月第一天在一周中的日期值作为当月离第一天的天数
for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); }
//用当月最后一天在一个月中的日期值作为当月的天数
for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
//清空原来的日期对象列表
this.Days = [];
//插入日期
var frag = document.createDocumentFragment();
while(arr.length){
//每个星期插入一个tr
var row = document.createElement("tr");
//每个星期有7天
for(var i = 1; i <= 7; i++){
var cell = document.createElement("td"); cell.innerHTML = " ";
if(arr.length){
var d = arr.shift();
if(d){
cell.innerHTML = d;
this.Days[d] = cell;
var on = new Date(this.Year, this.Month - 1, d);
//判断是否今日
this.IsSame(on, new Date()) && this.onToday(cell);
//判断是否选择日期
this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell);
}
}
row.appendChild(cell);
}
frag.appendChild(row);
}
//先清空内容再插入(ie的table不能用innerHTML)
while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
this.Container.appendChild(frag);
//附加程序
this.onFinish();
},
//判断是否同一日
IsSame: function(d1, d2) {
return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
}
}
</script>
<style type="text/css">
.Calendar {
font-family:Verdana;
font-size:12px;
background-color:#e0ecf9;
text-align:center;
width:200px;
height:160px;
padding:10px;
line-height:1.5em;
}
.Calendar a{
color:#1e5494;
}
.Calendar table{
width:100%;
border:0;
}
.Calendar table thead{color:#acacac;}
.Calendar table td {
font-size: 11px;
padding:1px;
}
#idCalendarPre{
cursor:pointer;
float:left;
padding-right:5px;
}
#idCalendarNext{
cursor:pointer;
float:right;
padding-right:5px;
}
#idCalendar td.onToday {
font-weight:bold;
color:#C60;
}
#idCalendar td.onSelect {
font-weight:bold;
}
</style>
<div class="Calendar">
<div id="idCalendarPre"><<</div>
<div id="idCalendarNext">>></div>
<span id="idCalendarYear"></span>年 <span id="idCalendarMonth"></span>月
<table cellspacing="0">
<thead>
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody id="idCalendar">
</tbody>
</table>
</div>
<input id="idCalendarPreYear" type="button" value="上一年" />
<input id="idCalendarNow" type="button" value="当前月" />
<input id="idCalendarNextYear" type="button" value="下一年" />
<script language="JavaScript">
var cale = new Calendar("idCalendar", {
SelectDay: new Date().setDate(10),
onSelectDay: function(o){ o.className = "onSelect"; },
onToday: function(o){ o.className = "onToday"; },
onFinish: function(){
$("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month;
var flag = [10,15,20];
for(var i = 0, len = flag.length; i < len; i++){
this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
}
}
});
$("idCalendarPre").onclick = function(){ cale.PreMonth(); }
$("idCalendarNext").onclick = function(){ cale.NextMonth(); }
$("idCalendarPreYear").onclick = function(){ cale.PreYear(); }
$("idCalendarNextYear").onclick = function(){ cale.NextYear(); }
$("idCalendarNow").onclick = function(){ cale.NowMonth(); }
</script>
</body>
</html>
日历插件 js的更多相关文章
- 日历插件js,jquery
常用的日历插件 DatePicker My97DatePicker 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有问题一起学习欢迎留言. ...
- jquery.jCal.js显示日历插件
描述:日历插件jCal用于需要输入日期的表单文本框. 兼容浏览器:IE浏览器/Firefox/Google Chrome 官方链接: http://www.overset.com/2008/05/1 ...
- 完全原生javascript简约日历插件，js、html
效果图: 效果如图所示,尽管看上去并不是很美观,但是,基本上的功能还是已经完成了,码了一天多的时间,权当做复习一下js吧. 整个做下来差不多码了500多行代码~其实只是很多的样式也包括了在其中了,虽然 ...
- 原生js日历选择器，学习js面向对象开发日历插件
在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...
- js日历插件 中文、英文日历
日历插件 来源网站:http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 六款英文日历 http://www.bobd.cn/desi ...
- 被逼着写的jquery工作日管理日历插件
因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...
- 日历插件FullCalendar应用：(二)数据增删改
接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
随机推荐
- [POI2015]LAS
洛谷题目链接 动态规划: 这里用一种我想不到的思想,我们以美食来转移,设计状态$f[i][S](S\in\{0\sim3\})$其中$S$为$0$时表示第$i$个食物没有被人选,$1$表示被左边的人选 ...
- bzoj4400
/* * 此题同bzoj2725 * 增加了枚举边的操作 */ #include <bits/stdc++.h> ;// oo = 999999999; #define LL long l ...
- 费马小定理 x
费马小定理(Fermat Theory) 是数论中的一个重要定理,其内容为: 假如p是质数,且gcd(a,p)=1,那么 a(p-1)≡1(mod p).即:假如a是整数,p是质数,且a,p互质(即两 ...
- 二十五、grub (Boot Loader) 以及修复grub
双系统安装(先Windows后Linux,以免windows NTloader会覆盖Linux loader) GRUB Grand Uniform Bootloader CentOS5,6 grub ...
- Java微信公众号开发梳理
Java微信公众号开发梳理 现在微信公众平台的开发已经越来越普遍,这次开发需要用到微信公众平台.因此做一个简单的记录,也算是给那些没踩过坑的童鞋一些启示吧.我将分几块来简单的描述一下,之后会做详细的说 ...
- Java操作Cookie方法
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- [MyBatis]org.apache.ibatis.binding.BindingException的避免
我遇到的org.apache.ibatis.binding.BindingException问题是因为Mapper.java中接口和SQL的参数多于一个,Mybatis不知道如何一一对应,解决方法是加 ...
- 前端 - 轮询, 长轮训, websocket
轮询 概念 ajax 轮询的原理很简单,让浏览器间隔几秒就发送一次请求,询问服务器是否有新信息 代码 function showUnreadNews() { $(document).ready(fun ...
- linux系统下的rz、sz详解
对于linux服务器来说,通常我们是通过一些ssh工具进行远程访问连接的,而对于经常使用它的人来说,少不了将文件上传下载到服务器.如何能够快速的同服务器进行文件的交互尤为重要.不然每次都打开单独的ss ...
- CentOS下yum安装mysql
其实跟windows下安装过程差别不大,就是下载为了方便使用了yum的方式.安装前先确认下系统是否还安装mysql,卸载是否不完全,再去官网(http://dev.mysql.com/download ...