仿win7日历插件

=""type=""="utf-8"href=""

*{;;}

a{text-;}

input{height:30px;line-height:30px;}

body{color:#f63;font-size:16px;line-height:22px;}

ul,li{list-style:none;}/*控件样式*/

.datePicker{background:#fff;width:161px;padding:7px;border:1pxsolid#ddd;position:absolute;top:0;left:0;color:#000;font-size:12px;}

.datePickerdiv{height:25px;line-height:25px;text-align:center;position:relative;border-bottom:1pxsolid#d8d8d8;font-size:14px;}

.datePickerdiva{position:absolute;top:0;text-align:center;line-height:25px;font-size:18px;font-family:sumsin;color:;}

.datePickerdivspan{cursor:pointer;}

.datePickerp{line-height:25px;}

.datePickerpspan{display:inline-block;width:23px;text-align:center;}

.datePicker-prev{left:0;}

.datePicker-next{right:0;}

.datePicker-months{display:none;}

.datePicker-monthsli{cursor:pointer;width:40px;float:left;text-align:center;line-height:49px;}

.datePicker-monthsli:hover{color:#e7bb70;}

.datePicker-dates{height:132px;overflow:hidden;}

.datePicker-datesli{width:23px;height:22px;line-height:22px;float:left;text-align:center;cursor:pointer;}

.datePicker-datesli:hover{color:#e7bb70;}

.datePicker-dates.prev,.datePicker-dates.next{color:#999;cursor:not-allowed;}

.datePicker-dates.prev:hover,.datePicker-dates.next:hover{color:#999;;}

.datePicker-years{height:132px;}

.datePicker-yearsli{line-height:49px;text-align:center;width:25%;float:left;cursor:pointer;}

.datePicker-years.prev,.datePicker-years.next{color:#999;cursor:not-allowed;}/*控件样式*/

.myDatePicker{background:#f4f4f4;width:161px;padding:7px;border:1pxsolid#ccc;position:absolute;top:0;left:0;color:#000;font-size:12px;font-family:'MicrosoftYahei';}

.myDatePickerdiv{height:25px;line-height:25px;text-align:center;position:relative;border-bottom:1pxsolid#d8d8d8;font-size:14px;}

.myDatePickerdiva{position:absolute;top:0;text-align:center;line-height:25px;font-size:18px;font-family:sumsin;color:;}

.myDatePickerdivspan{cursor:pointer;}

.myDatePickerp{line-height:25px;}

.myDatePickerpspan{display:inline-block;width:23px;text-align:center;}

.myDatePicker-prev{left:0;}

.myDatePicker-next{right:0;}

.myDatePicker-months{display:none;}

.myDatePicker-monthsli{cursor:pointer;width:40px;float:left;text-align:center;line-height:49px;}

.myDatePicker-monthsli:hover{color:#f63;}

.myDatePicker-dates{height:132px;overflow:hidden;}

.myDatePicker-datesli{width:23px;height:22px;line-height:22px;float:left;text-align:center;cursor:pointer;}

.myDatePicker-datesli:hover{color:#f63;}

.myDatePicker-dates.prev,.myDatePicker-dates.next{color:#999;cursor:not-allowed;}

.myDatePicker-dates.prev:hover,.myDatePicker-dates.next:hover{color:#999;;}

.myDatePicker-years{height:132px;}

.myDatePicker-yearsli{line-height:49px;text-align:center;width:25%;float:left;cursor:pointer;}

.myDatePicker-years.prev,.myDatePicker-years.next{color:#999;cursor:not-allowed;}/stylebodyh1style="color:#555;line-height:50px;"仿windows7系统日期控件，依赖jQuery、外部样式！/h1divstyle="position:relative;height:100px;border:5pxsolid#ddd;margin:10px;overflow:hidden;"

1、input绝对定位，父级相对定位溢出隐藏。

inputtype="text"id="ipt"style="position:absolute;top:70px;left:100px;"/divdivstyle="height:300px;margin:10px;background:#f4f4f4;"/div

2、盒模型input，相对定位，有padding、margin、border

inputtype="text"id="ipt1"style="position:relative;left:22px;margin:10px;padding:5px;"divstyle="height:200px;"/div

3、父级标签为body，当文本框距底高度不足以完全显示，则定位在文本框上方。

inputtype="text"id="ipt2"br

你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊br你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊brscript//参数cName为控件外层class名，方便自定义样式名称newDatePicker().init({id:'ipt',cName:'datePicker'});

newDatePicker().init({id:'ipt1',cName:'myDatePicker'});

newDatePicker().init({id:'ipt2',cName:'datePicker'});

/script/body/html