jquery原创实用插件之04 普通联动日历选择器/针对出生日期日历选择器
有一周没有更新了，终于花了2天时间把这个插件搞定了，具体里面功能如何，还得自己查看哦，都是自适应显示位置的哦。
大家如果发现存在bug或者需要改进的地方欢迎反馈，下面分享出来，效果图如下
代码如下：
1 /* 2 * version : 1.0.1 3 * site : ************* 4 * author : Jerry(http://www.cnblogs.com/webdesign-Jerry/) 5 * date : 2013/01/24 6 * email : [email protected] 7 * / 8 9 ;(function($){ 10 $.extend($.fn,{ 11 posControl:function(options){//日历 12 var options = $.extend({controlObj:null},options); 13 this.each(function(){ 14 var self=this; 15 var $controlObj=options.controlObj; 16 var L=$(self).offset().left, 17 T=$(self).offset().top, 18 h=$(self).outerHeight(true), 19 w=$controlObj.outerWidth(true), 20 W=$(window).width(), 21 H=$controlObj.outerHeight(true), 22 S=$(window).scrollTop(), 23 t=$(window).height(), 24 a=$(self).width(), 25 l; 26 var s=t-T-h-2+S; 27 L+w>W?l=a+L-w:l=L; 28 s>=H?$controlObj.css({'left':l,'top':T+h+2}):$controlObj.css({'left':l,'top':T-H-2}); 29 }); 30 return this; 31 } 32 }); 33 $.extend($,{ 34 changeWindowSize:function(options){//窗口改变大小后执行function 35 var defaults = { 36 currentObj:{ 37 cityObj:{ 38 targetObj:'', 39 posObj:'' 40 } 41 } 42 }; 43 var options = $.extend(true,defaults,options); 44 $(window).bind('resize',function(){ 45 var $cityObj=options.currentObj.cityObj; 46 var $targetObj=$cityObj.targetObj; 47 var $posObj=$cityObj.posObj; 48 if(typeof($targetObj)!='string'&&$posObj.css('display')!='none'){ 49 $targetObj.posControl({controlObj:$posObj});//日历/城市重新定位 50 }; 51 }); 52 }, 53 calendarControl:function(options){//普通/生日日历选择控件 54 var defaults = { 55 startObjClass : null,//出发日期 56 stopObjClass : null,//结束日期 57 birthObjClass : null,//出生日期 58 num : 1 ,//联动日历数量 59 minSelect : function(){},//限制最小选择日期 60 maxSelect : function(){} //限制最大选择日期 61 }; 62 var options = $.extend(defaults,options); 63 var $checkInDate=null; 64 var $checkOutDate=null; 65 var $checkBirthDate=$('.'+options.birthObjClass); 66 var length=options.num; 67 var calendar={ 68 init:function(){ 69 this.year=null; //初始化年 70 this.month=null; //初始化月份 71 this.name=null; 72 this.apart=1;//默认结束日期在出发日期之后的第几天 73 this.target=null; 74 this.currentdate=new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()+1); 75 this.nextdate=new Date(this.currentdate.getFullYear(),this.currentdate.getMonth(),this.currentdate.getDate()+this.apart); 76 this.today=this.returnDate(this.currentdate); 77 this.nextDay=this.returnDate(this.nextdate); 78 $('.'+options.startObjClass).val(this.today).click(function(e){ 79 e.stopPropagation(); 80 $('#birth-calendar').hide(); 81 $checkInDate=$(this); 82 calendar.createCalendar(calendar.returnNewDate($checkInDate.val()),e.target); 83 }).next().text(calendar.returnWeekend(calendar.currentdate)); 84 $('.'+options.stopObjClass,$('.'+options.startObjClass).parents('form')).val(this.nextDay).click(function(e){ 85 e.stopPropagation(); 86 $('#birth-calendar').hide(); 87 $checkOutDate=$(this); 88 $checkOutDate.data('disabled',true); 89 calendar.createCalendar(calendar.returnNewDate($checkOutDate.val()),e.target); 90 }).next().text(calendar.returnWeekend(calendar.nextdate));; 91 $(document).bind('click',this.hideCalendar); 92 }, 93 returnDate:function(date){ 94 return date.getFullYear()+'-'+calendar.formatDate(date.getMonth()+1)+'-'+calendar.formatDate(date.getDate()); 95 }, 96 returnWeekend:function(date){//获取星期 97 var w=date.getDay(); 98 switch(w){ 99 case 0 : return '星期日';break; 100 case 1 : return '星期一';break; 101 case 2 : return '星期二';break; 102 case 3 : return '星期三';break; 103 case 4 : return '星期四';break; 104 case 5 : return '星期五';break; 105 case 6 : return '星期六';break; 106 default : break ; 107 } 108 }, 109 returnNewDate:function(date){ 110 var arr=date.split('-'); 111 return new Date(arr[0],Number(arr[1])-1,Number(arr[2])); 112 }, 113 getFirstDay:function(year,month){ //获取每个月第一天星期几 114 var firstDay = new Date(year,month,1); 115 return firstDay.getDay(); //getDay()方法来获取 116 }, 117 getMonthLen:function(year,month){ //获取当月总共有多少天 118 var nextMonth = new Date(year,month+1,1); //获取下个月的第一天 119 nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数 120 return nextMonth.getDate(); //返回当月最后一天 121 }, 122 createCalendar:function(date,a){ //创建日历方法 123 if($('#calendar-item').length<=0){ 124 $('body').append('<div id="calendar-item"><div id="calendar-main"><a href="javascript:;" class="plugin MonthBtn prevMonth" title="上一月"></a><a href="javascript:;" class="plugin MonthBtn nextMonth" title="下一月"></a></div></div>'); 125 calendar.switchCalendar(); 126 }; 127 calendar.clearCalendar(); 128 calendar.name=$('#calendar-item'); 129 calendar.name.show(); 130 var month=date.getMonth(); 131 for(var i=0;i<length;i++){ 132 var newDate=new Date(date.getFullYear(),month,1); 133 calendar.addCalendar(newDate,i); 134 month++; 135 }; 136 var now=new Date().getFullYear()+'-'+calendar.formatDate(new Date().getMonth()+1)+'-'+calendar.formatDate(new Date().getDate()); 137 $('#'+now).addClass('now'); 138 calendar.getWidth(length); 139 if(a){ 140 calendar.target=$(a); 141 calendar.target.posControl({controlObj:calendar.name}); 142 $.changeWindowSize({ 143 currentObj:{cityObj:{ 144 targetObj:calendar.target, 145 posObj:calendar.name 146 } 147 } 148 }); 149 }; 150 $('.prevMonth',calendar.name).removeAttr('id').data('disabled',true); 151 $('.nextMonth',calendar.name).removeAttr('id').data('disabled',true); 152 var $select,l; 153 var $prev=$('#'+$('.'+options.startObjClass,calendar.target.parents('form')).val()); 154 var $next=$('#'+$('.'+options.stopObjClass,calendar.target.parents('form')).val()); 155 if(calendar.target.hasClass(options.startObjClass)){ 156 $select=$('#'+calendar.target.val()); 157 l=$('#'+now).parent().index(); 158 calendar.disabledPrevSelect($('#'+now));//限制当前日期之前的选择 159 var a=$next.parent().index(); 160 var j=$next.parents('.calendar-group').index()-2; 161 if($('.'+options.stopObjClass,calendar.target.parents('form')).data('disabled')==true&&calendar.target.data('disabled')==true){ 162 calendar.disabledNextSelect($next,a,j);//限制出发日期 163 }; 164 }else{ 165 $select=$prev; 166 l=$select.parent().index(); 167 calendar.disabledPrevSelect($prev);//限制选定后的出发日期之前的选择 168 }; 169 $('.calendar-day:first li:lt('+l+') a',calendar.name).addClass('disabled'); 170 $('#'+calendar.target.val()).addClass('check'); 171 calendar.name.click(function(e){ 172 e.stopPropagation(); 173 }); 174 calendar.getSelectDate(calendar.target); 175 }, 176 disabledPrevSelect:function(a){ 177 if(a.length>0){ 178 $('.prevMonth',calendar.name).attr('id','disabledPrevMonth').data('disabled',false); 179 }; 180 }, 181 disabledNextSelect:function(a,b,c){ 182 if(a.length>0){ 183 $('.nextMonth',calendar.name).attr('id','disabledNextMonth').data('disabled',false); 184 $('.calendar-group:eq('+c+') li:gt('+b+') a',calendar.name).addClass('disabled'); 185 $('.calendar-group:gt('+c+') a',calendar.name).addClass('disabled'); 186 }; 187 }, 188 addCalendar:function(date,n){ 189 calendar.year = date.getFullYear(); //获得当时的年份,并赋值到calendar属性year中,以便别的方法的调用 190 calendar.month = date.getMonth(); //跟上面获取年份的目的一样 191 var trueMonth=calendar.formatDate(calendar.month+1); 192 $('#calendar-main').append('<div class="calendar-group"><div class="calendar-title">'+calendar.year+'年'+trueMonth+'月</div><div class="calendar-month"><div class="calendar-week"><span class="weekend">日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span class="weekend">六</span></div><div class="calendar-day"><ul><div class="clear"></div></ul><div class="calendar-singleMonth">'+trueMonth+'</div></div></div></div>'); 193 var monthLen = calendar.getMonthLen(calendar.year,calendar.month); //获取当月最后一天 194 var firstDay = calendar.getFirstDay(calendar.year,calendar.month); //获取月份首天为星期几 195 var str=''; 196 for(var i=0;i<monthLen+firstDay;i++){ //循环写入每天的值 197 if(i>=firstDay&&i<monthLen+firstDay){ 198 var day=i-firstDay+1; 199 var trueDay=calendar.formatDate(day); 200 if(i%7==0||(i+1)%7==0){ 201 str+='<li><a id="'+calendar.year+'-'+trueMonth+'-'+trueDay+'" href="javascript:;" class="weekend">'+day+'</a></li>'; 202 }else{ 203 str+='<li><a id="'+calendar.year+'-'+trueMonth+'-'+trueDay+'" href="javascript:;">'+day+'</a></li>'; 204 }; 205 }else{ 206 str+='<li><a href="javascript:;" class="disabled"></a></li>'; 207 }; 208 }; 209 $('.calendar-day ul').eq(n).prepend(str); 210 }, 211 getSelectDate:function(o){ 212 var $date=$('.calendar-day a:not(".disabled")',calendar.name); 213 $date.bind('click',function(){ 214 var date=$(this).attr('id'); 215 var startDate=calendar.returnNewDate(o.val()); 216 var is=calendar.returnDate(new Date(startDate.getFullYear(),startDate.getMonth(),startDate.getDate()+calendar.apart)); 217 calendar.currentdate=calendar.returnNewDate(date); 218 o.val(date).next().text(calendar.returnWeekend(calendar.currentdate));//星期 219 if(o.hasClass(options.startObjClass)){ 220 calendar.today=calendar.returnDate(calendar.currentdate); 221 var stopDate=$('.'+options.stopObjClass,$checkInDate.parents('form')).val(); 222 if(is==stopDate){ 223 calendar.nextdate=new Date(calendar.currentdate.getFullYear(),calendar.currentdate.getMonth(),calendar.currentdate.getDate()+calendar.apart); 224 calendar.nextDay=calendar.returnDate(calendar.nextdate); 225 $('.'+options.stopObjClass,$checkInDate.parents('form')).val(calendar.nextDay).next().text(calendar.returnWeekend(calendar.nextdate)); 226 }; 227 }else{ 228 calendar.nextDay=calendar.returnDate(calendar.returnNewDate(date)); 229 $('.'+options.startObjClass,o.parents('form')).data('disabled',true); 230 }; 231 calendar.name.hide(); 232 }); 233 }, 234 switchCalendar:function(){ 235 console.log(111); 236 $('.prevMonth',calendar.name).click(function(){ 237 if($(this).data('disabled')==true){ 238 calendar.createCalendar(new Date(calendar.year,calendar.month-length,1)); 239 }; 240 }); 241 $('.nextMonth',calendar.name).click(function(){ 242 if($(this).data('disabled')==true){ 243 calendar.createCalendar(new Date(calendar.year,calendar.month-length+2,1)); 244 }; 245 }); 246 }, 247 clearCalendar:function(){ //清空 248 $('.calendar-group',calendar.name).remove(); 249 }, 250 formatDate:function(d){ 251 if(d<10){ 252 d='0'+d; 253 }; 254 return d; 255 }, 256 getWidth:function(n){ 257 var $group=$('.calendar-month',calendar.name); 258 var w=$('.calendar-group',calendar.name).outerWidth(true); 259 var h=[]; 260 for(var i=0;i<n;i++){ 261 h.push($group.eq(i).height()); 262 }; 263 calendar.name.css('width',n*w); 264 $group.css('height',Math.max.apply(null,h)); 265 }, 266 hideCalendar:function(){ 267 $('#calendar-item').hide(); 268 } 269 }; 270 var birth={ 271 init:function(){ 272 this.year=new Date().getFullYear()-20; //初始化年 273 this.birthMonth=null; //选择的年份 274 this.birthYear=null;//选择的月份 275 this.birthDay=null;//选择的日期 276 this._this=null; 277 this.name=null; 278 this.currentYear=new Date().getFullYear();//当前年份 279 this.currentMonth=calendar.formatDate(new Date().getMonth()+1);//当前月份 280 this.currentDay=new Date().getDate();//当前日期 281 $checkBirthDate.click(function(e){ 282 e.stopPropagation(); 283 $('#calendar-item').hide(); 284 birth._this=$(this); 285 birth.create(e.target); 286 }); 287 $(document).bind('click',this.hideBirth); 288 }, 289 create:function(e){ 290 var $selectPrevBtn,$selectNextBtn; 291 if($('#birth-calendar').length<=0){ 292 $('body').append('<div id="birth-calendar"><div id="birth-year"><div class="selectYearBtn selectPrevBtn"><em class="plugin"></em></div><div class="selectYearBtn selectNextBtn"><em class="plugin"></em></div><h3 class="birth-calendar-t">请您选择年份</h3><div class="selectBox"><div class="selectList"></div></div></div></div>'); 293 birth.name=$('#birth-calendar'); 294 birth.addYear(1); 295 $selectPrevBtn=$('.selectPrevBtn',birth.name); 296 $selectNextBtn=$('.selectNextBtn',birth.name); 297 $selectPrevBtn.removeAttr('id').data('disable',true).bind('click',{'data':$selectPrevBtn},birth.prevPageYear); 298 $selectNextBtn.removeAttr('id').data('disable',true).bind('click',{'data':$selectNextBtn},birth.nextPageYear); 299 }; 300 $(e).posControl({controlObj:birth.name}); 301 $.changeWindowSize({ 302 currentObj:{cityObj:{ 303 targetObj:$(e), 304 posObj:birth.name 305 } 306 } 307 }); 308 birth.name.show(); 309 birth.disSelectYear($selectNextBtn); 310 birth.name.click(function(e){ 311 e.stopPropagation(); 312 }); 313 }, 314 disSelectYear:function(o){ 315 var $cur=$('#year'+birth.currentYear); 316 var index=$cur.index(); 317 if($cur.length>0){ 318 o.data('disable',false).attr('id','disabledSelectNextBtn'); 319 $cur.parent().find('li:gt('+index+')').addClass('disabled'); 320 }; 321 }, 322 disSelectMonth:function(){ 323 var $cur=$('#month'+birth.currentMonth); 324 var index=$cur.index(); 325 if($cur.length>0){ 326 $cur.parent().find('li:gt('+index+')').addClass('disabled'); 327 }; 328 }, 329 disSelectDay:function(){ 330 var $cur=$('#day'+birth.currentDay); 331 var index=$cur.index(); 332 if($cur.length>0){ 333 $cur.parent().find('li:gt('+index+')').addClass('disabled'); 334 }; 335 }, 336 addYear:function(n){ 337 switch(n){ 338 case -1:$('.selectList').prepend('<ul class="selectList-s"></ul>');break; 339 case 1:$('.selectList').append('<ul class="selectList-s"></ul>');break; 340 default:break; 341 }; 342 var str_y=''; 343 for(var i=11;i>=0;i--){ 344 str_y+='<li id="year'+(birth.year-i)+'">'+(birth.year-i)+'</li>'; 345 }; 346 switch(n){ 347 case -1:$('.selectList-s:first').prepend(str_y);break; 348 case 1:$('.selectList-s:last').prepend(str_y);break; 349 default:break; 350 }; 351 $('#birth-year li',birth.name).bind('click',birth.selectYear); 352 }, 353 prevPageYear:function(e){ 354 var $target=e.data.data; 355 $('.selectNextBtn',birth.name).removeAttr('id').data('disable',true); 356 if($target.data('disable')==true){ 357 $target.data('disable',false); 358 birth.year-=12; 359 birth.addYear(-1); 360 $('.selectList-s:first',birth.name).css('marginLeft',-194); 361 $('.selectList-s:first',birth.name).stop(true,false).animate({'marginLeft':-5},500,function(){ 362 $('.selectList-s:last').remove(); 363 $target.data('disable',true); 364 birth.disSelectYear($('.selectNextBtn',birth.name)); 365 }); 366 }; 367 }, 368 nextPageYear:function(e){ 369 var $target=e.data.data; 370 $target.removeAttr('id'); 371 if($target.data('disable')==true){ 372 $target.data('disable',false); 373 birth.year+=12; 374 birth.addYear(1); 375 $('.selectList-s:first',birth.name).stop(true,false).animate({'marginLeft':-194},500,function(){ 376 $('.selectList-s:first',birth.name).remove(); 377 $target.data('disable',true); 378 }); 379 }; 380 birth.disSelectYear($target); 381 }, 382 selectYear:function(e){ 383 var $target=$(e.target); 384 if(!$target.hasClass('disabled')){ 385 birth.birthYear=$target.text(); 386 $('#birth-year',birth.name).after('<div id="birth-month"><h3 class="birth-calendar-t">请您选择月份</h3><ul class="selectList-s"><li id="month01">01</li><li id="month02">02</li><li id="month03">03</li><li id="month04">04</li><li id="month05">05</li><li id="month06">06</li><li id="month07">07</li><li id="month08">08</li><li id="month09">09</li><li id="month10">10</li><li id="month11">11</li><li id="month12">12</li></ul></div>'); 387 $('#birth-year',birth.name).remove(); 388 $('#birth-month',birth.name).show(); 389 $('#birth-month li',birth.name).bind('click',birth.selectMonth); 390 if(birth.birthYear==birth.currentYear){ 391 birth.disSelectMonth(); 392 }; 393 }; 394 }, 395 selectMonth:function(e){ 396 var $target=$(e.target); 397 if(!$target.hasClass('disabled')){ 398 birth.birthMonth=$target.text(); 399 $('#birth-month',birth.name).after('<div id="birth-days"><h3 class="birth-calendar-t">请您选择日期</h3><ul class="selectList-d"></ul></div>'); 400 var monthLen = calendar.getMonthLen(birth.birthYear,Number(birth.birthMonth)-1); //获取当月最后一天 401 var firstDay = calendar.getFirstDay(birth.birthYear,Number(birth.birthMonth)-1); //获取月份首天为星期几 402 var str_d=''; 403 for(var i=0;i<42;i++){ 404 if(i>=firstDay&&i<monthLen+firstDay){ 405 str_d+='<li class="check" id="day'+calendar.formatDate(i-firstDay+1)+'">'+(i-firstDay+1)+'</li>'; 406 }else{ 407 str_d+='<li class="disabled"></li>'; 408 }; 409 }; 410 $('.selectList-d',birth.name).append(str_d); 411 $('#birth-month',birth.name).remove(); 412 $('#birth-days',birth.name).show(); 413 $('#birth-days li',birth.name).bind('click',birth.selectDay); 414 if(birth.birthYear==birth.currentYear&&birth.birthMonth==birth.currentMonth){ 415 birth.disSelectDay(); 416 }; 417 }; 418 }, 419 selectDay:function(e){ 420 var $target=$(e.target); 421 if(!$target.hasClass('disabled')){ 422 birth.birthDay=$target.text(); 423 birth.name.remove(); 424 birth._this.val(birth.birthYear+'-'+birth.birthMonth+'-'+calendar.formatDate(birth.birthDay)); 425 }; 426 }, 427 hideBirth:function(){ 428 $('#birth-calendar').hide(); 429 } 430 }; 431 calendar.init();//调用普通日历 432 birth.init();//调用出生日期日历 433 } 434 }); 435 })(jQuery); 436 437 ;(function($){ 438 //调用日历 439 $.calendarControl({ 440 startObjClass : 'checkInDate',//出发日期className 441 stopObjClass : 'checkOutDate',//结束日期className 442 birthObjClass : 'checkBirthDate',//出生日期className 443 num : 3 //联动日历数量 444 }); 445 })(jQuery)
1 /* calendarItem */ 2 #calendar-item{ background:#fff;position:absolute;left:100px; top:100px;z-index:9998;border:solid 1px #aaa; padding:1px; border-radius:5px;} 3 #calendar-main{ position:relative;border-radius:5px; height:1%;overflow:hidden;} 4 #calendar-main .MonthBtn{ display:block; width:17px; height:16px; position:absolute; top:2px;} 5 #calendar-main .prevMonth{ left:20px; background-position:-2px -32px;} 6 #calendar-main .prevMonth:hover{background-position:-2px -49px;} 7 #calendar-main .nextMonth{ right:20px; background-position:-2px -100px;} 8 #calendar-main .nextMonth:hover{background-position:-2px -117px;} 9 #calendar-main #disabledPrevMonth{background-position:-2px -66px; cursor:default;} 10 #calendar-main #disabledNextMonth{background-position:-2px -83px; cursor:default;} 11 .calendar-group{ width:185px; float:left;} 12 .calendar-title{ height:22px; line-height:22px; text-align:center; background:#e8eff5;font-family:Verdana; font-weight:bold;} 13 .calendar-month{ background:#fff;margin:5px 0px 5px -1px; border-left:solid 1px #aaa; padding:0px 5px;} 14 .calendar-week{ height:24px;line-height:24px; } 15 .calendar-week span{display:inline-block;zoom:1;width:25px;text-align:center; color:#777; background:#fff; float:left; font-weight:bold;} 16 .calendar-week span.weekend{ color:#f60;} 17 .calendar-day{ position:relative;} 18 .calendar-day ul{ position:relative; z-index:9999; display:block; height:100%;} 19 .calendar-day ul li{ float:left;} 20 .calendar-day ul li a{ display:block; width:24px; height:20px; line-height:20px; text-align:center; padding:0px 0px 1px 1px;font-family:Verdana;font-weight:bold;float:left;background:url(../images/plugin.png) no-repeat 100px 100px;} 21 .calendar-day ul li a:hover{ text-decoration:none; background-position:-1px -135px; color:#333;} 22 .calendar-day ul li a.weekend{ color:#f60;} 23 .calendar-day ul li a.check{ background-position:-1px -157px; color:#09c;} 24 .calendar-day ul li a.now{ color:#b00;} 25 .calendar-day ul li a.disabled{ color:#777; font-weight:normal; background:none; cursor:default;} 26 .calendar-singleMonth{ height:106px;position:absolute;left:0px; top:0px;width:175px; font-size:80px; font-style:italic;text-align:center; line-height:106px; opacity:0.1; filter:alpha(opacity=10); font-family:arial;} 27 /* birth-calendar */ 28 #birth-calendar{background:#fff;position:absolute;z-index:9998;border:solid 1px #aaa; padding:5px; border-radius:5px; width:184px;} 29 .birth-calendar-t{ font-size:14px; font-weight:normal; margin-bottom:5px; text-align:center; border-bottom:solid 1px #ddd; padding-bottom:3px; margin-top:-3px;} 30 #birth-year{ position:relative;} 31 .selectYearBtn{ position:absolute; top:84px; height:50px; width:20px; cursor:pointer; overflow:hidden;background:url(../images/y-bg.png) repeat; display:none;} 32 .selectYearBtn:hover{background:url(../images/y-hover.png) repeat;} 33 .selectPrevBtn{ left:0px;} 34 .selectNextBtn{ right:0px;} 35 .selectYearBtn em{ display:block; width:12px; height:22px; margin:14px 0px 0px 4px;} 36 .selectPrevBtn em{background-position:-2px -211px;} 37 .selectNextBtn em{background-position:-16px -211px;} 38 #birth-year:hover .selectYearBtn{ display:block;} 39 #disabledSelectPrevBtn,#disabledSelectNextBtn,#disabledSelectPrevBtn:hover,#disabledSelectNextBtn:hover{ cursor:default; display:none;} 40 #birth-year:hover #disabledSelectPrevBtn,#birth-year:hover #disabledSelectNextBtn{ display:none;} 41 .birth-month,.birth-days{ display:none;} 42 #birth-calendar li{-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} 43 .selectBox{ width:184px; overflow:hidden;} 44 .selectBox .selectList{ width:378px;} 45 .selectList-s,.selectList-d{ height:1%; overflow:hidden; margin:-5px 0px 0px -5px;float:left; width:189px; padding-right:5px;} 46 .selectList-s li{float:left; display:block; background:#50c7ff; color:#fff; text-align:center; margin:5px 0px 0px 5px; width:58px; height:35px; line-height:35px; cursor:pointer; font-size:16px; font-family:Verdana,arial; font-style:italic;} 47 .selectList-s li.disabled,.selectList-s li.disabled:hover{ background:#ccc; cursor:default;} 48 .selectList-s li:hover{ color:#fff; background:#ffb547;} 49 .selectList-d li{float:left; display:block;color:#09c; background:#f8f8f8;text-align:center;cursor:pointer; margin:5px 0px 0px 5px; width:22px; height:22px; line-height:22px; font-size:12px; font-family:Verdana,arial; font-style:italic;} 50 .selectList-d li:hover{ color:#fff; background:#50c7ff;} 51 .selectList-d li.disabled,.selectList-d li.disabled:hover{ background:#eee; cursor:default; color:#ddd;}
1 <form style="margin:10px 100px;"> 2 <ul> 3 <li><label>出发日期：</label><input type="text" style="width:100px;" class="checkInDate" readonly="readonly"/><span class="weekend"></span></li> 4 <li><label>结束日期：</label><input type="text" style="width:100px;" class="checkOutDate" readonly="readonly"/><span class="weekend"></span></li> 5 <li><label>出生年月：</label><input type="text" style="width:100px;" class="checkBirthDate" readonly="readonly"/><span class="weekend"></span></li> 6 </ul> 7 </form>
转载于:https://www.cnblogs.com/webdesign-Jerry/archive/2013/01/24/2875719.html