一个手写日历控件，多日历展示日期相关信息，整理总结

最新推荐文章于 2022-03-04 19:17:27 发布

漫游者码农

最新推荐文章于 2022-03-04 19:17:27 发布

阅读量705

点赞数

分类专栏： asp.net

本文链接：https://blog.csdn.net/xu2034029667/article/details/104984244

版权

asp.net 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

有图有真相

几个月前写的，参考某位博主写的样式，现在不记得那位博主，隔了一段时间后再看，又花了个把小时，才明白

它的原理，如下：

显示通用的上年，上月，下年，下月四个按钮，--h4,a等标签

当然还有星期等情况也是固定不变的--一个ul li标签

同时点击这四个按钮，下面的天，跟着变化--一个ul li标签

难点是关于闰年，以及每个月天数不一致，

处理：var oDate = new Date(); //定义时间
oDate.setMonth(oDate.getMonth() + n);//设置月份
var year = oDate.getFullYear(); //年
var month = oDate.getMonth(); //月
var today = oDate.getDate(); //日
//计算本月有多少天
var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
//判断闰年
if (month == 1) {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
allDay = 29;
}
}

具体‘第几天’天名称，就是要显示出来的内容

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ETLRecord.aspx.cs" Inherits="jj360.Web.FundAnalysis.ETLRecord" %>

<%@ Register Assembly="WebControls" Namespace="Hcl.WebControls" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title></title>
    <link href="/EasyUI-1.5/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/EasyUI-1.5/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/EasyUI-1.5/demo.css" rel="stylesheet" type="text/css" />
    <script src="/EasyUI-1.5/jquery.min.js" type="text/javascript"></script>
    <script src="/EasyUI-1.5/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/My97DatePicker/WdatePicker.js"></script>
    <link href="/css/dialog.css" rel="stylesheet" />
    <script src="/script/global.js" type="text/javascript"></script>
    <script src="/script/echarts.min.js" type="text/javascript"></script>
    <link href="/css/mycss.css" rel="stylesheet" type="text/css" />

    <style>
        html, body, div, ul, li, p {
            padding: 0;
            margin: 0;
        }

        html {
            font-size: 12px;
        }

        body {
            padding: 10px;
        }

        ul, li {
            list-style: none;
        }

        .toolbar {
            border: 1px solid #45b0e6;
            float: left;
            width: 100%;
        }

        .box {
            padding: 5px 0;
            /*border-bottom: 1px dotted #DDD;*/
        }

        .title {
            width: 90px;
            float: left;
            /*padding: 5px 0;*/
            font-weight: bold;
            font-size: 14px;
            color: #333;
            margin-left: 15px;
        }

        .category li {
            float: left;
            margin-left: 10px;
        }

            .category li label {
                cursor: pointer;
            }

                .category li label input {
                    vertical-align: text-bottom;
                }

        .list {
            border: 1px solid #45b0e6;
            float: left;
            width: 100%;
            padding-left:5px;
            /*margin-top: 15px;*/
        }

        input[type=radio]:checked + span {
            color: #4372ba;
            font-weight: bold;
        }

        .level1 {
            background-color: red;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .level2 {
            background-color: green;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .level3 {
            color: #d20000 !important;
        }

        .level4 {
            color: #006000 !important;
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .calendar {
            width: 210px;
            /*margin: 100px auto;*/
            overflow: hidden;
            border: 1px solid #95B8E7;
            padding: 20px;
            position: relative;
            display:inline-block;
            height:263px;
            margin:5px 5px -2px 0px;
            border-radius:4px;
        }

            .calendar h4 {
                text-align: center;
                margin-bottom: 10px;
            }

            .calendar .a1 {
                position: absolute;
                top: 46px;
                left: 50px;
            }

            .calendar .a2 {
                position: absolute;
                top: 46px;
                right: 50px;
            }
             .calendar .a11 {
                position: absolute;
                top: 20px;
                top:46px;
                left: 20px;
            }

            .calendar .a22 {
                position: absolute;
               top:46px;
                right: 20px;
            }

            .calendar .week {
                height: 30px;
                line-height: 20px;
                border-bottom: 1px solid #95B8E7;
                margin-bottom: 10px;
            }

                .calendar .week li {
                    float: left;
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    list-style: none;
                }

            .calendar .dateList {
                overflow: hidden;
                clear: both;
            }

                .calendar .dateList li {
                    float: left;
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    list-style: none;
                }

                .calendar .dateList .ccc {
                    color: #ccc;
                }

                .calendar .dateList .red {
                    /*background: #F90;*/
                    /*background:#0269AE;*/
                    background:#ffe48d;
                    /*color: #fff;*/
                }

                .calendar .dateList .sun {
                    color: #f00;
                    /*color:#ffe48d;
                    color:#0269AE;*/
                }
            .calendar .dateList .blue {
                background:#E0ECFF;
                /*background:#ffe48d;*/
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="tool" class="toolbar">

            <div class="box">
                <div class="title">数据来源：</div>
                <ul class="category" style="padding: 2px;">
                    <li>
                        <label>
                            <input type="radio" name="dateRank" value="" checked="checked" /><span>全部</span></label></li>
                     <li>
                        <label>
                            <input type="radio" name="dateRank" value="GD" /><span>GD</span></label></li>
                    <li>
                        <label>
                            <input type="radio" name="dateRank" value="IPDP" /><span>IPDP</span></label></li>
                    <li>
                        <label>
                            <input type="radio" name="dateRank" value="IBAS" /><span>IBAS</span></label></li>
                    <li>
                        <label>
                            <input type="radio" name="dateRank" value="XPAD" /><span>XPAD</span></label></li>
                    <li>
                        <label>
                            <input type="radio" name="dateRank" value="XPADG" /><span>XPADG</span></label></li>
                    <li>
                        <label>
                            <input type="radio" name="dateRank" value="ROCRM" /><span>ROCRM</span></label></li>
                </ul>

                <div style="clear: both;"></div>
            </div>

        </div>

        <div class="list" id="list-calendar">
            <%--<div class="calendar">
                <h4>2013年10月</h4>
                <a href="##" class="a1">上月</a>
                <a href="##" class="a11">上年</a>
                <a href="##" class="a22">下年</a>
                <a href="##" class="a2">下月</a>
                <ul class="week">
                    <li>日</li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>

                </ul>
                <ul class="dateList"></ul>
            </div>--%>

            <div class="calendar">
                 <h4>GD_GOODS</h4>
                <h4>2013年10月</h4>
                <a href="##" class="a1">上月</a>
                <a href="##" class="a11">上年</a>
                <a href="##" class="a22">下年</a>
                <a href="##" class="a2">下月</a>
                <ul class="week">
                    <li>日</li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                </ul>
                <ul class="dateList"></ul>
            </div>


        </div>
    </form>

    <script>
        var tempData = {};
        $(function () {                
            $.getJSON('/Service/EasyUiService.ashx?Method=GetCategories', function (data) {
                var html = '';
                for (var i = 0, len = data.length; i < len; i++) {
                    html += '<li><label><input type="radio" name="category" value="' + data[i].jjtype + '" /><span>' + data[i].jjtype + '</span></label></li>';
                }
                $("#category").append(html);
            });
            loadData();

            $("#tool").on('change', 'input:radio', function () {
                loadDataTable(tempData);
                return;
                var flag = null;
                if ($("input[name=dateRank]:checked").val() == "2=2") {
                    //$("#BrainTextBox18").css("opacity", 1);
                    //$("#BrainTextBox19").css("opacity", 1);
                    //console.log();
                    flag = $("#fsrqDate").dialog({
                        title: "请选择",
                        left: 720,
                        top: 67,
                        //closed: false,
                        //modal: true
                    });
                    //$("#fsrqDate").css("opacity", 1);
                }
                else {
                    if (flag != null) {
                        $("#fsrqDate").dialog('close');
                        //$("#fsrqDate").css("opacity", 0);
                    }

                }
            });           
        });


        function tanchu(obj) {          
            var dr = $('input[name=dateRank]:checked').val();
            top.tanchu("dialog", "基金详情", "/Web/FundAnalysis/ztjj_dialog.aspx?Method=List_ztjj_dialog&ztguid=" + ztguid + "&ct=" + ct + "&dr=" + dr + "&fr=" + fr + "&startDay=" + startDay + "&endDay=" + endDay, 850, 530, null);
        }

        function loadData(startDay, endDay) {
            var dr = $('input[name=dateRank]:checked').val();
            
            $.ajax({
                type: "POST",
                url: "/Service/Main.ashx?Method=listETCrecord",
                dataType: "json",        
                data: { dr: dr },
                beforeSend: function () {
                    top.$.messager.progress({
                        title: '提示',
                        msg: '数据计算中，请稍候……',
                        text: ''
                    });
                },
                complete: function () {
                    top.$.messager.progress('close');
                },
                success: function (data) {
                    tempData = data;
                    loadDataTable(data);
                    //--------------------给每一个li加上点击事件弹窗，拼接在上面太麻烦
                    //$("#items li").each(function () {
                    //    top.tanchu("dialog", "基金详情", "/Web/FundAnalysis/jb_jccg_dialog.aspx?Method=List_jb_jccg_dialog&gpdm=" + row.cydgp + "&fsrq=" + txt + "", 850, 580, null);
                    //});
                },
                error: function (data) {
                    alert("计算失败！");
                }
            });
        }

        function loadDataTable(data) {
            var dr = $('input[name=dateRank]:checked').val();
            $("#list-calendar").empty();
            //console.log(data);
            //return;
            var html = '';
            var tm = '';
            var ex = '';
            for (var i = 0, len = data.TableNames.length; i < len; i++) {
                var tm = data.TableNames[i].TableName
                ex = tm.substr(0, tm.indexOf("_"));
                if (dr == "") {
                    ex = dr;
                }
                //console.log(ex);
                if (ex == dr) {
                    html += '<div class="calendar">';
                    html += ' <h4>' + data.TableNames[i].TableName + '</h4>';
                    html += '<h4>2013年10月</h4>';
                    html += '<a href="##" class="a1">上月</a>';
                    html += '<a href="##" class="a11">上年</a>';
                    html += '<a href="##" class="a22">下年</a>';
                    html += '<a href="##" class="a2">下月</a>';
                    html += '<ul class="week">';
                    html += '<li>日</li>';
                    html += '<li>一</li>';
                    html += '<li>二</li>';
                    html += '<li>三</li>';
                    html += '<li>四</li>';
                    html += '<li>五</li>';
                    html += '<li>六</li>';
                    html += '</ul>';
                    html += '<ul class="dateList" tablename="' + data.TableNames[i].TableName + '"></ul>';
                    html += '</div>';
                }

            }
            $("#list-calendar").append(html);
            //不是执行一个，而是获取所有进行执行，
            $('.dateList').each(function (i, elm) {
                run(0, $(this), data.Historys);
            });
            var iNow = 0;
            $(".a1").click(function () {
                var parent = $(this).parent('.calendar');
                iNow--;
                run(iNow, parent.find(".dateList"), data.Historys);
            });

            $(".a2").click(function () {
                var parent = $(this).parent('.calendar');
                iNow++;
                run(iNow, parent.find(".dateList"), data.Historys);
            })
            $(".a11").click(function () {
                var parent = $(this).parent('.calendar');
                iNow -= 12;
                run(iNow, parent.find(".dateList"), data.Historys);
            });

            $(".a22").click(function () {
                var parent = $(this).parent('.calendar');
                iNow += 12;
                run(iNow, parent.find(".dateList"), data.Historys);
            })
           
        }

        //必要的数据
        //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？
        function run(n, datelist,data) {
            var oDate = new Date(); //定义时间
            oDate.setMonth(oDate.getMonth() + n);//设置月份
            var year = oDate.getFullYear(); //年
            var month = oDate.getMonth(); //月
            var today = oDate.getDate(); //日               
            //计算本月有多少天           
            var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
            //判断闰年
            if (month == 1) {
                if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                    allDay = 29;
                }
            }
            //判断本月第一天是星期几
            oDate.setDate(1); //时间调整到本月第一天
            var week = oDate.getDay(); //读取本月第一天是星期几
            datelist.empty();//每次清空
            //插入空白                                                   
            for (var i = 0; i < week; i++) {
                datelist.append("<li></li>");
            }
            //日期插入到dateList
            var res = null;
            var tablename = datelist.attr('tablename');
            //console.log(tablename);
            //这里月份从0开始！！！！！！！！！！！！！！！！！！！
            var month_ = (month+1<10 ? '0' + (month+1) : month+1);          
            //today = (today.length == 1 ? '0' + today : today);
            for (var i = 1; i <= allDay; i++) {                
                for (var j = 0; j < data.length; j++) {                  
                    if (data[j].UpdateDate.substr(0, 10) == year + "-" + month_ + "-" + (i<10 ? '0' + i : i) && data[j].TableName == tablename) {
                        res = data[j];
                        break;
                    }
                }
                //console.log(res);
                if (res != null) {
                    //导入时间：2019-05-12 18:12:22，数据200条
                    datelist.append("<li class='blue' value='" + (i < 10 ? '0' + i : i) + "' title='导入时间：" + res.AddTime.substr(0,19).replace('T',' ') + "，数据" + res.counts + "条' >" + (i < 10 ? '0' + i : i) + "&radic;</li>");
                }
                else {
                    datelist.append("<li value='" + (i < 10 ? '0' + i : i) + "'>" + (i < 10 ? '0' + i : i) + "</li>");
                }
                res = null;
            }
            //标记颜色=====================
            datelist.find("li").each(function (i, elm) {
                var val = $(this).attr("value");
                if (n == 0) {
                    if (val < today) {
                        //$(this).addClass('ccc')
                        if (i % 7 == 0 || i % 7 == 6) {
                            $(this).addClass('sun')
                        }
                    } else if (val == today) {
                        $(this).addClass('red')
                    } else if (i % 7 == 0 || i % 7 == 6) {
                        $(this).addClass('sun')
                    }
                } else if (n < 0) {
                    //$(this).addClass('ccc')
                    if (i % 7 == 0 || i % 7 == 6) {
                        $(this).addClass('sun')
                    }
                } else if (i % 7 == 0 || i % 7 == 6) {
                    $(this).addClass('sun')
                }

            });

            //定义标题日期                                    
            datelist.siblings('h4').eq(1).text(year + "年" + (month + 1) + "月");
            //为避免各个日历控件，发生干扰，传入当前this
            $(".dateList li").click(function () {
                $(this).siblings().removeClass("red");
                $(this).addClass('red');
            })
        };

    </script>
</body>
</html>

漫游者码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个手写日历控件，多日历展示日期相关信息，整理总结

有图有真相几个月前写的，参考某位博主写的样式，现在不记得那位博主，隔了一段时间后再看，又花了个把小时，才明白它的原理，如下：显示通用的上年，上月，下年，下月四个按钮，--h4,a等标签当然还有星期等情况也是固定不变的--一个ul li标签同时点击这四个按钮，下面的天，跟着变化--一个ul li标签难点是关于闰年，以及每个月天数不一致，处理：var oDate = n...
复制链接

扫一扫

专栏目录