Skip to content

Instantly share code, notes, and snippets.

@Bunny-rabbit

Bunny-rabbit/calendar

Last active August 29, 2015 14:07
Show Gist options
  • Save Bunny-rabbit/6b79babacf0a5b141fb7 to your computer and use it in GitHub Desktop.
Save Bunny-rabbit/6b79babacf0a5b141fb7 to your computer and use it in GitHub Desktop.
Download ZIP
日历
Raw
calendar
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://g.tbcdn.cn/thx/cube/1.2.1/neat-min.css">
<style>
.calendar{width: 500px;height: 500px;border: 1px solid #000;display: none;position: absolute;top:24px;left: 0px;background: #fff;}
.calendar table{text-align: center;line-height: 42px;}
.calendar th{font-weight: normal;width: 37px;height: 42px;text-align: center;}
.calendar td{text-align: center;}
.calendar td a{color:#222;display: block;width: 37px;height: 42px;}
.calendar td.cld_gray a{color: #BFBFC5;}
.calendar td.cld_red a{color:#f00;}
table th, table td{padding: 0px;}
</style>
</head>
<body>
<input type="text" value="" readonly class="cl_plugins_calendar" />
<div class="aa" style="width:200px;height:1200px;background: #000;">11111</div>
</body>
</html>
<script>
$(function(){
var calendar={} //日历对象
calendar.index=0;
calendar.interface=function(h){
$(".cl_plugins_calendar").on("click",function(){
calendar.index=$(this).index();
$(".calendar").eq(calendar.index).show();
})
$(document).mouseup(function(e){
var _con = $('.calendar');
if(!_con.is(e.target) && _con.has(e.target).length === 0){
_con.hide();
}
})
}
calendar.table_html=[
'<div class="calendar">',
'<select name="year" id="calendar_year">',
'</select>',
'<select name="month" id="calendar_month">',
'<option value=0>1月</option>',
'<option value=1>2月</option>',
'<option value=2>3月</option>',
'<option value=3>4月</option>',
'<option value=4>5月</option>',
'<option value=5>6月</option>',
'<option value=6>7月</option>',
'<option value=7>8月</option>',
'<option value=8>9月</option>',
'<option value=9>10月</option>',
'<option value=10>11月</option>',
'<option value=11>12月</option>',
'</select>',
'<a href="javascript:void(0)" class="return_today">返回今天</a>',
'<table id="calendar_table">',
'<caption>日历插件</caption>',
'<tr id="calendar_week">',
'<th>一</th>',
'<th>二</th>',
'<th>三</th>',
'<th>四</th>',
'<th>五</th>',
'<th>六</th>',
'<th>日</th>',
'</tr>',
'</table>',
'</div>'
];
$(".cl_plugins_calendar").after(calendar.table_html.join(''));
calendar.local_date=new Date(); //这里判断是否本地时间还是通过ajax获取服务器时间
calendar.year=calendar.local_date.getFullYear(); //获得当前年份
calendar.month=calendar.local_date.getMonth(); //获得当前月份
calendar.day=calendar.local_date.getDate(); //获得当前是几号
calendar.now_year=calendar.year;
calendar.now_month=calendar.month;
calendar.now_day=calendar.day;
calendar.up_day_arr=[];
calendar.down_day_arr=[];
calendar.Draw_ymd=function(){ //渲染select
var year_html=[];
for(var i=1970;i<2050;i++){
year_html.push('<option value='+i+'>'+i+'年</option>')
}
$("#calendar_year").append(year_html.join(''))
}
calendar.Draw_ymd()
calendar.Draw_mouth=get_theMouth_hasDay(calendar.year,calendar.month,0,calendar.day);//画月份图 参数分别是 年,月,0,日
function get_theMouth_hasDay(y,m,d,nd){
$("table tr:gt(0)").remove();
calendar.updown_day_arr=[];
var arr=[], //这个数组用于存储 月份图中的具体的日期显示
show_arr=[], //用于存放当月天数
now_month_all_day=(new Date(y,m+1,d)).getDate(), //获得当前月份一共有多少天 取天数时 月份从1-12开始算 取星期几时 月份从0-11开始算
now_month_start_day=(new Date(y,m,1)).getDay(), //这个月第一天是星期几
now_month_end_day=(new Date(y,m,now_month_all_day)).getDay(), //这个月结束那天是星期几
up_month_all_day=(new Date(y,m,d).getDate()), //获取上个月的总天数
up_month_show_day=0;
if(now_month_start_day==1){
}else{
up_month_show_day=(now_month_start_day==0?7:now_month_start_day)-1; //根据当月第一天是星期几 来获取要显示的上月的天数
for(var k=(up_month_all_day-up_month_show_day+1);k<=up_month_all_day;k++){ //把上月要显示的天数加入数组中
arr.push(k)
}
for(var i=0;i<up_month_show_day;i++){ //把上月要显示的天数加入数组中
calendar.up_day_arr.push(i)
}
}
for(var i=1;i<=now_month_all_day;i++){ //把当月的天数加入数组中
arr.push(i);
show_arr.push(i)
}
if(now_month_end_day==0){ //把下月的要显示的天数加入数组中
}else{
for(var j=1;j<=(7-now_month_end_day);j++){
arr.push(j)
}
for(var i=(parseInt(up_month_show_day)+parseInt(now_month_all_day));i<arr.length;i++){ //把下月要显示的天数加入数组中
calendar.down_day_arr.push(i)
}
}
var line_num=arr.length/ 7,
td_html=[];
for(var i=0;i<line_num;i++){
td_html.push('<tr>')
for(var j=i*7;j<(i+1)*7;j++){
td_html.push('<td><a href="javascript:void(0)" class="calendar_a">'+arr[j]+'</a></td>');
}
td_html.push('</tr>')
}
$("#calendar_week").after(td_html.join(''));
for(var i=0;i<up_month_show_day;i++){
$(".calendar td").eq(i).addClass("cld_gray")
}
for(var i=arr.length-(7-now_month_end_day);i<arr.length;i++){
$(".calendar td").eq(i).addClass("cld_gray")
}
$("table#calendar_table td").eq(up_month_show_day+nd-1).addClass("cld_red")
}
function select_ymd(y,m){ //select checked 状态选择
$("select#calendar_year option").eq(y-1970).attr("selected","selected");
$("select#calendar_month option").eq(m).attr("selected","selected");
}
select_ymd(calendar.year,calendar.month)
$(".calendar caption").html(calendar.year+"年"+(calendar.month+1)+"月"+calendar.day+"日");
$("#calendar_year,#calendar_month").bind('change',function(){ //在年月select 添加监听事件
calendar.now_year=parseInt($("select#calendar_year option:selected").val());
calendar.now_month=parseInt($("select#calendar_month option:selected").val());
get_theMouth_hasDay(calendar.now_year,calendar.now_month,0,1)
})
$(".return_today").click(function(){ //回到今天 函数
calendar.now_year=calendar.year
calendar.now_month=calendar.month
select_ymd(calendar.year,calendar.month)
get_theMouth_hasDay(calendar.year,calendar.month,0,calendar.day)
})
$("table#calendar_table").on('click','a',function(){
var index=$("#calendar_table a").index($(this))
calendar.now_day=$(this).html()
for(var a in calendar.up_day_arr){
if(index==calendar.up_day_arr[a]){
$(".cl_plugins_calendar").eq(calendar.index).val(parseInt(calendar.now_year)+"-"+(parseInt(calendar.now_month))+"-"+parseInt(calendar.now_day))
return true;
}
}
for(var a in calendar.down_day_arr){
if(index==calendar.down_day_arr[a]){
$(".cl_plugins_calendar").eq(calendar.index).val(parseInt(calendar.now_year)+"-"+(parseInt(calendar.now_month)+2)+"-"+parseInt(calendar.now_day))
return true;
}
}
$(".cl_plugins_calendar").eq(calendar.index).val(parseInt(calendar.now_year)+"-"+(parseInt(calendar.now_month)+1)+"-"+parseInt(calendar.now_day))
})
calendar.interface("http://www.baidu.com");//第一个参数代表input是否允许手动输入 0不允许 1允许 第二个参数代表服务器时间地址
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment