DatePicker 一个比较简单的JS日期选择器

发布时间：2018-08-16 04:21:54 所属栏目：PHP教程来源：站长网

导读：DatePicker 一个比较简单的JS日期选择器，这是作者给自己写的东西的自称，其实要我觉得是比较简洁，至少说风格不复杂，简约的东西还是挺让人喜欢的，必竟复杂会带来一系列繁琐问题。演示： htmlheadmeta http-equiv=Content-Type content=text/html; char

　　DatePicker 一个比较简单的JS日期选择器，这是作者给自己写的东西的自称，其实要我觉得是比较简洁，至少说风格不复杂，简约的东西还是挺让人喜欢的，必竟复杂会带来一系列繁琐问题。

　　演示：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DatePicker - liehuo.Net</title> <style> .date-picker-wp { display: none; position: absolute; background: #f1f1f1; left: 40px; top: 40px; border-top: 4px solid #3879d9; } .date-picker-wp table { border: 1px solid #ddd; } .date-picker-wp td { background: #fafafa; width: 22px; height: 18px; border: 1px solid #ccc; font-size: 12px; text-align: center; } .date-picker-wp td.noborder { border: none; background: none; } .date-picker-wp td a { color: #1c93c4; text-decoration: none; } .strong {font-weight: bold} .hand {cursor: pointer; color: #3879d9} </style> <script type="text/javascript"> var DatePicker = function () { var $ = function (i) {return document.getElementById(i)}, addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})}, getPos = function (el) { for (var pos = {x:0, y:0}; el; el = el.offsetParent) { pos.x += el.offsetLeft; pos.y += el.offsetTop; } return pos; } var init = function (n, config) { window[n] = this; Date.prototype._fd = function () {var d = new Date(this); d.setDate(1); return d.getDay()}; Date.prototype._fc = function () {var d1 = new Date(this), d2 = new Date(this); d1.setDate(1); d2.setDate(1); d2.setMonth(d2.getMonth()+1); return (d2-d1)/86400000;}; this.n = n; this.config = config; this.D = new Date; this.el = $(config.inputId); this.el.title = this.n+'DatePicker'; this.update(); this.bind(); } init.prototype = { update : function (y, m) { var con = [], week = ['Su','Mo','Tu','We','Th','Fr','Sa'], D = this.D, _this = this; fn = function (a, b) {return '<td title="'+_this.n+'DatePicker" class="noborder hand" onclick="'+_this.n+'.update('+a+')">'+b+'</td>'}, _html = '<table cellpadding=0 cellspacing=2>'; y && D.setYear(D.getFullYear() + y); m && D.setMonth(D.getMonth() + m); var year = D.getFullYear(), month = D.getMonth() + 1, date = D.getDate(); for (var i=0; i<week.length; i++) con.push('<td title="'+this.n+'DatePicker" class="noborder">'+week[i]+'</td>'); for (var i=0; i<D._fd(); i++ ) con.push('<td title="'+this.n+'DatePicker" class="noborder"> </td>'); for (var i=0; i<D._fc(); i++ ) con.push('<td class="hand" onclick="'+this.n+'.fillInput('+year+', '+month+', '+(i+1)+')">'+(i+1)+'</td>'); var toend = con.length%7; if (toend != 0) for (var i=0; i<7-toend; i++) con.push('<td class="noborder"> </td>'); _html += '<tr>'+fn("-1, null", "<<")+fn("null, -1", "<")+'<td title="'+this.n+'DatePicker" colspan=3 class="strong">'+year+'/'+month+'/'+date+'</td>'+fn("null, 1", ">")+fn("1, null", ">>")+'</tr>'; for (var i=0; i<con.length; i++) _html += (i==0 ? '<tr>' : i%7==0 ? '</tr><tr>' : '') + con[i] + (i == con.length-1 ? '</tr>' : ''); !!this.box ? this.box.innerHTML = _html : this.createBox(_html); }, fillInput : function (y, m, d) { var s = this.config.seprator || '/'; this.el.value = y + s + m + s + d; this.box.style.display = 'none'; }, show : function () { var s = this.box.style, is = this.mask.style; s['left'] = is['left'] = getPos(this.el).x + 'px'; s['top'] = is['top'] = getPos(this.el).y + this.el.offsetHeight + 'px'; s['display'] = is['display'] = 'block'; is['width'] = this.box.offsetWidth - 2 + 'px'; is['height'] = this.box.offsetHeight - 2 + 'px'; }, hide : function () { this.box.style.display = 'none'; this.mask.style.display = 'none'; }, bind : function () { var _this = this; addEvent(document, 'click', function (e) { e = e || window.event; var t = e.target || e.srcElement; if (t.title != _this.n+'DatePicker') {_this.hide()} else {_this.show()} }) }, createBox : function (html) { var box = this.box = document.createElement('div'), mask = this.mask = document.createElement('iframe'); box.className = this.config.className || 'datepicker'; mask.src = 'javascript:false'; mask.frameBorder = 0; box.style.cssText = 'position:absolute;display:none;z-index:9999'; mask.style.cssText = 'position:absolute;display:none;z-index:9998'; box.title = this.n+'DatePicker'; box.innerHTML = html; document.body.appendChild(box); document.body.appendChild(mask); return box; } } return init; }(); onload = function () { new DatePicker('_DatePicker_demo', { inputId: 'date-input', className: 'date-picker-wp', seprator: '-' }); new DatePicker('_demo2', {inputId: 'demo2', className: 'date-picker-wp'}) } </script></head> <body> <input type="text" id="date-input" /> <input type="text" id="demo2" /><br/> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Php常见问题汇总	运用Xdebug优化你的ph
PHP技巧 Smarty adodb	PHP完成任意字符集下正