jQuery周日历插件

  jQuery周日历插件,显示当前日期所在的一周的日期,效果如下

jQuery周日历插件

  jQuery周日历插件源代码如下,插件有2个方法getValue和setValue。getValue返回值为数组,第一项为日期,格式为年/月/日,第二项为星期几。setValue参数为 年-月-日格式或者年/月/日格式。

<!doctype html>
<style>
.weekpicker,.weekpicker .dateitems{overflow:hidden;clear:both;font-size:15px;user-select:none;-moz-user-select:none;-webkit-user-select:none}
.weekpicker .pre,.weekpicker .next{background:#f00;color:#fff;width:48%;float:left;line-height:40px;text-align:center;cursor:pointer}
.weekpicker .next{float:right}
.weekpicker .dateitems{padding-top:10px}
.weekpicker .dateitems div{width:14.28%;float:left;text-align:center;font-family:"Microsoft YaHei";line-height:25px;cursor:pointer}
.weekpicker .dateitems div b{display:block;color:#999;font-weight:normal;font-size:14px}
.weekpicker .dateitems div.selected{background:#eee;}
</style>
<div class="weekpicker">
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    $.fn.weekpicker = function (config, param) {
        if (config == 'getValue') return [$(this).data('value'),$(this).data('cur')];
        if (config == 'setValue') {
            param = param.replace(/-/g, '/');
            var d = new Date(param);
            return $(this).find('.pre').trigger('click', { d: d, value: param.split('/').slice(1).join('/') }).end();
        }
        config = config || {};
        function dateStr(d) { return (d.getMonth() + 1) + '/' + d.getDate();}
        return this.each(function () {
            var me = $(this), d = new Date(), cur = d.getDay() || 7, curDateStr = dateStr(d), s = '<div class="pre">&lt;&lt;上一周</div><div class="next">下一周&gt;&gt;</div><div class="dateitems">', day = '一二三四五六日';
            d.setDate(d.getDate() + 1 - cur);
            me.data('value', d.getFullYear() + '/' + curDateStr);
            me.data('cur', '星期' + day.charAt(cur - 1));
            for (var i = 1; i <= 7; i++) {
                var dstr = dateStr(d)
                s += '<div class="di' + (dstr == curDateStr ? ' selected' : '') + '" y="'+d.getFullYear()+'">' + day.charAt(i - 1) + '<b>' + dstr + '</b></div>';
                d.setDate(d.getDate() + 1);
            }
            s += '</div>';
            var bs=me.html(s).click(function (e,param) {
                var o = e.target,pre;
                if (o.tagName == 'B') o = o.parentNode;
                if ((pre = o.className == 'pre') || o.className == 'next') {
                    if (param) {
                        d = param.d;
                        me.data('value', d.getFullYear() + '/' + (curDateStr = param.value));
                        me.data('cur', '星期' + day.charAt((d.getDay() || 7) - 1));
                        d.setDate(d.getDate() + 1 - (d.getDay() || 7));
                    }
                    else if (pre) d.setDate(d.getDate() - 14);
                    bs.each(function (i) {
                        this.innerHTML = dateStr(d);
                        this.parentNode.className = this.innerHTML == curDateStr ? 'di selected' : 'di';
                        this.parentNode.setAttribute('y', d.getFullYear());
                        d.setDate(d.getDate() + 1);
                    });
                }
                else if (o.className.indexOf('di') != -1) {
                    config.click && config.click.call(me, me.data('value'));
                    $(o).addClass('selected').siblings().removeClass('selected');
                    curDateStr = o.lastChild.innerHTML;
                    me.data('value', o.getAttribute('y') + '/' + curDateStr);
                    me.data('cur', '星期' + o.firstChild.data);
                }
            }).find('b');
        })
    }
    $('.weekpicker').weekpicker()
</script>

 


原创文章,转载请注明出处:jQuery周日历插件

评论(0)Web开发网
阅读(100)喜欢(0)JavaScript/Ajax开发技巧