以前写的多选日期控件，给大家分享下
今天整理资料发现了！还是以前写的，刚刚接触的jquery。和大家分享下思路function Calendar(config){config=config||{};if((typeof config)!="object"){return;}for(var p in config){this=config;}this.datas=new Map();//this.datasId="guestCalendar";this.selectDay=null;this.selectTime=null;this.selectKey=null;var DOC=document,getElement=function(id){return DOC.getElementById(id);};//对应的ids 0 显示年的1 显示 月的 2 显示天的this.calendarIds=['easyJsYear','easyJsMonth','easyJsShowDate'];this.init=function(){var d=new Date();this.currentMonth=d.getMonth()+1;this.currentYear=d.getFullYear();d=null;};this.initShowCalendar=function(){this.year=this.currentYear;this.month=this.currentMonth;this.showYearMonth();this.showDate();};//o {year:2011} or {month:10}this.changeShowCalendar=function(o){var obj=o;if(obj.year){if(this.year+obj.year<1990){return;}this.year=this.year+obj.year;}if(obj.month){if(this.month+obj.month>12||this.month+obj.month<1){return;}this.month=this.month+obj.month;}this.showYearMonth();this.showDate();};this.showYearMonth=function (){$("#"+this.calendarIds).html(this.year+"年");$("#"+this.calendarIds).html(this.month+"月");};this.showDate=function(){var y = this.year, m = this.month;//判断当月有跨越几周var week=Math.ceil((new Date(y, m, 0).getDate() + new Date(y, m - 1, 1).getDay()) / 7);//当月开始是星期几var start_week=new Date(y, m - 1, 1).getDay();//当月结束是星期几var end_week=new Date(y, m, 0).getDay();//当前月有多少天var lastDate=new Date(y, m, 0).getDate();var tempdate=0,vName=this;var parent=getElement(this.calendarIds);removeAllNodes(this.calendarIds);for(var i=0;i<week;i++){var tr=DOC.createElement("tr");for(var ii=0;ii<7;ii++){var td=DOC.createElement("td");td.className="nEasyJsWeekTd";tr.appendChild(td);if(i==0){if(ii<start_week){continue;}}else if(i==(week-1)){if(ii>end_week){continue;}}tempdate++;var tkey=parseInt(""+this.year+(this.month.toString().length>1?this.month:"0"+this.month)+(tempdate.toString().length>1?tempdate:"0"+tempdate));if(this.datas.containsKey(tkey)){td.className="sEasyJsWeekTd";}td.onclick = function(o){vName.chanageDate(this);};//兼容ie6td.innerHTML=tempdate;}parent.appendChild(tr);}};this.GenerateCalender=function(){DOC.write('<div id="easyJsCalendarDate" class="easyJsCalendarDate" style="display:none">');DOC.write('<div class="easyJsYearMonth"><table width="100%" border="0" cellspacing="1" cellpadding="1"><tr><td >&lt;&lt;</td><td >&lt;</td><td id="easyJsYear"></td><td id="easyJsMonth"></td><td >&gt;</td><td >&gt;&gt;</td></tr></table></div>');DOC.write(' <div class="easyJsWeek"><table width="100%" border="0" cellspacing="1" bgcolor="#CCCCCC" cellpadding="1"><tr><th scope="col">日</th><th scope="col">一</th><th scope="col">二</th><th scope="col">三</th><th scope="col">四</th><th scope="col">五</th><th scope="col">六</th></tr><tbody id="easyJsShowDate"></tbody>');DOC.write('<tr><tdcolspan="3">今天</td><tdcolspan="3">关闭</td><td >c</td></tr></table></div></div>');};this.changeMonth=function(type){this.changeShowCalendar({month:type});};this.changeYear=function(type){this.changeShowCalendar({year:type});};this.showToday=function(){this.initShowCalendar();};this.closeDateWindow=function(){$("#easyJsCalendarDate").hide();};this.setDatasInPage=function(){var d=this.datas;var s=this.datas.toString(function(key,values){return values;});var enter=getElement(this.enter);if(enter.nodeName=='INPUT'){enter.value=s;}elseenter.innerHTML=s;};this.clearTimePickerSelect=function(){for(var i=0;i<24;i++){this.selectTime.splice(i,1,-1);}var table=getElement("easyJsCalendarTimeTable");for(var j=0;j<4;j++){var tr=table.rows;for(var k=0;k<6;k++){tr.cells.className="cEasyJsCalenderTimeTd";}}};this.setStyleProperty=function(o,name,value){o.style=value;};this.chanageDate=function(o){this.selectDay=o;var tmonth=this.month.toString().length>1?this.month:"0"+this.month,tday=this.selectDay.innerHTML.length>1?this.selectDay.innerHTML:"0"+this.selectDay.innerHTML;this.selectKey=parseInt(this.year+""+tmonth+""+tday);var selectValue=this.year+"-"+tmonth+"-"+tday;if(this.datas.containsKey(this.selectKey)){this.selectTime=this.datas.get(this.selectKey);this.datas.remove(this.selectKey);this.selectDay.className="nEasyJsWeekTd";}else{this.datas.modify(this.selectKey,selectValue,true);this.selectDay.className="sEasyJsWeekTd";}this.setDatasInPage();};this.triggerEvent=function(){if(this.trigger){var t=this;$("#"+this.trigger).click(function(e) { $("#easyJsCalendarDate").css("position","absolute").css("top", e.pageY+ "px").css("left", e.pageX + "px"); t.showDatePicker(); });}};this.showDatePicker=function(id){$("#easyJsCalendarDate").show();};this.putDatas=function(){if(this.dataMaps){this.dataMaps.put(this.dataKey,this.datas);}}this.setDates=function(key){if(!this.dataMaps){this.dataMaps=new Map();}this.dataKey=key;if(this.dataMaps.containsKey(key)){this.datas=this.dataMaps.get(key);}else{this.datas=new Map();}}this.GenerateCalender();this.init();this.initShowCalendar();this.triggerEvent();}
下面是用的的相关function
/* * Map对象，实现Map功能 * * * size() 获取Map元素个数 * isEmpty() 判断Map是否为空 * clear() 删除Map所有元素 * put(key, value) 向Map中增加元素（key, value) * remove(key) 删除指定key的元素，并返回该key的value * get(key) 获取指定key的元素值value * modify(key,value,auto) 修改key的value.如果auto为true,key不存在,会将key和value添加为新值;为false,key不存在将不进行添加 * containsKey(key) 判断Map中是否含有指定key的元素 * containsValue(value) 判断Map中是否含有指定value的元素 * keys() 获取Map中所有key的数组（array） * values() 获取Map中所有value的数组（array） * */function Map(){/** *初始化datas */this.initialize=function(){this.datas=new Object();}/** * 得到datas中的对象数目 */ this.size=function() { var i = 0; for(var ele in this.datas) { i ++; } return i; };this.isEmpty=function(){return this.size()>0?false:true;};this.clear=function(){ for(var key in this.datas) { delete this.datas; } };this.put=function(key, value) {return this.datas = value;}this.remove=function(key) { var value = this.datas; delete this.datas; return value; };this.get=function(key) {if (this.datas !== Object.prototype)return this.datas;};this.modify=function(key,value,auto){if(this.containsKey(key)){this.remove(key);this.put(key,value);}else{if(auto){this.put(key,value);}}};this.containsKey=function(key){if(key in this.datas){return true;}return false;};this.containsValue=function(value){var r=false;for(var key in this.datas){if(this.datas==value){r=true;break;}}return r;}this.keys=function() {return this.pluck('key');};this.values=function() {return this.pluck('value');};/** * 遍历Map,执行处理函数 * @param {Function} 回调函数 function(arrary){..} */this.each=function(fn){for (var key in this.object) {var value = this.object, pair = ;pair.key = key;pair.value = value;fn(pair);}};/** * 返回object的对象的复制 */ this.toObject=function(){var destination={};for (var property in this.datas)destination = this.datas;return destination; };this.pluck=function(property) {var results = [];for(var key in this.datas){if(property=='key'){results.push(key);}else if(property=='value'){results.push(this.datas);}}return results;}; /** * toString方法* fn是调用函数 */ this.toString=function(fn) { var b = this.datas; var buf = []; for(var key in b) { buf.push(fn(key,b)); buf.push('\n'); } return buf.join(''); };this.formatToString=function(fn){var keys=this.keys();//function sortNumber(a,b){return a - b} 从小到大 ；function sortNumber(a,b){return b - a} 从大到小keys.sort(function sortNumber(a,b){return a - b});var buf=[];for(var i=0;i<keys.length;i++){buf.push(fn(keys,this.datas]));buf.push("\n");}return buf.join('');};this.initialize(); }function StringBuffer(){this.array=[];this.append=function(string){this.array.push(string);}this.toString=function(){return this.array.join("");}}//删除该id下的所有节点function removeAllNodes(id){var parent=document.getElementById(id); while(parent.childNodes.length>0) { parent.removeChild(parent.childNodes); }}
在页面调用
<body><textarea id="guestCalendar"style="height:100px; width:200px;"></textarea><input id="trigger" value="日期" type="button"/><script>var datePicker=new Calendar({enter:'guestCalendar',//显示值的的idtrigger:"trigger"//触发控件id，该控件要支持click});</script></body>
页:
[1]