基于之前上篇博客轻量级jquery，tool.js和base.js。自定义开发的base_datePicker插件，效果类似于jquery_ui的datePicker插件

//基于Base.js以及tool.js做的日历插件$().extend('datePicker', function() {    //生成日历插件    var $yearSpan;    var $monthSpan;    var tds;    var $prevBtn;    var $nextBtn;    var $lastTr;    var $datePicker;    for (var i = 0, len = this.elements.length; i < len; i++) {        var curElem = this.elements[i];        $(curElem).focus(function() {            $this = $(this);            if (!this.datePicker) {                var top = $this.top() + $this.height();                var left = $this.left();                this.datePicker = createDatePicker(top, left);                $(this.datePicker).insertAfter(this);                $datePicker = $(this.datePicker);                $yearSpan = $('.myDatePicker .year');                $monthSpan = $('.myDatePicker .month');                $prevBtn = $('.myDatePicker .title .l');                $nextBtn = $('.myDatePicker .title .r');                tds = $('.myDatePicker').getElem(0).getElementsByTagName('td');                //为上一月下一月的按钮添加点击事件                addEventForBtn();                //为表格的单元格添加点击事件                addEventForTds(curElem);                //在页面除日期输入框的任何地方点击，日历控件消失                addEventForDocument(curElem);            }            $datePicker.show();            var nowDate = new Date();            refreshDate(nowDate.getFullYear(), nowDate.getMonth() + 1);            //将当前的日期标注为红色            showColor();        });        $(curElem).blur(function() {            if (this.datePicker) {                // $(this.datePicker).hide();            }        });    }    function createDatePicker(top, left) {        var oDiv = document.createElement('div');        oDiv.style.position = 'absolute';        oDiv.style.top = top;        oDiv.style.left = left;        oDiv.className = 'myDatePicker';        var titleDiv = document.createElement('div');        titleDiv.className = 'title';        titleDiv.innerHTML = '< 年 月  > ';        oDiv.appendChild(titleDiv);        var dateTable = document.createElement('table');        //生成表头的星期        var dayArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];        var thead = document.createElement('thead');        thead.insertRow(0);        for (var i = 0, len = dayArr.length; i < len; i++) {            var th = document.createElement('th');            th.innerHTML = dayArr[i];            if (i == 5 || i == 6) {                th.className = 'red';            }            thead.rows[0].appendChild(th);        }        oDiv.appendChild(thead);        //生成表格主体,6行七列        var tbody = document.createElement('tbody');        for (var i = 0; i < 6; i++) {            tbody.insertRow(i);            for (j = 0; j < 7; j++) {                tbody.rows[i].insertCell(j);            }        }        oDiv.appendChild(tbody);        //刷新数据        return oDiv;    }    function isLeapYear(year) {        if (year % 400 == 0) {            return true;        }        if (year % 4 == 0 && year % 100 != 0) {            return true;        }        return false;    }    function getDayNum(year, month) {        var dayNum = 30;        if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {            dayNum = 31;        } else        if (month == 2 && isLeapYear(year)) {            dayNum = 29;        } else if (month == 2) {            dayNum = 28;        }        return dayNum;    }    //根据年份和月份更新日历    function refreshDate(year, month) {        $yearSpan.html(year);        $monthSpan.html(month);        //生成日期数据        var curDate = new Date();        curDate.setFullYear(year);        curDate.setMonth(month - 1);        curDate.setDate(1);        //当前的日历数据        //getDay():0代表周日，1代表周一，...以此类推        var xingqi = curDate.getDay();        var index = xingqi - 1;        if (xingqi == 0) {            index = 6;        }        var dayNum = getDayNum(year, month);        //首先将所有的td清空        for (var i = 0; i < tds.length; i++) {            tds[i].style.display = '';            tds[i].className = '';            tds[i].innerHTML = '';        }        //需要知道当月的天数        var ri = 1;        for (var i = index; i < index + dayNum; i++) {            tds[i].innerHTML = ri;            ri++;        }        //如果最后以行没有显示，则隐藏该行        var hasContent = false;        for (var len = tds.length - 1, i = len; i > len - 7; i--) {            if (tds[i].innerHTML) {                hasContent = true;                break;            }        }        if (!hasContent) {            for (var len = tds.length - 1, i = len; i > len - 7; i--) {                tds[i].style.display = 'none';            }        }    }    //将当前的日期标注为红色    function showColor() {        var curYear = $yearSpan.html();        var curMonth = $monthSpan.html();        var nowDate = new Date();        if (!(nowDate.getFullYear() == curYear && nowDate.getMonth() == (curMonth - 1))) {            return;        }        for (var i = 0; i < tds.length; i++) {            if (tds[i].innerHTML == nowDate.getDate()) {                tds[i].className = 'red';                return;            }        }    }    //为向左向右的按钮添加点击事件    function addEventForBtn() {        $prevBtn.click(function() {            var showYear = parseInt($yearSpan.html());            var showMonth = parseInt($monthSpan.html());            var prevMonth = showMonth - 1;            var prevYear = showYear;            if (showMonth == 1) {                prevMonth = 12;                prevYear = showYear - 1;            }            refreshDate(prevYear, prevMonth);            showColor();        });        $nextBtn.click(function() {            var showYear = parseInt($yearSpan.html());            var showMonth = parseInt($monthSpan.html());            var nextYear = showYear;            var nextMonth = showMonth + 1;            if (showMonth == 12) {                nextMonth = 1;                nextYear = showYear + 1;            }            refreshDate(nextYear, nextMonth);            showColor();        });    }    function addEventForTds(curElem) {        for (var i = 0; i < tds.length; i++) {            $(tds[i]).click(function() {                if (this.innerHTML) {                    var showYear = $yearSpan.html();                    var showMonth = $monthSpan.html();                    var showDate = this.innerHTML;                    curElem.value = showYear + '-' + showMonth + '-' + showDate;                    $datePicker.hide();                }            });        }    }    function addEventForDocument(curElem) {        $(document).click(function(e) {            if(e.target!=curElem){              if ($datePicker && $datePicker.isVisible()) {                $datePicker.hide();            }              }                    });    }});

依赖的css文件,myDatePicker.css

.myDatePicker{    width:260px;    margin-top:5px;}.myDatePicker th,td {    padding:5px;    border: 1px solid #ccc;    text-align: center;    vertical-align: middle;    font-size:10px;   }.myDatePicker td{    cursor:pointer;}.myDatePicker .title {    background: #135;    height: 30px;    line-height: 30px;    color: #fff;    padding: 0 10px;    text-align: center;    overflow: hidden;    font-size:14px;    letter-spacing: 1px;    font-weight: 550;}.myDatePicker table{    border-collapse:collapse;    border-spacing: 0;}.myDatePicker .l{    float:left;    cursor:pointer;}.myDatePicker .r{    float:right;    cursor: pointer;}.myDatePicker .red{    color:red;}.myDatePicker .blue{    color:blue;}

用法示例