写一个项目,遇到需求:只输入年月。我在网上找不半天的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没学好。高手教教我。把这个项目整完。我留点时间写写我接下来的四次面试。
- 大小: 14.4 KB
分享到:
相关推荐
NULL 博文链接:https://dabei0.iteye.com/blog/397694
织织网应实际使用开发的一个js年月选择器,采用原生js开发,兼容IE、FF(Firefox)、谷歌(Chrome),其他杂牌浏览器都是基于这三种内核的,就不一一测试了。 插件非常的简单,完全开源,可以做二次开发。 因为很...
JS 年月选择控件 JS 年月选择控件 JS 年月选择控件http://zhidao.baidu.com/question/328277855.html预览、 希望懂css的多多改善、
VS2008自带的Calendar只能一个月一个月的切换,你要选几年前的就受不子,于是本人经过三天的学习制作终于完成了二个DropDownList(年与月的选择)与Calendar互动的绑定,并做成控件,可供初学控件的朋友学习,并提出...
纯js年月日联动,无刷新下拉框,符合日期规则,手动更改起止年
很好用,比较常用的Calendar JS插件,希望大家用得开心 。
js代码,年月日三级联动,js三级联动年月日
通过js实现的年月组件,需要的朋友可以下载
很强大的一段JS 显示 年月日星期 农历 时分秒。比平时只有年月日星期时分秒的多了农历。很强大的一段JS 显示 年月日星期 农历 时分秒。比平时只有年月日星期时分秒的多了农历。
js获取年月日和当月的天数
最终与同事一样倒腾出一个来。 js年月控件(无日) 使用了jquery,共3个文件,使用说明内附。 下载地址: http://u.115.com/file/f388284d67 广告一下我的QQ群,谢绝只加群不说话的人加入。 WEB前端群:...
自己写的一个用javascript控制年月日输入的函数. 外加一个别人的验证函数。 如不嫌小弟写的差就拿去用吧!
js 实现年月日下拉选择 包括计算闰年 功能比较全,只是下拉条的高度没有控制
js年月日3级联动js年月日3级联动js年月日3级联动js年月日3级联动js年月日3级联动js年月日3级联动js年月日3级联动
简单实用的年月日JS,年月日,非常好用,只要将其js链接到页面并定义年月日三个SelectBox。
包含两种js控件:1、只有年 2、只有年月。希望能帮到大家。
JS控件显示年月日,用于网页时间选择!精确美观,兼容性好!
js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动
计算两个时间的差(年月日星期小时分钟秒),代码有问题可以留言,我看到就会回复。
1、支持年月日选择 2、支持年月选择