js日历选择控件 - webNick_H5之家 - 中国HTML5教程资源分享第一站

　　快过年了，还有几天过年啊？天天看日历，所以，自己写了个日历选择器玩玩！

　　直接上代码：

表现层

1 #nickCalendar { 2 width: 250px; 3 padding: 10px; 4 text-align: center; 5 background-color: springgreen; 6 margin: auto; 7 border-radius: 10px; 8 } 9 10 .nick-calendar-tit { 11 width: 168px; 12 margin: auto; 13 color: midnightblue; 14 } 15 16 .nick-calendar-tit span { 17 float: left; 18 width: 20px; 19 font-size: 14px; 20 height: 20px; 21 line-height: 20px; 22 text-align: center; 23 margin: 2px; 24 font-weight: bold; 25 } 26 27 .nick-calendar-bd { 28 width: 168px; 29 padding: 10px; 30 background-color: pink; 31 margin: auto; 32 border-radius: 10px; 33 } 34 35 .clear:after { 36 content: ''; 37 display: block; 38 height: 0; 39 clear: both; 40 } 41 42 .nick-calendar-bd span { 43 width: 20px; 44 font-size: 14px; 45 height: 20px; 46 line-height: 20px; 47 text-align: center; 48 margin: 2px; 49 float: left; 50 cursor: pointer; 51 border-radius: 50%; 52 } 53 54 .prev-date-nick, .next-date-nick { 55 background-color: #999; 56 } 57 58 .nick-calendar-hd { 59 height: 30px; 60 line-height: 30px; 61 font-weight: bold; 62 } 63 64 .nick-calendar-prev, .nick-calendar-next { 65 background-color: violet; 66 border: 0; 67 border-radius: 5px; 68 font-weight: bold; 69 } 70 71 .nick-calendar-prev-year, .nick-calendar-next-year { 72 background-color: turquoise; 73 border: 0; 74 border-radius: 5px; 75 font-weight: bold; 76 } 77 78 .nick-calendar-date { 79 display: inline-block; 80 width: 90px; 81 } 82 83 .date-nick { 84 background-color: violet; 85 } 86 87 .nick-calendar-current { 88 background-color: yellowgreen; 89 }

View Code

温馨提示：

　　这点样式必须的哦，不然，呵呵！当然，你也可以自定义！

结构层

　　结构层只需您一个触发容器input即可！

行为层参数存在一个对象中

var opt = {//参数保存在此对象中 opts: options };

所有的方法保存在另一个对象中

var obj = {}

填充日历方法

fillDate: function (year, month) {}

　　本月份第一天是星期几-为显示上个月的天数做铺垫

var first_day = new Date(year, month, 1).getDay();

　　如果刚好是星期天，则空出一行（显示上个月的天数）

first_day = first_day == 0 ? 7 : first_day;

　　本月份最后一天是几号

var final_date = new Date(year, month + 1, 0).getDate(),

　　上个月的最后一天是几号

last_date = new Date(year, month, 0).getDate(),

　　剩余的格子数--即排在末尾的格子数

surplus = 42 - first_day - final_date;

　　设置表头的日历

opt.oHeadDate.innerHTML = year + '年' + (month + 1) + '月';

　　填充日历内容

　　设置当天样式

if (year == new Date().getFullYear() && month == new Date().getMonth()) { opt.oBody.getElementsByTagName('span')[first_day + opt.date - 1].className = 'nick-calendar-current date-nick'; }

　　点击赋值ipt得到日期

for (var x = 0, v = opt.oBody.getElementsByTagName('span'), len = v.length; x < len; x++) { v[x].onclick = function () { var now = new Date(year, month, 1), y = 0, m = 0; if (this.className.indexOf('prev-date-nick') > -1) { y = new Date(now.setMonth(now.getMonth() - 1)).getFullYear(); m = new Date(now).getMonth(); } else if (this.className.indexOf('next-date-nick') > -1) { y = new Date(now.setMonth(now.getMonth() + 1)).getFullYear(); m = new Date(now).getMonth(); } else if (this.className.indexOf('date-nick') > -1) { y = year; m = month; } document.getElementById('date1').value = y + '-' + (m + 1) + '-' + this.innerHTML; opt.oWrap.style.display = 'none';//隐藏日历容器 } }

下个月

　　就是设置月份加一即可。