快過年了，還有幾天過年啊？天天看日歷，所以，自己寫了個日歷選擇器玩玩！
直接上代碼：
表現層
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 }
溫馨提示：
這點樣式必須的哦，不然，呵呵！當然，你也可以自定義！
結構層
<input type="text" placeholder="請選擇" readonly id="date1">
結構層只需您一個觸發容器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) + '月';
填充日歷內容
var html = '';
//上個月的顯示天數
for (var i = 0; i < first_day; i++) {
html += '<span class="prev-date-nick">' + (last_date - (first_day - 1) + i) + '</span>';
}
//本月的顯示天數
for (var j = 0; j < final_date; j++) {
html += '<span class="date-nick">' + (j + 1) + '</span>';
}
//下個月的顯示天數
for (var k = 0; k < surplus; k++) {
html += '<span class="next-date-nick">' + (k + 1) + '</span>';
}
//fill
opt.oBody.innerHTML = html;
設置當天樣式
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';//隱藏日歷容器
}
}
下個月
就是設置月份加一即可。
next: function () {
var me = this;
opt.oNext.onclick = function () {
opt.month++;
if (opt.month > 11) {
opt.month = 0;
opt.year++;
}
// 填充日歷
me.fillDate(opt.year, opt.month);
}
},
上個月
就是設置月份減一即可。
prev: function () {
var me = this;
opt.oPrev.onclick = function () {
opt.month--;
if (opt.month < 0) {
opt.month = 11;
opt.year--;
}
// 填充日歷
me.fillDate(opt.year, opt.month);
}
},
下一年
就是設置年份加一即可。
nextYear: function () {
var me = this;
opt.oNextYear.onclick = function () {
opt.year++;
// 填充日歷
me.fillDate(opt.year, opt.month);
}
},
上一年
就是設置年份減一即可。
prevYear: function () {
var me = this;
opt.oPrevYear.onclick = function () {
if (opt.year > 1970) {
opt.year--;
}
// 填充日歷
me.fillDate(opt.year, opt.month);
}
},
獲取元素偏移位置
offset: function (ele) {
var l = ele.offsetLeft, t = ele.offsetTop, p = ele.offsetParent;
while (p) {
l += p.offsetLeft + p.clientLeft;
t += p.offsetTop + p.clientTop;
p = p.offsetParent;
}
return {left: l, top: t}
},
用於設置日歷容器樣式定位。
初始化
init: function () {//初始化
}
初始化參數，創建日歷容器固定結構，每次切換日期值即可
var div = document.createElement("DIV");
div.setAttribute('id', opt.opts.wrapId);
div.innerHTML = '<div class="nick-calendar-hd"><button class="nick-calendar-prev-year"><<</button>' +
'<button class="nick-calendar-prev"><</button><span class="nick-calendar-date"></span>' +
'<button class="nick-calendar-next">></button><button class="nick-calendar-next-year">>></button>' +
'</div><div class="nick-calendar-tit clear">' +
'<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>' +
'</div><div class="nick-calendar-bd clear"></div>';
document.getElementsByTagName("body")[0].appendChild(div);
opt.oWrap = document.getElementById(opt.opts.wrapId);//日歷容器
opt.trigger = document.getElementById(opt.opts.triggerId);//觸發容器
opt.oHeadDate = opt.oWrap.getElementsByClassName('nick-calendar-date')[0];//頭部日期
opt.oBody = opt.oWrap.getElementsByClassName('nick-calendar-bd')[0];//日期容器
opt.oTit = opt.oWrap.getElementsByClassName('nick-calendar-tit')[0];//星期容器
opt.oPrev = opt.oWrap.getElementsByClassName('nick-calendar-prev')[0];//上月按鈕
opt.oNext = opt.oWrap.getElementsByClassName('nick-calendar-next')[0];//下月按鈕
opt.oPrevYear = opt.oWrap.getElementsByClassName('nick-calendar-prev-year')[0];//上月按鈕
opt.oNextYear = opt.oWrap.getElementsByClassName('nick-calendar-next-year')[0];//下月按鈕
opt.year = 0;//年
opt.month = 0;//月
opt.date = 0;//日
獲取今天的日歷時間
var now = new Date();
opt.year = now.getFullYear();
opt.month = now.getMonth();
opt.date = now.getDate();
初始化--填充日歷
this.fillDate(opt.year, opt.month);
切換年月方法
this.next();
this.nextYear();
this.prev();
this.prevYear();
設置日歷容器位置
opt.oWrap.style.position = 'absolute';
opt.oWrap.style.left = this.offset(opt.trigger).left + opt.trigger.offsetWidth + 10 + 'px';
opt.oWrap.style.top = this.offset(opt.trigger).top + 'px';
opt.oWrap.style.display = 'none';//默認隱藏日歷容器
input觸發日歷選擇
opt.trigger.onclick = function () {
opt.oWrap.style.display = 'block';
}
初始化調用
obj.init();//初始化
定義日歷選擇方法
function calendarNick(options) {
var opt = {//參數保存在此對象中
opts: options
};
var obj={
//code
};
}
定義一個日歷選擇器方法把2個對象包裹起來，並調用初始化方法即可。
調用日歷選擇器
調用時，兩個必傳的容器id參數。
calendarNick({
wrapId: 'nickCalendar',//日歷容器id
triggerId: 'date1'//觸發容器id
});
完整代碼：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>calendar-nick</title>
6 <style>
7 #nickCalendar {
8 width: 250px;
9 padding: 10px;
10 text-align: center;
11 background-color: springgreen;
12 margin: auto;
13 border-radius: 10px;
14 }
15
16 .nick-calendar-tit {
17 width: 168px;
18 margin: auto;
19 color: midnightblue;
20 }
21
22 .nick-calendar-tit span {
23 float: left;
24 width: 20px;
25 font-size: 14px;
26 height: 20px;
27 line-height: 20px;
28 text-align: center;
29 margin: 2px;
30 font-weight: bold;
31 }
32
33 .nick-calendar-bd {
34 width: 168px;
35 padding: 10px;
36 background-color: pink;
37 margin: auto;
38 border-radius: 10px;
39 }
40
41 .clear:after {
42 content: '';
43 display: block;
44 height: 0;
45 clear: both;
46 }
47
48 .nick-calendar-bd span {
49 width: 20px;
50 font-size: 14px;
51 height: 20px;
52 line-height: 20px;
53 text-align: center;
54 margin: 2px;
55 float: left;
56 cursor: pointer;
57 border-radius: 50%;
58 }
59
60 .prev-date-nick, .next-date-nick {
61 background-color: #999;
62 }
63
64 .nick-calendar-hd {
65 height: 30px;
66 line-height: 30px;
67 font-weight: bold;
68 }
69
70 .nick-calendar-prev, .nick-calendar-next {
71 background-color: violet;
72 border: 0;
73 border-radius: 5px;
74 font-weight: bold;
75 }
76
77 .nick-calendar-prev-year, .nick-calendar-next-year {
78 background-color: turquoise;
79 border: 0;
80 border-radius: 5px;
81 font-weight: bold;
82 }
83
84 .nick-calendar-date {
85 display: inline-block;
86 width: 90px;
87 }
88
89 .date-nick {
90 background-color: violet;
91 }
92
93 .nick-calendar-current {
94 background-color: yellowgreen;
95 }
96
97 </style>
98 </head>
99 <body>
100 <input type="text" placeholder="請選擇" readonly id="date1">
101 <script>
102 // 調用
103 calendarNick({
104 wrapId: 'nickCalendar',//日歷容器id
105 triggerId: 'date1'//觸發容器id
106 });
107 //日歷選擇功能
108 function calendarNick(options) {
109 var opt = {//參數保存在此對象中
110 opts: options
111 };
112
113 var obj = {
114 //填充日歷
115 fillDate: function (year, month) {
116 //本月份第一天是星期幾-為顯示上個月的天數做鋪墊
117 var first_day = new Date(year, month, 1).getDay();
118 //如果剛好是星期天，則空出一行（顯示上個月的天數）
119 first_day = first_day == 0 ? 7 : first_day;
120 //本月份最后一天是幾號
121 var final_date = new Date(year, month + 1, 0).getDate(),
122 //上個月的最后一天是幾號
123 last_date = new Date(year, month, 0).getDate(),
124 //剩余的格子數--即排在末尾的格子數
125 surplus = 42 - first_day - final_date;
126 /*設置表頭的日歷*/
127 opt.oHeadDate.innerHTML = year + '年' + (month + 1) + '月';
128 /*填充日歷執行*/
129 var html = '';
130 //上個月的顯示天數
131 for (var i = 0; i < first_day; i++) {
132 html += '<span class="prev-date-nick">' + (last_date - (first_day - 1) + i) + '</span>';
133 }
134 //本月的顯示天數
135 for (var j = 0; j < final_date; j++) {
136 html += '<span class="date-nick">' + (j + 1) + '</span>';
137 }
138 //下個月的顯示天數
139 for (var k = 0; k < surplus; k++) {
140 html += '<span class="next-date-nick">' + (k + 1) + '</span>';
141 }
142 //fill
143 opt.oBody.innerHTML = html;
144 // 當天
145 if (year == new Date().getFullYear() && month == new Date().getMonth()) {
146 opt.oBody.getElementsByTagName('span')[first_day + opt.date - 1].className = 'nick-calendar-current date-nick';
147 }
148
149 //點擊賦值ipt得到日期
150 for (var x = 0, v = opt.oBody.getElementsByTagName('span'), len = v.length; x < len; x++) {
151 v[x].onclick = function () {
152 var now = new Date(year, month, 1), y = 0, m = 0;
153 if (this.className.indexOf('prev-date-nick') > -1) {
154 y = new Date(now.setMonth(now.getMonth() - 1)).getFullYear();
155 m = new Date(now).getMonth();
156 } else if (this.className.indexOf('next-date-nick') > -1) {
157 y = new Date(now.setMonth(now.getMonth() + 1)).getFullYear();
158 m = new Date(now).getMonth();
159 } else if (this.className.indexOf('date-nick') > -1) {
160 y = year;
161 m = month;
162 }
163 document.getElementById('date1').value = y + '-' + (m + 1) + '-' + this.innerHTML;
164 opt.oWrap.style.display = 'none';//隱藏日歷容器
165 }
166 }
167 },
168 // 下個月
169 next: function () {
170 var me = this;
171 opt.oNext.onclick = function () {
172 opt.month++;
173 if (opt.month > 11) {
174 opt.month = 0;
175 opt.year++;
176 }
177 // 填充日歷
178 me.fillDate(opt.year, opt.month);
179 }
180
181 },
182 // 上個月
183 prev: function () {
184 var me = this;
185 opt.oPrev.onclick = function () {
186 opt.month--;
187 if (opt.month < 0) {
188 opt.month = 11;
189 opt.year--;
190 }
191 // 填充日歷
192 me.fillDate(opt.year, opt.month);
193 }
194
195 },
196 // 下一年
197 nextYear: function () {
198 var me = this;
199 opt.oNextYear.onclick = function () {
200 opt.year++;
201 // 填充日歷
202 me.fillDate(opt.year, opt.month);
203 }
204
205 },
206 // 上一年
207 prevYear: function () {
208 var me = this;
209 opt.oPrevYear.onclick = function () {
210 if (opt.year > 1970) {
211 opt.year--;
212 }
213 // 填充日歷
214 me.fillDate(opt.year, opt.month);
215 }
216
217 },
218 //獲取元素偏移位置
219 offset: function (ele) {
220 var l = ele.offsetLeft, t = ele.offsetTop, p = ele.offsetParent;
221 while (p) {
222 l += p.offsetLeft + p.clientLeft;
223 t += p.offsetTop + p.clientTop;
224 p = p.offsetParent;
225 }
226 return {left: l, top: t}
227 },
228 init: function () {//初始化
229 // 初始化參數
230 //創建日歷容器固定結構，每次切換日期值即可
231 var div = document.createElement("DIV");
232 div.setAttribute('id', opt.opts.wrapId);
233 div.innerHTML = '<div class="nick-calendar-hd"><button class="nick-calendar-prev-year"><<</button>' +
234 '<button class="nick-calendar-prev"><</button><span class="nick-calendar-date"></span>' +
235 '<button class="nick-calendar-next">></button><button class="nick-calendar-next-year">>></button>' +
236 '</div><div class="nick-calendar-tit clear">' +
237 '<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>' +
238 '</div><div class="nick-calendar-bd clear"></div>';
239 document.getElementsByTagName("body")[0].appendChild(div);
240 opt.oWrap = document.getElementById(opt.opts.wrapId);//日歷容器
241 opt.trigger = document.getElementById(opt.opts.triggerId);//觸發容器
242 opt.oHeadDate = opt.oWrap.getElementsByClassName('nick-calendar-date')[0];//頭部日期
243 opt.oBody = opt.oWrap.getElementsByClassName('nick-calendar-bd')[0];//日期容器
244 opt.oTit = opt.oWrap.getElementsByClassName('nick-calendar-tit')[0];//星期容器
245 opt.oPrev = opt.oWrap.getElementsByClassName('nick-calendar-prev')[0];//上月按鈕
246 opt.oNext = opt.oWrap.getElementsByClassName('nick-calendar-next')[0];//下月按鈕
247 opt.oPrevYear = opt.oWrap.getElementsByClassName('nick-calendar-prev-year')[0];//上月按鈕
248 opt.oNextYear = opt.oWrap.getElementsByClassName('nick-calendar-next-year')[0];//下月按鈕
249 opt.year = 0;//年
250 opt.month = 0;//月
251 opt.date = 0;//日
252
253 // 獲取今天的日歷時間
254 var now = new Date();
255 opt.year = now.getFullYear();
256 opt.month = now.getMonth();
257 opt.date = now.getDate();
258 // 初始化--填充日歷
259 this.fillDate(opt.year, opt.month);
260 //切換年月
261 this.next();
262 this.nextYear();
263 this.prev();
264 this.prevYear();
265 //設置日歷容器位置
266 opt.oWrap.style.position = 'absolute';
267 opt.oWrap.style.left = this.offset(opt.trigger).left + opt.trigger.offsetWidth + 10 + 'px';
268 opt.oWrap.style.top = this.offset(opt.trigger).top + 'px';
269 opt.oWrap.style.display = 'none';//默認隱藏日歷容器
270 //ipt觸發日歷選擇
271 opt.trigger.onclick = function () {
272 opt.oWrap.style.display = 'block';
273 }
274 }
275 };
276 obj.init();//初始化
277 }
278
279 </script>
280 </body>
281 </html>
over！注釋加代碼應該一看就懂了。復制完整代碼，試試吧！
周公找我了，see you！