JavaScript-自制日历控件(只选择年月)

<style>

    *{margin: 0px; padding: 0px;}

</style>

<input type="text" name="year" onclick="Canlender.getYear($(this))" />

<input type="text" name="year" onclick="Canlender.getMonth($(this))" />

<script src="jquery.js"></script>

<script>

    var Canlender = new Object();

    Canlender.years = new Array();

    Canlender.yearIndex = new Array();

    Canlender.months = new Array();

    Canlender.date = new Date();

    Canlender.year = Canlender.date.getFullYear();

    Canlender.page = 0;

    Canlender.pageNum = 12;

    Canlender.startYear = 2000;



    var i, j;

    for (i = Canlender.startYear, j = 0; i <= Canlender.year; ++i, ++j) {

        Canlender.years[j] = i;

        Canlender.yearIndex[i] = j;

    }

    for (i = 1, j = 0; i <= 12; ++i, ++j) {

        Canlender.months[j] = i;

    }



    Canlender.getYearTds = function(goPage) {

        if (typeof(goPage) == 'undefined') {

            goPage = Math.ceil((Canlender.yearIndex[Canlender.year] + 1) / Canlender.pageNum);

        }



        var totalPage = Math.ceil(Canlender.years.length / Canlender.pageNum);

        

        goPage = goPage > totalPage ? totalPage : goPage;

        goPage = goPage <= 0 ? 1 : goPage;

        

        Canlender.page = goPage;

        

        var startIndex = (goPage - 1) * Canlender.pageNum;

        var endIndex = startIndex + Canlender.pageNum - 1;

        

        endIndex = endIndex > Canlender.yearIndex[Canlender.year] ? Canlender.yearIndex[Canlender.year] : endIndex;



        var rtn = '';

        var counter = 0;

        var addtr = false;

        for (i = startIndex; i <= endIndex; ++i) {

            if (counter % 4 == 0) {

                rtn += '<tr>';

            }

            rtn += '<td width="25%">';

            rtn += '<span style="cursor: pointer; font-size: 12px;" onclick="Canlender.sender.val($(this).html()); Canlender.yearBox.css(\'display\', \'none\');">' + Canlender.years[i] + '</span>';

            rtn += '</td>';

            

            ++counter;

            if (counter % 4 == 0) {

                rtn += '</tr>';

            }

        }

        

        while (counter % 4 != 0) {

            rtn += '<td width="25%">&nbsp;</td>';

            ++counter;

            if (counter % 4 == 0) {

                rtn += '</tr>';

            }

        }



        if ($('#calenderYear').length > 0) {

            $('#calenderYear').html(rtn);

        } else {

            return rtn;

        }

    }

    

    Canlender.getMonthTds = function() {

        var rtn = '';

        var counter = 0;

        for (i = 1; i <= 12; ++i) {

            if (counter % 4 == 0) {

                rtn += '<tr>';

            }

            rtn += '<td width="25%">';

            v = i;

            if (i < 10) {

                v = '0' + v;

            }

            rtn += '<span style="cursor: pointer; font-size: 12px;" onclick="Canlender.sender.val($(this).html()); Canlender.monthBox.css(\'display\', \'none\');">' + v+ '</span>';

            rtn += '</td>';

            

            ++counter;

            if (counter % 4 == 0) {

                rtn += '</tr>';

            }

        }

        return rtn;

    }



    Canlender.getYear = function(sender) {

        Canlender.sender = sender;

        if (Canlender.yearBox) {

            Canlender.yearBox.css('display', 'block');

        } else {

            var pages = Canlender.getYearTds();

            var pos = sender.position();

            var left = pos.left;

            var top = pos.top + sender.height();

            var str = '<div style="width: 160px; border: 1px solid black; padding: 2px; position: absolute; z-index:999; top: ' + top + 'px; left: ' + left + '" id="calenderYearId">';

            str += '<div style="background: black; color: white; font-size: 12px; line-height:16px; height: 16px; text-align: center;">';

            str += '<span onclick="Canlender.getYearTds(' + (Canlender.page - 1) + ')" style="padding-right: 20px; cursor: pointer;">&lt;&lt;</span>';

            str += '<span>请选择年份</span>';

            str += '<span onclick="Canlender.getYearTds(' + (Canlender.page + 1) + ')" style="padding-left: 20px; cursor: pointer;">&gt;&gt;</span>';

            str += '</div>';

            str += '<div style="padding: 2px 0px;"><table width="160px" border=0 id="calenderYear">';

            str += pages;

            str += '</table></div>';

            str += '<div style="padding: 2px; text-align:center;"><span style="color: black; cursor: pointer; font-size:12px;" onclick="Canlender.yearBox.css(\'display\', \'none\')">关闭</span></div>';

            str += '</div>';

            Canlender.yearBox = $(str);

            sender.after(Canlender.yearBox);

        }

    }

    

    Canlender.getMonth = function(sender) {

        Canlender.sender = sender;

        if (Canlender.monthBox) {

            Canlender.monthBox.css('display', 'block');

        } else {

            var pages = Canlender.getMonthTds();

            var pos = sender.offset();

            var left = pos.left;

            var top = pos.top;

            var str = '<div style="width: 160px; border: 1px solid black; padding: 2px; position: relative; top: ' + top + 'px; left: ' + left + '" id="calenderMonthId">';

            str += '<div style="background: black; color: white; font-size: 12px; line-height:16px; height: 16px; text-align: center;">';

            str += '<span>请选择月份</span>';

            str += '</div>';

            str += '<div style="padding: 2px 0px;"><table width="160px" border=0 id="calenderMonth">';

            str += pages;

            str += '</table></div>';

            str += '<div style="padding: 2px; text-align:center;"><span style="color: black; cursor: pointer; font-size:12px;" onclick="Canlender.monthBox.css(\'display\', \'none\')">关闭</span></div>';

            str += '</div>';

            Canlender.monthBox = $(str);

            sender.after(Canlender.monthBox);

        }

    }

</script>

可以自己改样式..