zoukankan      html  css  js  c++  java

  • 一简易的DatePicker

    DatePicker是个很常见的组件。我大致搜了一下，满大篇的demo。各大框架也把DatePicker纳入基本的组件库里。jQ的ui有，YUI的widget里也有。而且也封装的结结实实，兼容性，通用性，都做得挺好。于是在代码完善的同时，代码量自然也不会少。即使建立在基础库之上，代码也是好几百行。

    真正使用的时候可能并不需要这么完善的功能。咱们就写个简陋点的东西，够自己用就行了。

    而且以前有朋友提出我发的东西都是一些娱乐货，没有什么实用性，这次就当是个开始，抛个砖，以后时不时发个带一些实用性的东东。 

    <!-- 以下demo没有什么出彩的地方，仅供有需要的朋友看看 --> 

    以下是源码：

    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">&nbsp;</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">&nbsp;</td>');
                _html     += '<tr>'+fn("-1, null", "&lt;&lt;")+fn("null, -1", "&lt;")+'<td title="'+this.n+'DatePicker" colspan=3 class="strong">'+year+'/'+month+'/'+date+'</td>'+fn("null, 1", "&gt;")+fn("1, null", "&gt;&gt;")+'</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;
    }();

     调用方式：

        new DatePicker('_DatePicker_demo', {
            inputId:     'date-input',
            className:     'date-picker-wp',
            seprator:     '-'
        });

     第一个参数：实例名，
    第二个参数一个对象字面量，包括输入框的id（必须），弹出日历box的className，日期样式的分隔符如‘-’，‘/’，等。后两个可省略，默认值‘datepicker’，‘/’。 
  • 相关阅读:
    Shell: 定期存档日志文件
    canva实践小实例 —— 马赛克效果
    canvas API ，通俗的canvas基础知识（五）
    canvas实践小实例二 —— 扇形
    canvas API ，通俗的canvas基础知识（四）
    canvas实践小实例一 —— 画板工具
    canvas API ，通俗的canvas基础知识（三）
    canvas API ，通俗的canvas基础知识（二）
    canvas API ，通俗的canvas基础知识（一）
    JavaScript小实例：拖拽应用（二）
  • 原文地址：https://www.cnblogs.com/hongru/p/1954603.html
Copyright © 2011-2022 走看看