jquery日期选择插件

这个插件最近发现有一个小Bug，已经修改过。

 

又写了一个日期选择插件，大家看代码吧，不知怎么的，老是上传不了资源文件了

 

 /* * $-color 0.1 - New Wave Javascript * * Copyright (c) 2008 King Wong * $Date: 2008-10-3 $ */ (function($){ var ___d = new Date(); var ___tem___ = ___d.getTime(); var _sobj; $.extend({ selectDateSettings:{ date:___d.getFullYear()+"-"+(___d.getMonth()+1)+"-"+___d.getDate(), startYear:___d.getFullYear()-20, endYear:___d.getFullYear()+5, dateFormat:"yyyy-mm-dd", target:window.self }, selectDateSetup: function( settings ) { $.extend( $.selectDateSettings, settings ); } }) $.fn.extend({ selectDate:function(){ var _d = new Date(); //var ___tem___ = _d.getTime(); var nowDate = eval("new Date("+$.selectDateSettings.date.replace(new RegExp("-","gm"),",")+")"); nowDate.setMonth(nowDate.getMonth()-1); return this.each(function(){ var __showDate = function(_obj) { var _strYear = new Array(); var _strMonth = new Array(); var _mon = new Array('Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'); var _left = parseInt($(_obj).offset().left); var _top = parseInt($(_obj).offset().top); var _width = parseInt($(_obj).width()); var _height = parseInt($(_obj).height()); var _maxindex = function(){ var ___index = 0; $.each($("*",$.selectDateSettings.target.document),function(i,n){ var __tem = $(n,$.selectDateSettings.target.document).css("z-index"); if(__tem>=0) { if(__tem >= ___index) { ___index = __tem + 1; } } }); return ___index; }(); for(var i = 0 ; i < 12 ; i++) { if(i == nowDate.getMonth()) { _strMonth.push(''+_mon[i]+''); } else { _strMonth.push(''+_mon[i]+''); } } for(var j = $.selectDateSettings.startYear ; j <= $.selectDateSettings.endYear ; j++) { if(j == nowDate.getFullYear()) { _strYear.push(''+j+''); } else { _strYear.push(''+j+''); } } var getDayStr = function(y,m) { var year; var month; var nextyear; var nextmonth; if(y=="" || y==undefined) { year = parseInt($("select[id=year_"+___tem___+"] option[selected]",$.selectDateSettings.target.document).val()); month = parseInt($("select[id=mon_"+___tem___+"] option[selected]",$.selectDateSettings.target.document).val()); } else { year = parseInt(y); month = parseInt(m); } if(year==0){ year = nowDate.getFullYear(); month = nowDate.getMonth()+1; } var _selectD; if(month==0){ _selectD = new Date(year-1,11,1); }else{ _selectD = new Date(year,month-1,1); } if(month==12){ nextyear = year+1; nextmonth = 0; } else { nextyear = year; nextmonth = month; } var _nextD = new Date(nextyear,nextmonth,1); var __day = parseInt(Math.abs(_nextD - _selectD) / 1000 / 60 / 60 /24); var __str__ = new Array(); __str__.push(''); for(var ii = 0 ; ii < _selectD.getDay(); ii++) { __str__.push(' '); } for(var nn = 1 ; nn <= __day; nn++) { var _DD_ = new Date(year,month-1,nn); __str__.push(''+nn+''); if(_DD_.getDay()==6) { __str__.push(''); if(nn<__day) { __str__.push(''); } } } var __NN__ = _selectD.getDay() + __day; var __mod__ = __NN__%7 if(__mod__!=0){ for(var mm = 0 ; mm < (7-__mod__) ; mm++) { __str__.push(' '); } __str__.push(''); } return '

'+__str__.join("")+'

日

一

二

三

四

五

六

'; } var __changeDate = function() { $("#daystr_"+___tem___,$.selectDateSettings.target.document).empty(); $("#daystr_"+___tem___,$.selectDateSettings.target.document).append(getDayStr()); $(".king_date_css",$.selectDateSettings.target.document).click(function(){ var _y_ = $("select[id=year_"+___tem___+"] option[selected]",$.selectDateSettings.target.document).val(); var _m_ = $("select[id=mon_"+___tem___+"] option[selected]",$.selectDateSettings.target.document).val(); var _d_ = $(this).text(); _m_ = _m_.length < 2 ? "0"+_m_ : _m_; _d_ = _d_.length < 2 ? "0"+_d_ : _d_; var returndate = $.selectDateSettings.dateFormat.replace("yyyy",_y_).replace("mm",_m_).replace("dd",_d_); $(_obj).val(returndate); }); } var _str = '

'+_strYear.join("")+' 年 '+_strMonth.join("")+' 月

Current Date

'; $("body",$.selectDateSettings.target.document).append(_str); $("#daystr_"+___tem___,$.selectDateSettings.target.document).append(getDayStr()); $("#year_"+___tem___,$.selectDateSettings.target.document).change(function(){ __changeDate(); }); $("#mon_"+___tem___,$.selectDateSettings.target.document).change(function(){ __changeDate(); }); $(".king_date_css",$.selectDateSettings.target.document).click(function(){ var _y_ = $("select[id=year_"+___tem___+"] option[selected]",$.selectDateSettings.target.document).val(); var _m_ = $("select[id=mon_"+___tem___+"] option[selected]",$.selectDateSettings.target.document).val(); var _d_ = $(this).text(); _m_ = _m_.length < 2 ? "0"+_m_ : _m_; _d_ = _d_.length < 2 ? "0"+_d_ : _d_; var returndate = $.selectDateSettings.dateFormat.replace("yyyy",_y_).replace("mm",_m_).replace("dd",_d_); $(_obj).val(returndate); $("#dateShowDiv_"+___tem___,$.selectDateSettings.target.document).remove(); }); $("#currentdate_"+___tem___,$.selectDateSettings.target.document).click(function(){ var _m_ = (nowDate.getMonth()+1).toString(); var _d_ = nowDate.getDate().toString(); _m_ = _m_.length < 2 ? "0"+_m_ : _m_; _d_ = _d_.length < 2 ? "0"+_d_ : _d_; var returndate = $.selectDateSettings.dateFormat.replace("yyyy",nowDate.getFullYear()).replace("mm",_m_).replace("dd",_d_); $(_obj).val(returndate); $("#dateShowDiv_"+___tem___,$.selectDateSettings.target.document).remove(); }); $("#selectDateClose_"+___tem___,$.selectDateSettings.target.document).click(function(){ $("#dateShowDiv_"+___tem___,$.selectDateSettings.target.document).remove(); }); } $(this).click(function(){ $("#dateShowDiv_"+___tem___,$.selectDateSettings.target.document).remove(); _sobj = this; __showDate(_sobj); }); }); } }); $($.selectDateSettings.target.document).click(function(e){ e = e ? e : window.event; var tag = e.srcElement || e.target; if(_sobj && _sobj.id==tag.id)return false; var _temObj = tag; while(_temObj) { if(_temObj.id=="dateShowDiv_"+___tem___)return; _temObj = _temObj.parentNode; } $("#dateShowDiv_"+___tem___,$.selectDateSettings.target.document).remove(); }); })(jQuery);

 

使用方法：

 

1. $(document).ready(function(){
2.     $("#要绑定对象的ID").selectDate();
3. });

 

注意：要绑定的对象一定要是文本输入框，还要一定要有ID

 

本插件的默认的日期范围是当前年前20年及后5年，日期格式为“yyyy-mm-dd”，当前时间为客户端的系统时间，如要设置这些值，方法如下：

 

1. $(document).ready(function(){
2.     $.selectDateSetup({
3.                       date:"2008-10-3",//当前时间格式为yyyy-mm-dd
4.                       startYear:1999,//设置日期范围的开始年
5.                       endYear:2008,//设置日期范围的结束年
6.                       dateFormat:"yyyy-mm-dd"//默认的日期格式为yyyy-mm-dd,你可以设置为你自己想要的格式，如mm/dd/yyyy
7.                       });
8.     $("#要绑定对象的ID").selectDate();
9. });