DIY一个JS年月calendar

最新推荐文章于 2019-07-26 13:03:41 发布

最新推荐文章于 2019-07-26 13:03:41 发布 · 224 阅读

文章标签：

#年月日历 DIY JS web

web 专栏收录该内容

2 篇文章

订阅专栏

本文分享了一个使用jQuery实现的自定义年月选择器的开发过程。该选择器旨在解决仅需选择年月的需求，通过点击输入框弹出包含年份下拉列表及月份表格的选择界面。

写一个项目，遇到需求：只输入年月。我在网上找不半天的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月" />&nbsp;&nbsp;&nbsp;&nbsp;
		<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没学好。高手教教我。把这个项目整完。我留点时间写写我接下来的四次面试。