浏览 3581 次
|
锁定老帖子 主题：DIY一个JS年月calendar
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-08-07
写一个项目，遇到需求：只输入年月。我在网上找不半天的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" readonly="readonly" value="1989年12月" />
<input type="text" id="myCalendar2" readonly="readonly" value="1987年3月" />
<br/><input/>
</body>
</html>
1.我希望点击的时候，改变input域的值。之前写的乱的时候，click事件还有效，后来封装 了个YMCal Object click事件没效果。 2.点击input域时，弹出ym_calendar div日历。这个div要与input域左对齐，正下方。覆盖 在其中层之上。似乎对齐在ie下有些不兼容。 3.如果一个页面里有二个以上的地方需要这个日历，但是同一时刻只弹出一个ym_calendar div，所以好的设计应该使页面内只有一个ym_calendar div，而不是clone。同一个div， 与两个input域的关系，传参得注意了。我的click事件有时候会有效，然后点击的时候， 两个input域同时改变值。 4.我想应该有更好的封装方式。使调用的时候像jquery ui datepicker 一样,$.datepicker({param:param1}); 呵呵。js没学好。高手教教我。把这个项目整完。我留点时间写写我接下来的四次面试。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-08-17
只输入年月，使用My97 Datepicker,不过有访问其主页的问题
|
| 返回顶楼 | |
|
发表时间：2011-08-17
js 日期空间很多吧。。。。
|
| 返回顶楼 | |
|
发表时间：2011-08-17
国内的还真没有找过一个好的日期控件，特别是支持各种版本号和浏览器的。而国外的，怕客户不懂EN，就没用了。当然，我也是懒人。
|
| 返回顶楼 | |
|
发表时间：2011-08-18
zui4yi1 写道 国内的还真没有找过一个好的日期控件，特别是支持各种版本号和浏览器的。而国外的，怕客户不懂EN，就没用了。当然，我也是懒人。
MyDate97确实可以啊，很便捷 |
| 返回顶楼 | |
