一个可多选的日期控件自己写着玩写到一半未美化

本文链接：https://blog.csdn.net/djk8888/article/details/81188528
一个可多选日期控件自己写着玩写到一半未美化
在线演示：http://djk8888.3vdo.net/ckbDay.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>djk8888</title>
    <style type="text/css">
        td {
            text-align: center;
            cursor: pointer;
        }

        tr th span {
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#selYear option").remove();
            var sDate = new Date();
            var sYear = sDate.getFullYear();//年
            for (var i = 0; i < 10; i++) {
                $("#selYear").append("<option value='" + (sYear - 5 + i) + "'>" + (sYear - 5 + i) + "年</option>");
            }
            $("#selYear").val(sYear);//选择当前年
        });
        $(function () {
            $("#selMonth option").remove();
            var sDate = new Date();
            var mymonth = sDate.getMonth() + 1;//注：月数从0~11为一月到十二月
            for (var i = 0; i < 12; i++) {
                $("#selMonth").append("<option value='" + (i + 1) + "'>" + (i + 1) + "月</option>");
            }
            $("#selMonth").val(mymonth);//选择当前月
        });
        $(function () {
            bindCalendar();
            $("#selYear").change(function () {
                bindCalendar();
            });
            $("#selMonth").change(function () {
                bindCalendar();
            });
        });
        function bindCalendar() {
            //清空
            $("#tb td").removeAttr("style");
            $("#tb td").html("");
            for (var i = 0; i < 42; i++) {
                $("#td" + i).html("");
            }
            //加载
            var thisYear = $("#selYear").val();
            var thisMonth = $("#selMonth").val();
            var dayNum = mGetDate(thisYear, thisMonth);//计算某月有几天
            var firstDay = new Date();
            firstDay.setFullYear(thisYear, (thisMonth - 1), 1);
            var thisWeek = firstDay.getDay();//本月第一天是星期几

            for (var i = 0; i < dayNum; i++) {
                var tempDay = (i + 1);
                var ckb = "";
                ckb += "<input type='checkbox' name='ckb_day' id='" + "ckb_" + tempDay + "' value='" + thisYear + "-" + thisMonth + "-" + tempDay + "' />";
                ckb += "<label for='ckb_" + tempDay + "'>" + tempDay + "</label>";
                $("#td" + (parseInt(thisWeek) + parseInt(i))).html(ckb);
            }
        }
        //获取某月有几天
        function mGetDate(year, month) {
            var d = new Date(year, month, 0);
            return d.getDate();
        }
    </script>
</head>
<body>
    <div style=" width:600px;">
        <select id="selYear"></select>
        <select id="selMonth"></select>
        <input type="button" value="获取选中日期" "GetCkb()" id="btnGet" />
        <script type="text/javascript">
            //获取选中日期
            function GetCkb() {
                obj = document.getElementsByName("ckb_day");
                check_val = [];
                for (k in obj) {
                    if (obj[k].checked)
                        check_val.push(obj[k].value);
                }
                alert(check_val);
            }
            //根据星期几来选择对应日期
            function SelectWeek(week) {
                obj = document.getElementsByName("ckb_day");
                for (k in obj) {
                    var s = obj[k].value;//每一个日期
                    s = s.replace(/-/g, "/");
                    s = s.replace(/(\.\d+)?/g, "");
                    var d = new Date(s);//字符串转日期格式
                    var w = d.getDay();//获取当前日期的星期(0~6,周日~周六)
                    if (w == week) {//自动勾选这个星期下的所有的日期
                        $(":checkbox[name='ckb_day'][value='" + obj[k].value + "']").prop("checked", "checked");
                    }
                }  
            }
            //清除：根据星期几来选择对应日期
            function ClearWeek(week) {
                obj = document.getElementsByName("ckb_day");
                for (k in obj) {
                    var s = obj[k].value;//每一个日期
                    s = s.replace(/-/g, "/");
                    s = s.replace(/(\.\d+)?/g, "");
                    var d = new Date(s);//字符串转日期格式
                    var w = d.getDay();//获取当前日期的星期(0~6,周日~周六)
                    if (w == week) {//自动勾选这个星期下的所有的日期
                        $(":checkbox[name='ckb_day'][value='" + obj[k].value + "']").attr("checked", false);
                    }
                }           
            }
        </script>
        <hr />
        <table border="1" width="400" id="mytable">
            <tr>
                <th><span "SelectWeek(0)" "ClearWeek(0)">周日</span></th>
                <th><span "SelectWeek(1)" "ClearWeek(1)">周一</span></th>
                <th><span "SelectWeek(2)" "ClearWeek(2)">周二</span></th>
                <th><span "SelectWeek(3)" "ClearWeek(3)">周三</span></th>
                <th><span "SelectWeek(4)" "ClearWeek(4)">周四</span></th>
                <th><span "SelectWeek(5)" "ClearWeek(5)">周五</span></th>
                <th><span "SelectWeek(6)" "ClearWeek(6)">周六</span></th>
            </tr>
            <tr>
                <td id="td0"></td>
                <td id="td1"></td>
                <td id="td2"></td>
                <td id="td3"></td>
                <td id="td4"></td>
                <td id="td5"></td>
                <td id="td6"></td>
            </tr>
            <tr>
                <td id="td7"></td>
                <td id="td8"></td>
                <td id="td9"></td>
                <td id="td10"></td>
                <td id="td11"></td>
                <td id="td12"></td>
                <td id="td13"></td>
            </tr>
            <tr>
                <td id="td14"></td>
                <td id="td15"></td>
                <td id="td16"></td>
                <td id="td17"></td>
                <td id="td18"></td>
                <td id="td19"></td>
                <td id="td20"></td>
            </tr>
            <tr>
                <td id="td21"></td>
                <td id="td22"></td>
                <td id="td23"></td>
                <td id="td24"></td>
                <td id="td25"></td>
                <td id="td26"></td>
                <td id="td27"></td>
            </tr>
            <tr>
                <td id="td28"></td>
                <td id="td29"></td>
                <td id="td30"></td>
                <td id="td31"></td>
                <td id="td32"></td>
                <td id="td33"></td>
                <td id="td34"></td>
            </tr>
            <tr>
                <td id="td35"></td>
                <td id="td36"></td>
                <td id="td37"></td>
                <td id="td38"></td>
                <td id="td39"></td>
                <td id="td40"></td>
                <td id="td41"></td>
            </tr>
        </table>
        <hr />
        <span style="color:red;">*注：点击“周日”至“周六”,可选取对应星期的日期；双击取消；</span>
    </div>
</body>
</html>
这里写图片描述