javascript实例学习之六—自定义日历控件

2021-11-27 15:55:47

基于之前上篇博客轻量级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 = , 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().getElementsByTagName('td');

                //为上一月下一月的按钮添加点击事件

                addEventForBtn();

                //为表格的单元格添加点击事件

                addEventForTds(curElem);

                //在页面除日期输入框的任何地方点击，日历控件消失

                addEventForDocument(curElem);

            }

            $datePicker.show();

            var nowDate = new Date();

            refreshDate(nowDate.getFullYear(), nowDate.getMonth() + );

            //将当前的日期标注为红色

            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 = '<span class="l"><</span> <span class = "year"></span>年<span class="month"></span > 月  <span class = "r" >> </span>';

        oDiv.appendChild(titleDiv);

        var dateTable = document.createElement('table');

        //生成表头的星期

        var dayArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

        var thead = document.createElement('thead');

        thead.insertRow();

        for (var i = , len = dayArr.length; i < len; i++) {

            var th = document.createElement('th');

            th.innerHTML = dayArr[i];

            if (i ==  || i == ) {

                th.className = 'red';

            }

            thead.rows[].appendChild(th);

        }

        oDiv.appendChild(thead);

        //生成表格主体,6行七列

        var tbody = document.createElement('tbody');

        for (var i = ; i < ; i++) {

            tbody.insertRow(i);

            for (j = ; j < ; j++) {

                tbody.rows[i].insertCell(j);

            }

        }

        oDiv.appendChild(tbody);

        //刷新数据

        return oDiv;

    }

    function isLeapYear(year) {

        if (year %  == ) {

            return true;

        }

        if (year %  ==  && year %  != ) {

            return true;

        }

        return false;

    }

    function getDayNum(year, month) {

        var dayNum = ;

        if (month ==  || month ==  || month ==  || month ==  || month ==  || month ==  || month == ) {

            dayNum = ;

        } else

        if (month ==  && isLeapYear(year)) {

            dayNum = ;

        } else if (month == ) {

            dayNum = ;

        }

        return dayNum;

    }

    //根据年份和月份更新日历

    function refreshDate(year, month) {

        $yearSpan.html(year);

        $monthSpan.html(month);

        //生成日期数据

        var curDate = new Date();

        curDate.setFullYear(year);

        curDate.setMonth(month - );

        curDate.setDate();

        //当前的日历数据

        //getDay():0代表周日，1代表周一，...以此类推

        var xingqi = curDate.getDay();

        var index = xingqi - ;

        if (xingqi == ) {

            index = ;

        }

        var dayNum = getDayNum(year, month);

        //首先将所有的td清空

        for (var i = ; i < tds.length; i++) {

            tds[i].style.display = '';

            tds[i].className = '';

            tds[i].innerHTML = '';

        }

        //需要知道当月的天数

        var ri = ;

        for (var i = index; i < index + dayNum; i++) {

            tds[i].innerHTML = ri;

            ri++;

        }

        //如果最后以行没有显示，则隐藏该行

        var hasContent = false;

        for (var len = tds.length - , i = len; i > len - ; i--) {

            if (tds[i].innerHTML) {

                hasContent = true;

                break;

            }

        }

        if (!hasContent) {

            for (var len = tds.length - , i = len; i > len - ; 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 - ))) {

            return;

        }

        for (var i = ; 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 - ;

            var prevYear = showYear;

            if (showMonth == ) {

                prevMonth = ;

                prevYear = showYear - ;

            }

            refreshDate(prevYear, prevMonth);

            showColor();

        });

        $nextBtn.click(function() {

            var showYear = parseInt($yearSpan.html());

            var showMonth = parseInt($monthSpan.html());

            var nextYear = showYear;

            var nextMonth = showMonth + ;

            if (showMonth == ) {

                nextMonth = ;

                nextYear = showYear + ;

            }

            refreshDate(nextYear, nextMonth);

            showColor();

        });

    }

    function addEventForTds(curElem) {

        for (var i = ; 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: #;

    height: 30px;

    line-height: 30px;

    color: #fff;

    padding:  10px;

    text-align: center;

    overflow: hidden;

    font-size:14px;

    letter-spacing: 1px;

    font-weight: ;

}

.myDatePicker table{

    border-collapse:collapse;

    border-spacing: ;

}

.myDatePicker .l{

    float:left;

    cursor:pointer;

}

.myDatePicker .r{

    float:right;

    cursor: pointer;

}

.myDatePicker .red{

    color:red;

}

.myDatePicker .blue{

    color:blue;

}

用法示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试页面</title>

    <link rel="stylesheet" href="./usualEffects/css/myDatePicker.css">

</head>

<body>

    <input type="text" id="myDatePicker">

    <!--

    <div class="myDatePicker">

        <div class="title">

            <span class="l"><</span>

            <span class="c"><span class="year"></span>年<span class="month"></span>月</span>

            <span class="r">></span>

        </div>

        <table>

            <thead>

                <tr>

                    <th>周一</th>

                    <th>周二</th>

                    <th>周三</th>

                    <th>周四</th>

                    <th>周五</th>

                    <th class="red">周六</th>

                    <th class="red">周日</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td></td>

                </tr>

            </tbody>

        </table>

    </div>

-->

    <script src="./commonJs/tool.js"></script>

    <script src="./commonJs/base.js"></script>

    <script src="./commonJs/base_datePicker.js"></script>

    <script>

    $('#myDatePicker').datePicker();

    </script>

</body>

</html>

自定义日历控件使用方法示例

码农公寓

相关文章