技术 思绪 摘录 旅行
可控制展示多少月份,每日展示内容可以完全自定义,当前demo仅仅是个雏形和框架,可以订制自己二次开发,一般运用场景在酒店选购,旅游业务下单选择等场景。

少废话先看东西

demo.png

开源是程序员的基本美德

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="app.css" />
    <style>
* {
  padding: 0px;
  margin: 0px;
}
.calendarbox .months {
  overflow: hidden;
  width: 100%;
  bottom: 0px;
  background: #fff;
  background-size: 100% 40px;
}

.calendarbox .months .swiper-slide {
  width: 100px;
  padding: 5px 0px;
  color: #555;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  font-weight: 200;
  display: flex;
  flex-direction: column;
}

.calendarbox .months .swiper-slide.active {
  color: #0066ff;
  border-bottom: 2px solid #0066ff;
  box-sizing: border-box;
}

.calendarbox .weeks {
  display: flex;
  text-align: center;
  background: #f1f1f1;
  font-size: 13px;
  padding: 5px 0px;
}
.calendarbox .weeks > span {
  flex: 1;
}

.calendarbox .days {
  display: flex;
  flex-wrap: wrap;
}
.calendarbox .days .dayitem {
  width: 14.2857143vw;
  height: 14.2857143vw;
  box-sizing: border-box;
  border-right: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  text-align: center;
  font-size:0.8rem;
  font-weight: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calendarbox .days .dayitem:nth-child(7n) {
  border-right: none;
}

.calendarbox .days .dayitem[disabled] {
  background: #f2f2f2;
  color: #999;
  cursor: no-drop;
}

.calendarbox .days .dayitem.active,.calendarbox .days .dayitem.active small  {
  background: #0066ff;
  color: #fff;
}
    </style>
</head>

<body>
    <div class="calendarbox">
        <div class="months">
            <div class="swiper-wrapper ">
                <!-- <span data-dt="2018-10-01" onclick="SelMonth(this)" class="swiper-slide active "><small>10月份</small><small>¥1359.00</small></span>
                <span data-dt="2018-11-01" onclick="SelMonth(this)" class="swiper-slide"><small>11月份</small><small>¥1359.00</small></span>
                <span data-dt="2018-12-01" onclick="SelMonth(this)" class="swiper-slide"><small>12月份</small><small>¥1359.00</small></span>
                <span data-dt="2019-01-01" onclick="SelMonth(this)" class="swiper-slide"><small>01月份</small><small>¥1359.00</small></span>
                <span data-dt="2019-02-01" onclick="SelMonth(this)" class="swiper-slide"><small>02月份</small><small>¥1359.00</small></span>
                <span data-dt="2019-03-01" onclick="SelMonth(this)" class="swiper-slide"><small>03月份</small><small>¥1359.00</small></span>
                <span data-dt="2019-04-01" onclick="SelMonth(this)" class="swiper-slide"><small>04月份</small><small>¥1359.00</small></span>
                <span data-dt="2019-05-01" onclick="SelMonth(this)" class="swiper-slide"><small>05月份</small><small>¥1359.00</small></span> -->
            </div>
        </div>
        <div class="weeks">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div>
        <div class="days">
            <div class="days">
                <!-- <div class="dayitem"></div>
                <div class="dayitem" data-dt="2018-10-01" onclick="SelDay(this)"><small>1</small><small>余11</small></div>
                <div class="dayitem" data-dt="2018-10-02" onclick="SelDay(this)"><small>2</small><small>余12</small></div>
                <div class="dayitem" data-dt="2018-10-03" onclick="SelDay(this)"><small>3</small><small>余13</small></div>
                <div class="dayitem" data-dt="2018-10-04" onclick="SelDay(this)"><small>4</small><small>余14</small></div>
                <div class="dayitem" data-dt="2018-10-05" onclick="SelDay(this)"><small>5</small><small>余15</small></div>
                <div class="dayitem" data-dt="2018-10-06" onclick="SelDay(this)"><small>6</small><small>余16</small></div>
                <div class="dayitem" data-dt="2018-10-07" onclick="SelDay(this)"><small>7</small><small>余17</small></div>
                <div class="dayitem" data-dt="2018-10-08" onclick="SelDay(this)"><small>8</small><small>余18</small></div>
                <div class="dayitem" data-dt="2018-10-09" onclick="SelDay(this)"><small>9</small><small>余19</small></div>
                <div class="dayitem" data-dt="2018-10-10" onclick="SelDay(this)"><small>10</small><small>余20</small></div>
                <div class="dayitem" data-dt="2018-10-11" onclick="SelDay(this)"><small>11</small><small>余21</small></div>
                <div class="dayitem" data-dt="2018-10-12" onclick="SelDay(this)"><small>12</small><small>余22</small></div>
                <div class="dayitem" data-dt="2018-10-13" onclick="SelDay(this)"><small>13</small><small>余23</small></div>
                <div class="dayitem" data-dt="2018-10-14" onclick="SelDay(this)"><small>14</small><small>余24</small></div>
                <div class="dayitem" data-dt="2018-10-15" onclick="SelDay(this)"><small>15</small><small>余25</small></div>
                <div class="dayitem" data-dt="2018-10-16" onclick="SelDay(this)"><small>16</small><small>余26</small></div>
                <div class="dayitem" data-dt="2018-10-17" onclick="SelDay(this)"><small>17</small><small>余27</small></div>
                <div class="dayitem" data-dt="2018-10-18" onclick="SelDay(this)"><small>18</small><small>余28</small></div>
                <div class="dayitem" data-dt="2018-10-19" onclick="SelDay(this)"><small>19</small><small>余29</small></div>
                <div class="dayitem" data-dt="2018-10-20" onclick="SelDay(this)"><small>20</small><small>余30</small></div>
                <div class="dayitem" data-dt="2018-10-21" onclick="SelDay(this)"><small>21</small><small>余31</small></div>
                <div class="dayitem" data-dt="2018-10-22" onclick="SelDay(this)"><small>22</small><small>余32</small></div>
                <div class="dayitem" data-dt="2018-10-23" onclick="SelDay(this)"><small>23</small><small>余33</small></div>
                <div class="dayitem" data-dt="2018-10-24" onclick="SelDay(this)"><small>24</small><small>余34</small></div>
                <div class="dayitem" data-dt="2018-10-25" onclick="SelDay(this)"><small>25</small><small>余35</small></div>
                <div class="dayitem" data-dt="2018-10-26" onclick="SelDay(this)"><small>26</small><small>余36</small></div>
                <div class="dayitem" data-dt="2018-10-27" onclick="SelDay(this)"><small>27</small><small>余37</small></div>
                <div class="dayitem" data-dt="2018-10-28" onclick="SelDay(this)"><small>28</small><small>余38</small></div>
                <div class="dayitem" data-dt="2018-10-29" onclick="SelDay(this)"><small>29</small><small>余39</small></div>
                <div class="dayitem" data-dt="2018-10-30" onclick="SelDay(this)"><small>30</small><small>余40</small></div>
                <div class="dayitem" data-dt="2018-10-31" onclick="SelDay(this)"><small>31</small><small>余41</small></div>
                <div class="dayitem"></div>
                <div class="dayitem"></div>
                <div class="dayitem"></div> -->
            </div>
        </div>
    </div>
    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="swiper.js" type="text/javascript"></script>
    <script>


        //初始化月份
        var initmonths = function () {
            $(".calendarbox .months .swiper-wrapper").html();
            for (var i = 1; i <= 8; i++) {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth();
                var mt = month + i;
                if (mt > 12) {
                    mt = mt - 12;
                    year = year + 1;
                }
                if (mt < 10) {
                    mt = "0" + mt;
                }
                var dt = year + "-" + mt + "-01"
                var html = '';
                html += '<span data-dt="' + dt + '" onclick="SelMonth(this)" class="swiper-slide ' + (i == 1 ? 'active' : '') + '"><small>' + mt + '月份</small><small>¥1359.00</small></span>';
                $(".calendarbox .months .swiper-wrapper").append(html);
            }

            var mySwiper = new Swiper('.months', {
                slidesPerView: 'auto'
            });
        }
        //初始化日期
        var initdays = function () {
            var dt = $(".calendarbox .months .swiper-wrapper span.active").attr("data-dt");
            var date = new Date(dt);
            var year = date.getFullYear();
            var month = date.getMonth();
            var minday = new Date(year, month, 01);//取当年当月中的第一天   
            var maxday = (new Date(new Date(year, month + 1, 01).getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期   
            var minweek = minday.getDay();
            var maxweek = new Date(year, month, maxday).getDay();
            $(".calendarbox  .days").html("");
            for (var i = 0; i < minweek; i++) {
                var html = '<div></div>';
                $(".calendarbox  .days").append(html);
            }
            for (var i = 1; i <= maxday; i++) {
                var itemdt = year + "-" + ((month + 1) < 10 ? "0" + (month + 1) : (month + 1)) + "-" + (i < 10 ? "0" + i : i);
                var datenow = new Date();
                var oDate1 = new Date(datenow.getFullYear() + "-" + (datenow.getMonth() + 1) + "-" + datenow.getDate());
                var oDate2 = new Date(itemdt);
                var dis = "";
                if (oDate1.getTime() > oDate2.getTime()) {
                    dis = "disabled";
                }
                var html = '<div class="dayitem"  ' + dis + ' data-dt="' + itemdt + '" onclick="SelDay(this)"><small>' + i + '</small><small>余' + (i + 10) + '</small></div>';
                $(".calendarbox  .days").append(html);
            }
            for (var i = 0; i < (6 - maxweek); i++) {
                var html = '<div></div>';
                $(".calendarbox  .days").append(html);
            }
        }

        //选择月份
        var SelMonth = function (el) {
            $(el).siblings().removeClass("active");
            $(el).addClass("active");
            initdays();
        }
        //选择日期
        var SelDay = function (el) {
            var dis = $(el).attr("disabled");
            if (dis == undefined) {
                $(el).siblings().removeClass("active");
                $(el).addClass("active");
            }
        }
        $(function () {
            initmonths();
            initdays();
        });
    </script>
</body>

</html>

Demo.rar


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫