DIY一个JS岁月calendar
日期：2014-05-16 浏览次数：20406 次
DIY一个JS年月calendar
写一个项目，遇到需求：只输入年月。我在网上找不半天的JS控件，无果。TX哥们让我自已写个，好吧。那就写试试。
不要紧，一写就是两天。居然都没成功。晕。。。。。。上代码。下面。
?
?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MyCalendar</title>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
$(function(){
function YMCal(obj){
this.output_ym="";
this.cur_year=new Date().getFullYear();
this.start_year=1936;
this.sl_year=0;
this.sl_month=12;
this.init=function(){
for(var i=this.start_year;i<=this.cur_year;i++){
$("<option value='"+i+"年'>"+i+"年</option>").appendTo("#ym_year");
}
if(obj.val()!=null&&obj.val()!=""){
this.sl_year=obj.val().substr(0,4);
this.sl_month=obj.val().substring(5,obj.val().length-1);
}else{
this.sl_year=this.cur_year-24;
}
$("#ym_month table tr td").removeClass("m_select");
$("#ym_month table tr td:eq("+(this.sl_month-1)+")").addClass("m_select");
$("#ym_year option[value='"+this.sl_year+"年']").attr("selected", true);
$("#ym_calendar").css("margin-left",obj.position().left-6);
$("#ym_calendar").show();
$("#ym_calendar").insertAfter(obj);
$("#ym_month table tr td").hover(function(){
$(this).addClass("focus");
},function(){
$(this).removeClass("focus");
}).click(function(){
this.sl_month=$(this).text();
this.sl_year=$("#ym_year").find("option:selected").text();
this.output_ym=this.sl_year+this.sl_month;
obj.val(this.output_ym);
$("#ym_calendar").hide();
});
obj.blur(function(){
$("#ym_calendar").hide();
});
};
}
$("#myCalendar").click(function(){
var ymCal= new YMCal($(this));
ymCal.init();
});
$("#myCalendar2").click(function(){
var ymCal= new YMCal($(this));
ymCal.init();
});
});
</script>
<style type="text/css">
#ym_calendar {
z-index: 99;
position: absolute;
width: 170px;
color: black;
border: #A9A9FF 1px solid;
background: white;
padding: 1px;
}
#ym_calendar .title {
width: 100%;
background: green;
clear: both;
color: white;
font-size: 12px;
letter-spacing: 1px;
padding: 2px 0 2px 0;
text-align: center;
font-weight: bold;
}
#ym_calendar .title #year_text{
margin-right: 20px;
}
#ym_calendar #ym_year{
margin-right:0px;
}
#ym_calendar #ym_month{
width: 100%;
height: 90px;
background: #F9F7FF;
margin-top: 5px;
}
#ym_calendar #ym_month table tr td.focus {
background: white;
border: solid 1px #A9A9FF;
}
#ym_calendar #ym_month table tr td.m_select {
font-weight: bold;
cursor: default;
}
#ym_calendar #ym_month table tr td{
padding: 2px;
text-align: center;
color: #3F419E;
cursor: pointer;
font-family: Arial, Helvetica, sans-seri
}
</style>
</head>
<body>
<div id="ym_calendar" style="display: none;">
<div class="title" ><span id="year_text">教育年份</span>
<select id="ym_year"></select>
</div>
<div id="ym_month">
<table style="width: 100%">
<tr>
<td width="25%">1月</td>
<td width="25%">2月</td>
<td width="25%">3月</td>
<td width="25%">4月</td>
</tr>
<tr>
<td width="25%">5月</td>
<td width="25%">6月</td>
<td width="25%">7月</td>
<td width="25%">8月</td>
</tr>
<tr>
<td width="25%">9月</td>
<td width="25%">10月</td>
<td width="25%">11月</td>
<td width="25%">12月</td>
</tr>
</table>
</div>
</div>
<input type="text" id="myCalendar"
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
