简单的适应pc和手机的日历插件

//页面布局


   <div class="calendar">
        <header>
            <span class="left" id="btn_prev">
                <i class="fa fa-angle-left"></i> 
            </span>
            <font></font>
            <span class="right" id="btn_next">
                <i class="fa fa-angle-right"></i>
            </span>
        </header>
        <div class="day">
            <ul class='clear'>
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
            </ul>
        </div>
        <div class="content">
            <ul class="clear">

            </ul>
        </div>
        <footer>
            <button type="" id="btn">确&nbsp;定</button>
        </footer>
   </div>

//页面css

    *{
        margin:0;
        padding: 0;
        list-style: none;
    }
    .clear::after,.clear::before{
        display: block;
        clear: both;
        content: '';
    }
    .calendar{
        height: 100vh;
        padding:0 20px;
        box-sizing: border-box;
        background: url(../images/2.png)no-repeat;
        background-size: cover;
    }
    .calendar header{
        line-height: 45px;
        text-align:center;
        padding-top: 20px
    }
    .day ul li,.content ul li{
        float: left;
        width:14.2%;
        text-align: center;
        line-height: 45px;
    }
    .day ul li{
        margin-bottom: 10px;
        line-height: 50px;
    }
    header span{
        font-size:25px;
        cursor: pointer;
        padding:0 5px;
        box-sizing: border-box;
    }
    header span.left{
        float:left;
    }
    header span.right{
        float:right;
    }
    .content ul li{
        margin:10px 0;
    }
    .content ul li span{
        display: inline-block;
        width:35px;
        line-height: 35px;
        border-radius: 50%;
        cursor: pointer;
    }
    .content ul li span.current{
        background: #ddd;
        color: #545454;
    }
    footer {
        text-align: right;
        margin-top:10px;
    }
    footer button{
        display: inline-block;
        line-height: 35px;
        padding:0 20px;
        background: none;
        outline: none;
        border:1px solid #ddd;
        font-size: 16px;
        border-radius: 5px;
        color: #999;
        cursor: pointer;
    }

//javascript

    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            var date = new Date();
            var year = date.getFullYear();
            var month = current = date.getMonth() + 1;
            var currentMonthDay = date.getDate();
            var currentDate = "";
            var currentLastDay = "";
            var str = "";
            var currentGetDate = "";
            ///循环输出当前月份的天数
            var currentMonthDays = function () {
                ///每次执行前先清空时间列表
                str = "";
                date.setFullYear(year);///获取当前年份
                date.setMonth(month);///获取当前月份
                var currentDay = date.getDate();
                var lastDay = date.setDate(0);///获取当前月的最后一天
                currentLastDay = date.getDate();
                var firstDay = date.setDate(1);
                currentFirstDay = date.getDay();
                if (currentFirstDay >= 0) {
                    for (var j = 0; j < currentFirstDay; j++) {
                        str += "<li></li>";
                    }
                    for (var i = 1; i <= currentLastDay; i++) {
                        if (month == current && currentMonthDay == i) {
                            str += "<li><span style='background:#fff;color:#94e4e2;' id=" + i + ">" + i + "</span></li>";
                        } else if (currentDay == i && month != current) {
                            str += "<li><span style='background:#f3f3f3;' id=" + i + ">" + i + "</span></li>";
                        } else {
                            str += "<li><span id=" + i + ">" + i + "</span></li>";
                        }
                    }
                }
                currentDate = year + "&nbsp;年&nbsp;" + month + "月";//将当前年月连接成字符串
                $("header font").html(currentDate);//输出当前年月
                $(".content ul").html(str);//输出当前月份的天数
            }
            currentMonthDays();
            ///左键头月份减减
            $("#btn_prev").click(function () {
                $("header font").html("");//每次点击先清空
                $(".content ul").html("");
                if (month > 1) {
                    month--;
                } else {
                    month = 12;
                    year--;
                }
                currentMonthDays();
                // console.log($(".content ul li span"));
            });
            ///右箭头月份加加
            $("#btn_next").click(function () {
                $("header font").html("");//每次点击先清空
                $(".content ul").html("");
                if (month < 12) {
                    month++;
                } else {
                    month = 1;
                    year++;
                }
                currentMonthDays();
            });
            ///点击之后输出选中的年月日
            $("body").on("click", ".content ul li span", function () {
                currentMonthDays();
                if (month < 10 && $(this).attr("id") < 10) {
                    currentGetDate = year + "-0" + month + "-0" + $(this).attr("id");
                } else if (month < 10 && $(this).attr("id") >= 10) {
                    currentGetDate = year + "-0" + month + "-" + $(this).attr("id");
                } else if (month >= 10 && $(this).attr("id") < 10) {
                    currentGetDate = year + "-" + month + "-0" + $(this).attr("id");
                } else {
                    currentGetDate = year + "-" + month + "-" + $(this).attr("id");
                }
                 console.log(currentGetDate);
                $(".content ul li span").removeClass('current').eq($(this).attr("id") - 1).addClass("current");
            });
            ///点击确定按钮可以获取当前选中的年月日信息
            $("#btn").click(function () {
                if ($(".content ul li span.current")) {
                    console.log(currentGetDate);
                };
            })
        })
    </script>