我要做一个网页，希望显示的是日历，然后点击日历上面的每个日期显示文本框，或者弹出新的网页
1个回答
展开全部
花了点时间把以前的一个练习改成了OOP的
js是从Google CDN引用的
没法发附件，把css整合在一起，有点多
我觉得我的注释已经写得挺清楚了
另外还有一个jqueryUI的，百度抽风发不上来了
<!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=utf-8" />
<title>date</title>
<style type="text/css">
/*DatePicker Start*/
* {
margin:0;
padding:0;
}
.dp_year,.dp_month {
width:59%;
height:26px;
float:left;
background-color:#E4D2FF;
}
.dp_month {
width:39%;
background-color:#fee;
}
.dp_ym {
line-height:25px;
text-align:center;
}
.dp_ym a,.dp_day a {
text-decoration:none;
}
.dp_ym span {
padding:0 5px;
}
.dp_week {
width:99%;
height:26px;
float:left;
background-color:#efe;
}
.dp_week span {
color:#555;
font-size:14px;
}
.dp_day {
width:99%;
height:162px;
float:left;
}
.dp_day a {
display:block;
width:100%;
height:100%;
}
.dp_day a:hover {
text-decoration:underline;
}
.dp_day span {
background-color:#FCEF97;
}
.dp_day span:hover {
background-color:#f90;
}
.dp_wd span {
width:26px;
line-height:24px;
text-align:center;
border:1px solid #999;
display:block;
float:left;
overflow:hidden;
}
/*DatePicker End*/
/*Popup Start*/
#main {
width:205px;
height:220px;
border:1px solid red;
position:relative;
}
#win {
width:180px;
position:absolute;
display:none;
background-color:#f7f7f7;
top:15px;
left:8px;
}
#actualDate {
width:175px;
height:155px;
}
/*Popup End*/
</style>
<!--script type="text/javascript" src="jquery-1.7.1.min.js"></script-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="datepicker"></div>
<div id="win">
<textarea id="actualDate"></textarea>
<input type="button" id="btn" value="关闭"/>
</div>
</div>
</body>
<script type="text/javascript">
(function(){
DatePicker = function(c){
if(!c.div) return false; //如果没有传入容器就返回错误
this.config = { //配置
div:c.div,
pastDate:c.pastDate || false,
dayClick:c.dayClick || function(){},
setValue:{
textField:c.setValue.textField,
dateFormat:c.setValue.dateFormat || 'm/d/y'
}
};
this.div = $(this.config.div).css({ //设置容器的长宽
width:200,
height:214
});
this.init(); //初始化
};
//设置方法
DatePicker.prototype = {
init:function(){
//获取当前日期
this.today = this.getDate(); //当前日期，用于判断
this.date = this.getDate(); //Calendar上的日期，切换年月时，值会被修改
this.createDom(); //创建Calendar的html元素
this.day = $('span',this.dpDay);
this.createDays(); //生成具体号数
this.bind(); //绑定时间
},
createDom:function(){
//年份选择HTML
this.dpYear = $('<div>',{class:'dp_year dp_ym'}).appendTo(this.div);
this.yearPrev = $('<a>',{href:'###',text:'<<'}).appendTo(this.dpYear);
this.year = $('<span>',{text:this.date.year}).appendTo(this.dpYear);
this.yearNext = $('<a>',{href:'###',text:'>>'}).appendTo(this.dpYear);
//月份选择HTML
this.dpMonth = $('<div>',{class:'dp_month dp_ym'}).appendTo(this.div);
this.monthPrev = $('<a>',{href:'###',text:'<<'}).appendTo(this.dpMonth);
this.month = $('<span>',{text:this.date.month}).appendTo(this.dpMonth);
this.monthNext = $('<a>',{href:'###',text:'>>'}).appendTo(this.dpMonth);
//星期标识HTML
this.dpWeek = $('<div>',{class:'dp_week dp_wd'}).appendTo(this.div);
var w = ['日','一','二','三','四','五','六'];
for(var i=0;i<7;i++){
$('<span>',{text:w[i]}).appendTo(this.dpWeek);
}
//生成号数选择区
this.dpDay = $('<div>',{class:'dp_day dp_wd'}).appendTo(this.div);
for(var i=0;i<42;i++) {
$('<span>',{text:'null'}).appendTo(this.dpDay);
}
},
createDays:function(){
this.day.html(' '); //先清空所有方格
var dt=new Date();
dt.setFullYear(this.date.year,this.date.month-1,1);
var start=dt.getDay(), //根据年月获取该月1号是星期几,然后从第几格开始放入号数
end=this.howManyDaysInOneMonth()+start;
for(var i=start,k=1;i<end;i++,k++) {
this.day.get(i).innerHTML='<a href="###">'+k+'</a>';
};
},
//年份增加
yearPlus:function(){
var y = parseInt(this.year.html())+1;
//如果要求只能选择过去的日期，则年份不能大于today里的年份,下同
this.date.year = (this.config.pastDate && y>this.today.year)?y-1:y;
this.year.html(this.date.year);
},
yearMinus:function(){
this.date.year = this.year.html()-1;
this.year.html(this.date.year);
},
monthPlus:function(){
var m = parseInt(this.month.html())+1,
y = parseInt(this.year.html());
m = m>12?m-1:m;
this.date.month = (this.config.pastDate && y==this.today.year && m>this.today.month)?m-1:m;
this.month.html(this.date.month);
},
monthMinus:function(){
var m = this.month.html()-1;
this.date.month = m<1?m+1:m;
this.month.html(this.date.month);
},
bind:function(){
var _t = this; //保存指向DatePicker的指针
this.day.click(function(){
var day = $('a',this).html(); //获取点击的日期
if(!day) return false;
var year = _t.date.year,
month = _t.date.month;
date = _t.formatDate({ //格式化日期
year:year,
month:month,
day:day
});
if(_t.config.setValue.textField){ //如果设置了日期域,则将日期写入
$(_t.config.setValue.textField).val(date);
}
_t.config.dayClick({ //执行自定义dayClick函数
year:year,
month:month,
day:day,
formatDate:date
});
return false;
});
//为按钮绑定年份减小事件，下同
this.yearPrev.click(function(){
_t.yearMinus();
_t.createDays();
return false;
});
this.yearNext.click(function(){
_t.yearPlus();
_t.createDays();
return false;
});
this.monthPrev.click(function(){
_t.monthMinus();
_t.createDays();
return false;
});
this.monthNext.click(function(){
_t.monthPlus();
_t.createDays();
return false;
});
},
//格式化日期
formatDate:function(d){
var dateFormat = this.config.setValue.dateFormat;
dateFormat = dateFormat.replace(/m/i,d.month); //m,d,y分别代表月,日,年,不区分大小写
dateFormat = dateFormat.replace(/d/i,d.day);
return dateFormat.replace(/y/i,d.year);
},
//一个月有几天
howManyDaysInOneMonth:function(){
var month = this.date.month,year = this.date.year;
if($.inArray(month,[1,3,5,7,8,10,12])>=0) return 31;
else if($.inArray(month,[4,6,9,11])>=0) return 30;
else return ((year%4==0 && year%100!=0) || year%400==0)?29:28;
},
//获取日期,返回包含当前年月日的对象
getDate:function(){
var d=new Date();
return {
year:d.getFullYear(),
month:d.getMonth()+1,
day:d.getDay()
}
}
}
})();
//实例化日期选择器，传入一个包含参数的对象
var d = new DatePicker({
div:'#datepicker', //必须,String,放置DatePicker的容器
pastDate:true, //可选,Boolean,是否只能选择过去的日期
dayClick:function(date){ //可选,function,点选日期时执行
//console.log(date); //传入一个包含年月日与已格式化的日期
$('#win').show();
},
setValue:{
textField:'#actualDate', //可选,String,显示点选的日期
dateFormat:'y年m月d日' //可选,String,日期格式,默认m/d/y
}
});
$('#btn').click(function(){
$('#win').hide();
});
</script>
</html>
js是从Google CDN引用的
没法发附件，把css整合在一起，有点多
我觉得我的注释已经写得挺清楚了
另外还有一个jqueryUI的，百度抽风发不上来了
<!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=utf-8" />
<title>date</title>
<style type="text/css">
/*DatePicker Start*/
* {
margin:0;
padding:0;
}
.dp_year,.dp_month {
width:59%;
height:26px;
float:left;
background-color:#E4D2FF;
}
.dp_month {
width:39%;
background-color:#fee;
}
.dp_ym {
line-height:25px;
text-align:center;
}
.dp_ym a,.dp_day a {
text-decoration:none;
}
.dp_ym span {
padding:0 5px;
}
.dp_week {
width:99%;
height:26px;
float:left;
background-color:#efe;
}
.dp_week span {
color:#555;
font-size:14px;
}
.dp_day {
width:99%;
height:162px;
float:left;
}
.dp_day a {
display:block;
width:100%;
height:100%;
}
.dp_day a:hover {
text-decoration:underline;
}
.dp_day span {
background-color:#FCEF97;
}
.dp_day span:hover {
background-color:#f90;
}
.dp_wd span {
width:26px;
line-height:24px;
text-align:center;
border:1px solid #999;
display:block;
float:left;
overflow:hidden;
}
/*DatePicker End*/
/*Popup Start*/
#main {
width:205px;
height:220px;
border:1px solid red;
position:relative;
}
#win {
width:180px;
position:absolute;
display:none;
background-color:#f7f7f7;
top:15px;
left:8px;
}
#actualDate {
width:175px;
height:155px;
}
/*Popup End*/
</style>
<!--script type="text/javascript" src="jquery-1.7.1.min.js"></script-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="datepicker"></div>
<div id="win">
<textarea id="actualDate"></textarea>
<input type="button" id="btn" value="关闭"/>
</div>
</div>
</body>
<script type="text/javascript">
(function(){
DatePicker = function(c){
if(!c.div) return false; //如果没有传入容器就返回错误
this.config = { //配置
div:c.div,
pastDate:c.pastDate || false,
dayClick:c.dayClick || function(){},
setValue:{
textField:c.setValue.textField,
dateFormat:c.setValue.dateFormat || 'm/d/y'
}
};
this.div = $(this.config.div).css({ //设置容器的长宽
width:200,
height:214
});
this.init(); //初始化
};
//设置方法
DatePicker.prototype = {
init:function(){
//获取当前日期
this.today = this.getDate(); //当前日期，用于判断
this.date = this.getDate(); //Calendar上的日期，切换年月时，值会被修改
this.createDom(); //创建Calendar的html元素
this.day = $('span',this.dpDay);
this.createDays(); //生成具体号数
this.bind(); //绑定时间
},
createDom:function(){
//年份选择HTML
this.dpYear = $('<div>',{class:'dp_year dp_ym'}).appendTo(this.div);
this.yearPrev = $('<a>',{href:'###',text:'<<'}).appendTo(this.dpYear);
this.year = $('<span>',{text:this.date.year}).appendTo(this.dpYear);
this.yearNext = $('<a>',{href:'###',text:'>>'}).appendTo(this.dpYear);
//月份选择HTML
this.dpMonth = $('<div>',{class:'dp_month dp_ym'}).appendTo(this.div);
this.monthPrev = $('<a>',{href:'###',text:'<<'}).appendTo(this.dpMonth);
this.month = $('<span>',{text:this.date.month}).appendTo(this.dpMonth);
this.monthNext = $('<a>',{href:'###',text:'>>'}).appendTo(this.dpMonth);
//星期标识HTML
this.dpWeek = $('<div>',{class:'dp_week dp_wd'}).appendTo(this.div);
var w = ['日','一','二','三','四','五','六'];
for(var i=0;i<7;i++){
$('<span>',{text:w[i]}).appendTo(this.dpWeek);
}
//生成号数选择区
this.dpDay = $('<div>',{class:'dp_day dp_wd'}).appendTo(this.div);
for(var i=0;i<42;i++) {
$('<span>',{text:'null'}).appendTo(this.dpDay);
}
},
createDays:function(){
this.day.html(' '); //先清空所有方格
var dt=new Date();
dt.setFullYear(this.date.year,this.date.month-1,1);
var start=dt.getDay(), //根据年月获取该月1号是星期几,然后从第几格开始放入号数
end=this.howManyDaysInOneMonth()+start;
for(var i=start,k=1;i<end;i++,k++) {
this.day.get(i).innerHTML='<a href="###">'+k+'</a>';
};
},
//年份增加
yearPlus:function(){
var y = parseInt(this.year.html())+1;
//如果要求只能选择过去的日期，则年份不能大于today里的年份,下同
this.date.year = (this.config.pastDate && y>this.today.year)?y-1:y;
this.year.html(this.date.year);
},
yearMinus:function(){
this.date.year = this.year.html()-1;
this.year.html(this.date.year);
},
monthPlus:function(){
var m = parseInt(this.month.html())+1,
y = parseInt(this.year.html());
m = m>12?m-1:m;
this.date.month = (this.config.pastDate && y==this.today.year && m>this.today.month)?m-1:m;
this.month.html(this.date.month);
},
monthMinus:function(){
var m = this.month.html()-1;
this.date.month = m<1?m+1:m;
this.month.html(this.date.month);
},
bind:function(){
var _t = this; //保存指向DatePicker的指针
this.day.click(function(){
var day = $('a',this).html(); //获取点击的日期
if(!day) return false;
var year = _t.date.year,
month = _t.date.month;
date = _t.formatDate({ //格式化日期
year:year,
month:month,
day:day
});
if(_t.config.setValue.textField){ //如果设置了日期域,则将日期写入
$(_t.config.setValue.textField).val(date);
}
_t.config.dayClick({ //执行自定义dayClick函数
year:year,
month:month,
day:day,
formatDate:date
});
return false;
});
//为按钮绑定年份减小事件，下同
this.yearPrev.click(function(){
_t.yearMinus();
_t.createDays();
return false;
});
this.yearNext.click(function(){
_t.yearPlus();
_t.createDays();
return false;
});
this.monthPrev.click(function(){
_t.monthMinus();
_t.createDays();
return false;
});
this.monthNext.click(function(){
_t.monthPlus();
_t.createDays();
return false;
});
},
//格式化日期
formatDate:function(d){
var dateFormat = this.config.setValue.dateFormat;
dateFormat = dateFormat.replace(/m/i,d.month); //m,d,y分别代表月,日,年,不区分大小写
dateFormat = dateFormat.replace(/d/i,d.day);
return dateFormat.replace(/y/i,d.year);
},
//一个月有几天
howManyDaysInOneMonth:function(){
var month = this.date.month,year = this.date.year;
if($.inArray(month,[1,3,5,7,8,10,12])>=0) return 31;
else if($.inArray(month,[4,6,9,11])>=0) return 30;
else return ((year%4==0 && year%100!=0) || year%400==0)?29:28;
},
//获取日期,返回包含当前年月日的对象
getDate:function(){
var d=new Date();
return {
year:d.getFullYear(),
month:d.getMonth()+1,
day:d.getDay()
}
}
}
})();
//实例化日期选择器，传入一个包含参数的对象
var d = new DatePicker({
div:'#datepicker', //必须,String,放置DatePicker的容器
pastDate:true, //可选,Boolean,是否只能选择过去的日期
dayClick:function(date){ //可选,function,点选日期时执行
//console.log(date); //传入一个包含年月日与已格式化的日期
$('#win').show();
},
setValue:{
textField:'#actualDate', //可选,String,显示点选的日期
dateFormat:'y年m月d日' //可选,String,日期格式,默认m/d/y
}
});
$('#btn').click(function(){
$('#win').hide();
});
</script>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
