新浦京81707con > 首页 > js日历选择控件,js日历控件

原标题:js日历选择控件,js日历控件

浏览次数:60 时间:2019-05-07

下个月

  正是安装月份加1就能够。

            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);
                }

            },

初步化--填充日历

                this.fillDate(opt.year, opt.month);

结构层

<input type="text" placeholder="请选择" readonly id="date1">

  结构层只需你3个触发容器input就能够!

input触发日历选择

                opt.trigger.onclick = function () {
                    opt.oWrap.style.display = 'block';
                }

赢得明日的日历时间

                var now = new Date();
                opt.year = now.getFullYear();
                opt.month = now.getMonth();
                opt.date = now.getDate();

结构层

<input type="text" placeholder="请选择" readonly id="date1">

  结构层只需你叁个触发容器input就能够!

初始化

            init: function () {//初始化
                }                

设置日历容器地方

                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';//默认隐藏日历容器

调用日历选取器

  调用时,八个必传的容器id参数。

    calendarNick({
        wrapId: 'nickCalendar',//日历容器id
        triggerId: 'date1'//触发容器id
    });

  完整代码:

图片 1图片 2

  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  = ''   (last_date - (first_day - 1)   i)   '';
133                 }
134                 //本月的显示天数
135                 for (var j = 0; j < final_date; j  ) {
136                     html  = ''   (j   1)   '';
137                 }
138                 //下个月的显示天数
139                 for (var k = 0; k < surplus; k  ) {
140                     html  = ''   (k   1)   '';
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">&lt;&lt;</button>'  
234                         '<button class="nick-calendar-prev">&lt;</button>'  
235                         '<button class="nick-calendar-next">&gt;</button><button class="nick-calendar-next-year">&gt;&gt;</button>'  
236                         '</div><div class="nick-calendar-tit clear">'  
237                         '日一二三四五六'  
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>

View Code

  over!注释加代码应该一看就懂了。复制完整代码,试试吧!

  周公找笔者了,see you!

 

 

 

概念日历采用格局

    function calendarNick(options) {
        var opt = {//参数保存在此对象中
            opts: options
        };
        var obj={
    //code
        };      
}  

  定义一个日历选拔器方法把3个目的包裹起来,并调用开端化方法就能够。

  快过大年了,还有几天过大年呀?每壹天看日历,所以,本身写了个日历选取器玩玩!

参数存在四个目的中

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

行为层

初始化

            init: function () {//初始化
                }                

切换年月情势

                this.next();
                this.nextYear();
                this.prev();
                this.prevYear();

切换年月艺术

                this.next();
                this.nextYear();
                this.prev();
                this.prevYear();

参数存在一个对象中

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

js日历选取控件,js日历控件

  快过大年了,还有几天度岁呀?每壹天看日历,所以,自个儿写了个日历接纳器玩玩!

  直接上代码:

具备的格局保存在另三个目的中

        var obj = {}

下个月

  便是设置月份加一就能够。

            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);
                }

            },

表现层

图片 3图片 4

 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

友好提醒:

  这一点样式必须的哦,否则,呵呵!当然,你也能够自定义!

调用日历选用器

  调用时,多个必传的器皿id参数。

    calendarNick({
        wrapId: 'nickCalendar',//日历容器id
        triggerId: 'date1'//触发容器id
    });

  完整代码:

图片 5 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: #99玖; 6贰 } 63 6四 .nick-calendar-hd { 65 height: 30px; 6陆 line-height: 30px; 6七font-weight: bold; 6八 } 6九 70 .nick-calendar-prev, .nick-calendar-next { 71 background-color: violet; 72 border: 0; 7三 border-radius: 伍px; 74font-weight: bold; 7五 } 7六 7七 .nick-calendar-prev-year, .nick-calendar-next-year { 78 background-color: turquoise; 7玖 border: 0; 80 border-radius: 5px; 8一 font-weight: bold; 8二 } 捌三 8四.nick-calendar-date { 八5 display: inline-block; 8陆 width: 90px; 87 } 88 8玖 .date-nick { 90 background-color: violet; 九1 } 玖2 93.nick-calendar-current { 九四 background-color: yellowgreen; 玖5 } 九陆 97</style> 九捌 </head> 9九 <body> 十0 <input type="text" placeholder="请选用" readonly id="date一"> 十一<script> 拾二 // 调用 十三 calendarNick({ 10四 wrapId: 'nickCalendar',//日历容器id 十伍 triggerId: 'date一'//触发容器id 十陆 }); 107 //日历选取成效 十八 function calendarNick(options) { 10玖 var opt = {//参数保存在此目的中 1十 opts: options 11一 }; 112 1一3 var obj = { 114 //填充日历 115 fillDate: function (year, month) { 116 //上一个月份第叁天是星期几-为展现这个月的造化做铺垫 1一七 var first_day = new Date(year, month, 一).getDay(); 118 //如果刚好是周末,则空出壹行(展现前段日子的运气) 11玖 first_day = first_day == 0 ? 7 : first_day; 120 //前些日子份最后壹天是几号 1二一 var final_date = new Date(year, month 壹, 0).getDate(), 122 //后3个月的结尾一天是几号 123 last_date = new Date(year, month, 0).getDate(), 12四 //剩余的格子数--即排在末尾的格子数 125 surplus = 4二 - first_day - final_date; 126 /*设置表头的日历*/ 127 opt.oHeadDate.innerHTML = year '年' (month 1) '月'; 128 /*填充日历试行*/ 12玖 var html = ''; 130 //前段时间的来得天数 13一 for (var i = 0; i < first_day; i ) { 132 html = '<span class="prev-date-nick">' (last_date - (first_day - 一) i) '</span>'; 13三 } 13四 //当月的体现天数 135 for (var j = 0; j < final_date; j ) { 13陆 html = '<span class="date-nick">' (j 一) '</span>'; 壹37 } 13八 //前一个月的突显天数 139 for (var k = 0; k < surplus; k ) { 140 html = '<span class="next-date-nick">' (k 一) '</span>'; 1四1 } 14二 //fill 1四三 opt.oBody.innerHTML = html; 14四 // 当天 145 if (year == new Date().getFullYear() && month == new Date().getMonth()) { 146opt.oBody.getElementsByTagName('span')[first_day opt.date - 1].className = 'nick-calendar-current date-nick'; 14七 } 14八 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, 一), y = 0, m = 0; 一伍3 if (this.className.indexOf('prev-date-nick') > -一) { 15四 y = new Date(now.setMonth(now.getMonth() - 一)).getFullYear(); 155 m = new Date(now).getMonth(); 15陆 } else if (this.className.indexOf('next-date-nick') > -壹) { 壹五7 y = new Date(now.setMonth(now.getMonth() 一)).getFullYear(); 15捌 m = new Date(now).getMonth(); 15九 } else if (this.className.indexOf('date-nick') > -1) { 160 y = year; 1六一 m = month; 16二 } 16叁document.getElementById('date一').value = y '-' (m 壹) '-' this.innerHTML; 164 opt.oWrap.style.display = 'none';//隐藏日历容器 165} 16六 } 167 }, 16八 // 前段日子 169 next: function () { 170 var me = this; 17一 opt.oNext.onclick = function () { 17二 opt.month ; 17叁 if (opt.month > 11) { 17四 opt.month = 0; 17伍 opt.year ; 17陆 } 17柒 // 填充日历 178me.fillDate(opt.year, opt.month); 17九 } 180 1捌一 }, 1八二 // 前些日子 18叁prev: function () { 1八四 var me = this; 185 opt.oPrev.onclick = function () { 18陆 opt.month--; 1八七 if (opt.month < 0) { 188 opt.month = 11; 189 opt.year--; 190 } 1九壹 // 填充日历 1玖贰 me.fillDate(opt.year, opt.month); 1玖三 } 1玖四 195 }, 1九陆 // 下一季度 1玖柒 nextYear: function () { 19八 var me = this; 19玖 opt.oNextYear.onclick = function () { 200 opt.year ; 20一 // 填充日历 20二 me.fillDate(opt.year, opt.month); 20叁 } 20肆 205 }, 20陆 // 下壹季度 20七 prevYear: function () { 20八 var me = this; 20九 opt.oPrevYear.onclick = function () { 二10 if (opt.year > 一玖陆九) { 21一 opt.year--; 212 } 2壹3 // 填充日历 21肆 me.fillDate(opt.year, opt.month); 二一5 } 216 贰一七 }, 21八 //获取元素偏移地点 21玖 offset: function (ele) { 220 var l = ele.offsetLeft, t = ele.offsetTop, p = ele.offsetParent; 2二1 while (p) { 22二 l = p.offsetLeft p.clientLeft; 2二3 t = p.offsetTop p.clientTop; 2二四 p = p.offsetParent; 22伍 } 2二陆return {left: l, top: t} 2二7 }, 22捌 init: function () {//开始化 229 // 初始化参数 230 //创制日历容器固定结构,每一趟切换日期值就能够 23一 var div = document.createElement("DIV"); 23贰 div.setAttribute('id', opt.opts.wrapId); 23三 div.innerHTML = '<div class="nick-calendar-hd"><button class="nick-calendar-prev-year"><<</button>' 23四'<button class="nick-calendar-prev"><</button><span class="nick-calendar-date"></span>' 23五 '<button class="nick-calendar-next">></button><button class="nick-calendar-next-year">>></button>' 23陆'</div><div class="nick-calendar-tit clear">' 2叁柒'<span>日</span><span>1</span><span>二</span><span>3</span><span>四</span><span>5</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);//日历容器 二肆一opt.trigger = document.getElementById(opt.opts.triggerId);//触发容器 24贰opt.oHeadDate = opt.oWrap.getElementsByClassName('nick-calendar-date')[0];//底部日期 2四叁 opt.oBody = opt.oWrap.getElementsByClassName('nick-calendar-bd')[0];//日期容器 244opt.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];//后一个月按钮247 opt.oPrevYear = opt.oWrap.getElementsByClassName('nick-calendar-prev-year')[0];//上三个月按钮24捌 opt.oNextYear = opt.oWrap.getElementsByClassName('nick-calendar-next-year')[0];//本月按键249 opt.year = 0;//年 250 opt.month = 0;//月 25一 opt.date = 0;//日 252 253 // 得到前几天的日历时间 25四 var now = new Date(); 25五 opt.year = now.getFullYear(); 25陆 opt.month = now.getMonth(); 2五7 opt.date = now.getDate(); 258 // 起首化--填充日历 25九 this.fillDate(opt.year, opt.month); 260 //切换年月 贰陆一 this.next(); 26二 this.nextYear(); 二陆三this.prev(); 26四 this.prevYear(); 二陆5 //设置日历容器地点 26陆opt.oWrap.style.position = 'absolute'; 二陆7 opt.oWrap.style.left = this.offset(opt.trigger).left opt.trigger.offsetWidth 十 'px'; 26八opt.oWrap.style.top = this.offset(opt.trigger).top 'px'; 269opt.oWrap.style.display = 'none';//暗中认可隐藏日历容器 270 //ipt触发日历选用 271 opt.trigger.onclick = function () { 27二opt.oWrap.style.display = 'block'; 27三 } 274 } 275 }; 27陆obj.init();//初步化 27七 } 27八 27九 </script> 280 </body> 2八一</html> View Code

  over!注释加代码应该一看就懂了。复制完整代码,试试啊!

  周公找笔者了,see you!

 

 

 

快度岁了,还有几天度岁呀?每21日看日历,所以,自个儿写了个日历选取器玩玩! 直接上代码: 表现层 1 #nick...

input触发日历采用

                opt.trigger.onclick = function () {
                    opt.oWrap.style.display = 'block';
                }

表现层

图片 6 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

和睦提醒:

  那一点样式必须的啊,否则,呵呵!当然,你也得以自定义!

本文由新浦京81707con发布于首页,转载请注明出处:js日历选择控件,js日历控件

关键词: 新浦京81707con

上一篇:和生成器,迭代器与生成器

下一篇:没有了