先上图：

  

说明：这是基于移动端的，对于PC端浏览器支持不是很好（我测的结果是IE无效），另外这个swiper是4.x版本的

思路：

先引用css

  1. <link href="css/bootstrap.min.css" rel="stylesheet" />
  2. <!--这是字体图标文件-->
  3. <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  4. <link href="css/swiper.min.css" rel="stylesheet" />

css样式：

  1.  <style type="text/css">
  2.      .container { width: 100%; }
  3.      /*头部*/
  4.      .top-date { position: fixed; top: 0; left: 0; font-size: 50px; width: 100%; height: 180px; line-height: 180px; background-color: #959a9e; color: white; z-index: 1; }
  5.          .top-date > .date-text { margin: 0 auto; display: block; width: 320px; }
  6.          .top-date > .date-today { position: fixed; right: 50px; top: 25px; border-radius: 160px; background-color: #ea9b32; height: 130px; width: 130px; line-height: 130px; text-align: center; }
  7.  
  8.      /*头部弹出日期选择层*/
  9.      .date-select { display: none; }
  10.      /*遮罩层*/
  11.      .mask-layer { width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; }
  12.      .main { width: 800px; height: 500px; position: fixed; left: 50%; top: 50%; margin-left: -400px; margin-top: -350px; z-index: 15; background-color: white; border-radius: 15px; font-size: 60px; font-weight: normal; }
  13.          .main > h2 { margin: 0; padding: 35px 40px; font-size: 70px; font-weight: normal; color: red; }
  14.      .current-time { text-align: center; display: none; }
  15.  
  16.      i.split-line1 { height: 1px; width: 90%; display: block; background-color: #777474; left: 5%; position: absolute; }
  17.      i.split-line2 { height: 1px; width: 90%; display: block; background-color: #777474; left: 5%; /* top: 10%; */ position: absolute; margin-top: 100px; display: none; }
  18.      i.split-line3 { height: 1px; width: 90%; display: block; background-color: #777474; left: 5%; /* top: 10%; */ position: absolute; margin-top: 200px; }
  19.  
  20.      .swiper-box-li { width: 33%; text-align: center; position: absolute; overflow: hidden; max-height: 200px; color: blue; }
  21.          .swiper-box-li.year { left: 3%; }
  22.          .swiper-box-li.month { left: 37%; }
  23.          .swiper-box-li.date { left: 66%; }
  24.      .date-select .swiper-container { font-size: 100px; }
  25.      .date-select .swiper-slide { height: 100px; line-height: 200px; }
  26.      /*取消|今天|确定*/
  27.      .tc-bot { position: absolute; bottom: 0; left: 0; width: 100%; }
  28.          .tc-bot > div { float: left; width: 33%; text-align: center; /* padding: 10px 0; */ border-right: 1px solid #9e9a9a; font-weight: normal; margin-bottom: 20px; }
  29.      .tc-bot-left { /*margin-left: 1%;*/ }
  30.      div.tc-bot-right { border-right: none; }
  31.      /*日历部分*/
  32.      .calendar { position: absolute; top: 180px; left: 0; width: 100%; font-size: 60px; }
  33.          .calendar .swiper-container { z-index: 0; }
  34.      /*星期*/
  35.      .week > ul { width: 100%; padding: 0; display: flex; height: 100px; list-style: none; margin: 0; }
  36.          .week > ul > li { display: flex; -webkit-flex: auto; justify-content: center; align-items: center; font-size: 50px; width: 140px; height: 140px; margin: 0 auto; text-align: center; }
  37.              .week > ul > li > a { color: black; }
  38.      /*日期*/
  39.      .days table { font-size: 50px; border-collapse: separate; border-spacing: 0 20px; color: #eca647; }
  40.          .days table > tbody > tr > td { width: 140px; height: 140px; position: relative; background-color: transparent; border-radius: 65px; }
  41.              .days table > tbody > tr > td > span { display: block; text-align: center; }
  42.                  .days table > tbody > tr > td > span.number { font-size: 55px; font-weight: 500; }
  43.                  .days table > tbody > tr > td > span.solar { font-size: 40px; }
  44.              /*选中的日期*/
  45.              .days table > tbody > tr > td.select-day { background-color: #30d8b1; color: white; }
  46.              .days table > tbody > tr > td.before-class:before { content: ''; height: 15px; width: 15px; position: absolute; background: #001fff; left: 62.5px; bottom: -10px; border-radius: 15px; }
  47.              .days table > tbody > tr > td.before-show:before { display: block; }
  48.              .days table > tbody > tr > td.before-hide:before { display: none; }
  49.              /*节日样式*/
  50.              .days table > tbody > tr > td.fesrival { color: red; }
  51.      /*农历*/
  52.      .Lunar-date { height: 100px; line-height: 100px; background-color: #c5c1c5; font-size: 50px; font-weight: normal; padding-left: 30px; color: white; }
  53.  
  54.      /*日程表*/
  55.      section.time-line { background-color: #c5c1c5; margin-top: 10px; color: white; }
  56.      .time-line > ul { list-style: none; padding-left: 150px; margin-bottom: 200px; max-height: 875px; overflow-y: scroll; }
  57.          .time-line > ul > li { height: 175px; border-bottom: 1px solid white; position: relative; }
  58.              .time-line > ul > li:before { content: ''; width: 25px; height: 25px; position: absolute; background-color: #989898; left: -80px; top: 80px; border-radius: 12.5px; }
  59.              .time-line > ul > li > div { display: block; height: 87.5px; }
  60.                  .time-line > ul > li > div:first-child > span { vertical-align: -webkit-baseline-middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; width: 100%; }
  61.                  .time-line > ul > li > div:last-child > span { font-size: 40px; }
  62.      /*底部*/
  63.      .bottom-menu { position: fixed; bottom: 0; left: 0; width: 100%; height: 180px; background-color: #8c8282; border-top: 1px solid #828482; }
  64.          .bottom-menu > ul { list-style: none; font-size: 50px; color: white; padding: 0; }
  65.              .bottom-menu > ul > li { float: left; display: block; text-align: center; line-height: 80px; }
  66.                  .bottom-menu > ul > li:first-child { width: 274px; }
  67.                  .bottom-menu > ul > li:not(:first-child) { width: 176px; }
  68.                  .bottom-menu > ul > li > i.fa { display: block; font-size: 80px; margin-top: 20px; }
  69.      .active { background-color: #44bf65; }
  70.  
  71.      /*3d滑动左右两边的突出样式调整*/
  72.      .swiper-container-3d .swiper-slide-shadow-right { background-image: none; }
  73.  </style>

css代码

body里面添加代码

  1.  <div class="container">
  2.      <!--头部-2018年01月↓ “今天”按钮-->
  3.      <div class="top-date">
  4.          <div class="date-text">
  5.              <span>2014年04月</span>
  6.              <i class="fa fa-angle-down"></i>
  7.          </div>
  8.          <span class="date-today">今天</span>
  9.      </div>
  10.      <!--日历-->
  11.      <div class="calendar">
  12.          <!--星期-->
  13.          <section class="week">
  14.              <ul>
  15.                  <li><a href="#">日</a></li>
  16.                  <li><a href="#">一</a></li>
  17.                  <li><a href="#">二</a></li>
  18.                  <li><a href="#">三</a></li>
  19.                  <li><a href="#">四</a></li>
  20.                  <li><a href="#">五</a></li>
  21.                  <li><a href="#">六</a></li>
  22.              </ul>
  23.          </section>
  24.          <!--具体月份对应天数-->
  25.          <section class="days">
  26.              <div class="swiper-container">
  27.                  <div class="swiper-wrapper">
  28.                      <div class="swiper-slide">
  29.                          <table data-date="2018-01"></table>
  30.                      </div>
  31.                      <div class="swiper-slide">
  32.                          <table data-date="2018-02"></table>
  33.                      </div>
  34.                      <div class="swiper-slide">
  35.                          <table data-date="2018-03"></table>
  36.                      </div>
  37.                  </div>
  38.              </div>
  39.          </section>
  40.          <!--农历-->
  41.          <section>
  42.              <div class="Lunar-date">农历 七月初八</div>
  43.          </section>
  44.          <!--日程-->
  45.          <section class="time-line">
  46.              <ul>
  47.                  <li>
  48.                      <div><span class="title">第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条第1条</span></div>
  49.                      <div><span>12:00</span></div>
  50.                  </li>
  51.                  <li>
  52.                      <div><span class="title">第2条</span></div>
  53.                      <div><span>12:00</span></div>
  54.                  </li>
  55.                  <li>
  56.                      <div><span class="title">第3条</span></div>
  57.                      <div><span>12:00</span></div>
  58.                  </li>
  59.                  <li>
  60.                      <div><span class="title">第4条</span></div>
  61.                      <div><span>12:00</span></div>
  62.                  </li>
  63.                  <li>
  64.                      <div><span class="title">第5条</span></div>
  65.                      <div><span>12:00</span></div>
  66.                  </li>
  67.                  <li>
  68.                      <div><span class="title">第6条</span></div>
  69.                      <div><span>12:00</span></div>
  70.                  </li>
  71.              </ul>
  72.          </section>
  73.      </div>
  74.      <div class="bottom-menu">
  75.          <ul>
  76.              <li>
  77.                  <i class="fa fa-plus"></i>
  78.                  <span>新建活动</span>
  79.              </li>
  80.              <li class="active">
  81.                  <i class="fa fa-calendar"></i>
  82.                  <span>月</span>
  83.              </li>
  84.              <li>
  85.                  <i class="fa fa-calendar-check-o"></i>
  86.                  <span>周</span>
  87.              </li>
  88.              <li>
  89.                  <i class="fa fa-calendar-minus-o"></i>
  90.                  <span>日</span>
  91.              </li>
  92.              <li>
  93.                  <i class="fa fa-navicon"></i>
  94.                  <span>菜单</span>
  95.              </li>
  96.          </ul>
  97.      </div>
  98.  </div>
  99.  
  100.  <!--选择日期-->
  101.  <div class="date-select">
  102.      <!--遮罩层-->
  103.      <div class="mask-layer"></div>
  104.      <div class="main">
  105.          <h2>
  106.              选择日期
  107.          </h2>
  108.          <div class="current-time">
  109.              <i class="i-year">2018</i>年
  110.              <i class="i-month">01</i>月
  111.              <i class="i-date">01</i>日
  112.          </div>
  113.          <div class="swiper-box">
  114.              <i class="split-line1"></i>
  115.              <i class="split-line2"></i>
  116.              <i class="split-line3"></i>
  117.              <div class="swiper-box-li year">
  118.                  <div class="swiper-container year">
  119.                      <div class="swiper-wrapper">
  120.                      </div>
  121.                  </div>
  122.              </div>
  123.              <div class="swiper-box-li month">
  124.                  <div class="swiper-container month">
  125.                      <div class="swiper-wrapper">
  126.                          <div class="swiper-slide">01</div>
  127.                          <div class="swiper-slide">02</div>
  128.                          <div class="swiper-slide">03</div>
  129.                          <div class="swiper-slide">04</div>
  130.                          <div class="swiper-slide">05</div>
  131.                          <div class="swiper-slide">06</div>
  132.                          <div class="swiper-slide">07</div>
  133.                          <div class="swiper-slide">08</div>
  134.                          <div class="swiper-slide">09</div>
  135.                          <div class="swiper-slide">10</div>
  136.                          <div class="swiper-slide">11</div>
  137.                          <div class="swiper-slide">12</div>
  138.                      </div>
  139.                  </div>
  140.              </div>
  141.              <div class="swiper-box-li date">
  142.                  <div class="swiper-container date">
  143.                      <div class="swiper-wrapper">
  144.                          <div class="swiper-slide">01</div>
  145.                          <div class="swiper-slide">02</div>
  146.                          <div class="swiper-slide">03</div>
  147.                          <div class="swiper-slide">04</div>
  148.                          <div class="swiper-slide">05</div>
  149.                          <div class="swiper-slide">06</div>
  150.                          <div class="swiper-slide">07</div>
  151.                          <div class="swiper-slide">08</div>
  152.                          <div class="swiper-slide">09</div>
  153.                          <div class="swiper-slide">10</div>
  154.                          <div class="swiper-slide">11</div>
  155.                          <div class="swiper-slide">12</div>
  156.                          <div class="swiper-slide">13</div>
  157.                          <div class="swiper-slide">14</div>
  158.                          <div class="swiper-slide">15</div>
  159.                          <div class="swiper-slide">16</div>
  160.                          <div class="swiper-slide">17</div>
  161.                          <div class="swiper-slide">18</div>
  162.                          <div class="swiper-slide">19</div>
  163.                          <div class="swiper-slide">20</div>
  164.                          <div class="swiper-slide">21</div>
  165.                          <div class="swiper-slide">22</div>
  166.                          <div class="swiper-slide">23</div>
  167.                          <div class="swiper-slide">24</div>
  168.                          <div class="swiper-slide">25</div>
  169.                          <div class="swiper-slide">26</div>
  170.                          <div class="swiper-slide">27</div>
  171.                          <div class="swiper-slide">28</div>
  172.                      </div>
  173.                  </div>
  174.              </div>
  175.              <div class="tc-bot">
  176.                  <div class="tc-bot-left">取消</div>
  177.                  <div class="tc-bot-center">今天</div>
  178.                  <div class="tc-bot-right">确定</div>
  179.                  <i></i>
  180.              </div>
  181.          </div>
  182.      </div>
  183.  </div>

body内部代码

引用js

  1. <script src="js/jquery-1.9.1.min.js"></script>
  2. <script src="js/bootstrap.min.js"></script>
  3. <script src="js/swiper.min.js"></script>
  4. <script src="js/Lunar.js"></script>

写入js脚本

  1.  <!--时间选择弹出框-->
  2.  <script type="text/javascript">
  3.  
  4.      //年
  5.      var yearSwiper = new Swiper('.swiper-container.year', {
  6.          direction: 'vertical',
  7.          height: 200,
  8.      });
  9.      //月
  10.      var monthSwiper = new Swiper('.swiper-container.month', {
  11.          direction: 'vertical',
  12.          height: 200,
  13.          //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
  14.          //默认false，不开启，可以使用update()方法更新。
  15.          observer: true,
  16.          on: {
  17.              slideChange: function () {//activeIndex从0开始
  18.                  OnMonthChange();
  19.              },
  20.          },
  21.      });
  22.      //日
  23.      var dateSwiper = new Swiper('.swiper-container.date', {
  24.          direction: 'vertical',
  25.          height: 200,
  26.      });
  27.  
  28.      //获取某年某月的天数
  29.      function GetDays(year, month) {
  30.          var days;
  31.  
  32.          if (month == 2) {
  33.              days = year % 4 == 0 ? 29 : 28;
  34.          } else {
  35.              if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
  36.                  days = 31;
  37.              } else {
  38.                  days = 30;
  39.              }
  40.          }
  41.  
  42.          return days;
  43.      }
  44.  
  45.      //滑动月份 对应的天数发生改变
  46.      function OnMonthChange() {
  47.          //当前选中的年份
  48.          var $yearSelect = $(yearSwiper.slides[yearSwiper.activeIndex]),
  49.              yearSelect = Number($yearSelect.text().trim());
  50.  
  51.          //当前选中的月份
  52.          var $monthSelect = $(monthSwiper.slides[monthSwiper.activeIndex]),
  53.              monthSelect = Number($monthSelect.text().trim());
  54.  
  55.          //选中的年份 选中的月份下的天数
  56.          var days = GetDays(yearSelect, monthSelect),
  57.              daySlides = dateSwiper.slides.length;
  58.  
  59.          if (days > daySlides) {//增加天数
  60.              for (var i = 1; i <= days - daySlides; i++) {
  61.                  dateSwiper.appendSlide("<div class=\"swiper-slide\">" + (daySlides + i) + "</div>");
  62.              }
  63.          } else if (days < daySlides) {//减少天数
  64.              var arr = [];
  65.              for (var i = 0; i < daySlides - days; i++) {
  66.                  //console.log(days + i);
  67.                  arr.push(days + i);
  68.              }
  69.              dateSwiper.removeSlide(arr);
  70.          }
  71.          dateSwiper.updateSlides();
  72.          daySlides = dateSwiper.slides.length;
  73.          //console.log("yearSelect=" + yearSelect + ";monthSelect=" + monthSelect + ";days=" + days + ";daySlides=" + daySlides + ";")
  74.      }
  75.  
  76.      //滚动到指定日期
  77.      function SlideToday(date) {
  78.          var nowDate = new Date(date),
  79.              year = nowDate.getFullYear(),
  80.              month = nowDate.getMonth() + 1,
  81.              day = nowDate.getDate();
  82.  
  83.          //当前农历年份最多到2100年 最小1900年
  84.          if (year > 2100) {
  85.  
  86.          }
  87.          //年份选择 从当前年份开始前后50年 共100年
  88.          yearSwiper.removeAllSlides();
  89.          for (var i = -5; i <= 5; i++) {
  90.              if (year + i <= 2100 && year + i >= 1900) {
  91.                  yearSwiper.appendSlide("<div class=\"swiper-slide\">" + (year + i) + "</div>");
  92.              }
  93.          }
  94.  
  95.          //选中当前月份
  96.          if (yearSwiper.slides && yearSwiper.slides.length >= 5) {
  97.              yearSwiper.slideTo(5, 0, false);
  98.          }
  99.          yearSwiper.updateSlides();
  100.  
  101.          //选中当前月份
  102.          monthSwiper.slideTo(month - 1, 0, false);
  103.  
  104.          //修改对应天数 并滑动到当天
  105.          OnMonthChange();
  106.          dateSwiper.slideTo(day - 1, 0, false);
  107.          //console.log("year=" + year + ";month=" + month + ";day=" + day)
  108.      }
  109.  
  110.      //隐藏选择时间框
  111.      function HideSelectDateForm() {
  112.          $(".date-select").hide();
  113.      }
  114.  
  115.      //获取选中的年
  116.      function GetSelectYear() {
  117.          //当前选中的年份
  118.          var $yearSelect = $(yearSwiper.slides[yearSwiper.activeIndex]),
  119.              yearSelect = $yearSelect.text().trim();
  120.  
  121.          return yearSelect;
  122.      }
  123.      //获取选中的月
  124.      function GetSelectMonth() {
  125.          //当前选中的月份
  126.          var $monthSelect = $(monthSwiper.slides[monthSwiper.activeIndex]),
  127.              monthSelect = $monthSelect.text().trim();
  128.  
  129.          return monthSelect;
  130.      }
  131.      //获取选中的日
  132.      function GetSelectDay() {
  133.          //当前选中的月份
  134.          var $dateSelect = $(dateSwiper.slides[dateSwiper.activeIndex]),
  135.              dateSelect = $dateSelect.text().trim();
  136.  
  137.          return dateSelect;
  138.      }
  139.  
  140.      //点击-取消
  141.      $(".tc-bot-left").click(function () {
  142.          HideSelectDateForm();
  143.      })
  144.      //点击-今天
  145.      $(".tc-bot-center").click(function () {
  146.          SlideToday(new Date());
  147.      })
  148.      //点击-确定
  149.      $(".tc-bot-right").click(function () {
  150.  
  151.          UpdateTitleDate(Number(GetSelectYear()), Number(GetSelectMonth()));
  152.          HideSelectDateForm();
  153.          var date = GetSelectYear() + "-" + GetSelectMonth() + "-" + GetSelectDay();
  154.  
  155.          OnDateChange(date);
  156.          SetSelectDay(date);
  157.          //console.log("yearSelect=" + yearSelect + ";monthSelect=" + monthSelect + ";dateSelect=" + dateSelect);
  158.      })
  159.  
  160.  </script>

时间选择弹出框

  1.  <!--头部时间-今天按钮-->
  2.  <script type="text/javascript">
  3.      $(function () {
  4.          $(".date-today").click();
  5.      })
  6.      //点击头部-弹出选择日期框
  7.      $(".date-text").click(function () {
  8.          $(".date-select").show();
  9.          SlideToday(currSelectDate.date());
  10.      })
  11.      //点击头部-今天
  12.      $(".date-today").click(function () {
  13.          var nowDate = new Date(),
  14.              year = nowDate.getFullYear(),
  15.              month = nowDate.getMonth() + 1,
  16.              day = nowDate.getDate();
  17.  
  18.          UpdateTitleDate(year, month);
  19.          OnDateChange(nowDate);
  20.          SetSelectDay(nowDate);
  21.      })
  22.      //点击底部 切换菜单样式
  23.      $(".bottom-menu>ul>li").click(function () {
  24.          $(".bottom-menu>ul>li").removeClass("active");
  25.          $(this).addClass("active");
  26.      });
  27.  
  28.      //不足10的数字前面补0 num是number类型
  29.      function MonthDayFormat(num) {
  30.          return num > 9 ? num : "0" + num;
  31.      }
  32.      //修改头部年和月 year, month是number类型
  33.      function UpdateTitleDate(year, month) {
  34.          var result = year + "年" + MonthDayFormat(month) + "月";
  35.          $(".date-text>span").html(result);
  36.      }
  37.  </script>

头部时间-今天按钮

  1.  <!--滑动日历-->
  2.  <script type="text/javascript">
  3.      $(function () {
  4.          //初始化日期为当前日期
  5.          var $table1 = $(".calendar>.days>.swiper-container>.swiper-wrapper>.swiper-slide:eq(0)>table"),
  6.              $table2 = $(".calendar>.days>.swiper-container>.swiper-wrapper>.swiper-slide:eq(1)>table"),
  7.              $table3 = $(".calendar>.days>.swiper-container>.swiper-wrapper>.swiper-slide:eq(2)>table");
  8.  
  9.          var now_Date = new Date(),
  10.              tempdate = now_Date.getFullYear() + "-" + (now_Date.getMonth() + 1) + "-" + now_Date.getDate(),
  11.              pre_date = PreMonth(now_Date),
  12.              next_date = NextMonth(now_Date);
  13.          $table1.attr("data-date", pre_date);
  14.          UpdateSlide(pre_date, 0);
  15.          $table2.attr("data-date", tempdate);
  16.          UpdateSlide(tempdate, 1);
  17.          $table3.attr("data-date", next_date);
  18.          UpdateSlide(next_date, 2);
  19.          //console.log("pre_date="+pre_date+";now_date="+tempdate+";next_date="+next_date);
  20.          currMonthSwiper.init();//现在才初始化
  21.      })
  22.      //当前被选中的日期 返回字符串
  23.      var currSelectDate = {
  24.          year: function () {
  25.              var $year_month = $(".top-date>.date-text>span");
  26.              return $year_month.text().substr(0, 4);
  27.          },
  28.          month: function () {
  29.              var $year_month = $(".top-date>.date-text>span");
  30.              return $year_month.text().substr(5, 2);
  31.          },
  32.          day: function () {
  33.              var $day = $(".select-day>.number");
  34.              return $day.text();
  35.          },
  36.          date: function () {
  37.              return new Date(this.year() + "-" + this.month() + "-" + this.day());
  38.          }
  39.      }
  40.  
  41.      //选中某一天
  42.      $(".calendar>.days>.swiper-container>.swiper-wrapper>.swiper-slide>table").on("click", "td", function () {
  43.          //console.log(1);
  44.          //空白td应该排除掉
  45.          if ($(this).children("span.number").text().trim().length > 0) {
  46.              $(".calendar>.days td").removeClass("select-day");
  47.              $(this).addClass("select-day");
  48.  
  49.              //农历
  50.              var lunarjson = calendar.solar2lunar(currSelectDate.year(), currSelectDate.month(), currSelectDate.day());
  51.              var fesrival = "";//农历节日
  52.              if (currSelectDate.month() == "04") {
  53.                  //判断是否为清明节
  54.                  //fesrival = IsQingMing(currSelectDate.date()) ? " 清明节" : "";
  55.              } else {
  56.                  //其他农历节日
  57.                  fesrival = " " + LunarFesrival(lunarjson.lMonth, lunarjson.lDay);
  58.              }
  59.              var result = "";
  60.              if (lunarjson.Term != undefined && lunarjson.Term != null) {
  61.                  result = "农历 " + lunarjson.IMonthCn + lunarjson.IDayCn + " " + lunarjson.Term + fesrival;
  62.              } else {
  63.                  result = "农历 " + lunarjson.IMonthCn + lunarjson.IDayCn + fesrival;
  64.              }
  65.              $(".calendar .Lunar-date").text(result);
  66.  
  67.              //所有有日程的td移除before-hide样式添加before-show样式
  68.              $(this).parents("table").find("td.before-class").removeClass("before-hide").addClass("before-show");
  69.              //移除当前点击的td表示日程的圆点(如果存在日程的话)
  70.              $(this).removeClass("before-show").addClass("before-hide");
  71.          }
  72.      })
  73.      //农历节日 农历月份 农历日期 对应农历日期没有节日返回""(空字符串)
  74.      function LunarFesrival(month, day) {
  75.          var fes = {};
  76.          fes['1-1'] = "春节";
  77.          fes['1-15'] = "元宵节";
  78.          fes['2-2'] = "青龙节";
  79.          fes['5-5'] = "端午节";
  80.          fes['7-7'] = "乞巧节";//（中国情人节）七夕节
  81.          fes['7-15'] = "中元节";//鬼节
  82.          fes['8-15'] = "中秋节";
  83.          fes['9-9'] = "重阳节";
  84.          fes['12-8'] = "腊八节";
  85.          fes['12-23'] = "过小年";
  86.          fes['12-30'] = "除夕";
  87.  
  88.          var result = fes[month + '-' + day];
  89.          return result == undefined ? "" : result;
  90.      }
  91.      //阳历节日 阳历月份 阳历日期 对应阳历日期没有节日返回""(空字符串)
  92.      function SolarFesrival(month, day) {
  93.          var fes = {};
  94.          fes['1-1'] = "元旦";
  95.          fes['2-14'] = "情人节";
  96.          fes['3-8'] = "妇女节";
  97.          fes['3-12'] = "植树节";
  98.          fes['4-1'] = "愚人节";
  99.          fes['5-1'] = "劳动节";
  100.          fes['6-1'] = "儿童节";
  101.          fes['7-1'] = "建党节";
  102.          fes['8-1'] = "建军节";
  103.          fes['9-10'] = "教师节";
  104.          fes['10-1'] = "国庆节";
  105.          fes['12-24'] = "平安夜";
  106.          fes['12-25'] = "圣诞节";
  107.  
  108.          var result = fes[month + '-' + day];
  109.          return result == undefined ? "" : result;
  110.      }
  111.  
  112.      //清明节 参数year是阳历年份 如2018(当前只判断1900-2099年) 返回true||false
  113.      function IsQingMing(solarDate) {
  114.          //清明日期爲4月4日～6日之間。
  115.          //清明节日期的计算 [Y*D+C]-L
  116.          //公式解读：Y=年数后2位，D=0.2422，L=闰年数，21世纪C=4.81，20世纪=5.59
  117.          //2088年清明日期=[88×.0.2422+4.81]-[88/4]=26-22=4，4月4日是清明。
  118.          var date = new Date(solarDate);
  119.          //年份后两位
  120.          var year = date.getFullYear().toString().substr(2, 2),
  121.              //年份前两位 第几世纪 19是20世纪
  122.              century = date.getFullYear().toString().substr(0, 2),
  123.              month = date.getMonth() + 1,
  124.              day = date.getDate().toString();
  125.          var result = false;
  126.          if (month != 4) {
  127.              //不是清明节
  128.          } else {
  129.              var C = (century == "19" ? 5.59 : (century == "20" ? 4.81 : 0));
  130.              var QingMingDay = (Number(year) * 0.2422 + Number(C) - Number(year) * 1.0 / 4).toFixed(0);//要四舍五入
  131.              if (day == QingMingDay) {
  132.                  //是清明节
  133.                  result = true;
  134.              }
  135.          }
  136.  
  137.          return result;
  138.      }
  139.  
  140.      //设置某一天被选中
  141.      function SetSelectDay(date) {
  142.          $(".calendar>.days>.swiper-container>.swiper-wrapper>.swiper-slide:eq(" + currMonthSwiper.activeIndex + ")>table tr:eq(" + RowIndex(date) + ")>td:eq(" + ColumnIndex(date) + ")").click();
  143.      }
  144.  
  145.      //获取指定日期在第几行
  146.      function RowIndex(date) {
  147.          //根据当前年月确定日期
  148.          var nowDate = new Date(date),
  149.              year = nowDate.getFullYear(),//年
  150.              month = nowDate.getMonth() + 1,//月
  151.              day = nowDate.getDate(),//日
  152.              week = nowDate.getDay(),//0-6 星期天-一-二-三-四-五-六
  153.              days = GetDays(year, month);//当前年月天数
  154.  
  155.          //当前年月的第一天是星期几(第一行有几个空白)
  156.          var currMonthOfFirstDayWeek = (new Date(year + "-" + month + "-1")).getDay();
  157.          //第一行当月有几天
  158.          var rowFirstCurrMonthDays = 7 - currMonthOfFirstDayWeek,
  159.              //除第一行外有几行
  160.              rowsExceptFirst = ((days - rowFirstCurrMonthDays) % 7 == 0) ? parseInt((days - rowFirstCurrMonthDays) / 7) : parseInt((days - rowFirstCurrMonthDays) / 7 + 1);
  161.  
  162.          var rowIndex;
  163.          rowIndex = (day - rowFirstCurrMonthDays <= 0 ? 0 : day - rowFirstCurrMonthDays);
  164.          if (rowIndex > 0) {
  165.              for (var i = 1; i <= rowsExceptFirst; i++) {
  166.                  if (rowIndex - 7 <= 0) {
  167.                      rowIndex = i;
  168.                      break;
  169.                  }
  170.                  rowIndex -= 7;
  171.              }
  172.          }
  173.  
  174.          return rowIndex;
  175.      }
  176.      //获取指定日期在第几列
  177.      function ColumnIndex(date) {
  178.          return new Date(date).getDay();
  179.      }
  180.  
  181.      var now_ActiveIndex = 2;//,//当前所在下标
  182.      //当前滑动块
  183.      var currMonthSwiper = new Swiper('.calendar>.days>.swiper-container', {
  184.          init: false,//不立即初始化
  185.          initialSlide: 1,//显示第2个
  186.          loop: true,//循环
  187.          //speed: 400,//速度
  188.          //followFinger:false,//跟随手指。如设置为false，手指滑动时slide不会动，当你释放时slide才会切换。
  189.          effect: 'coverflow',//slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
  190.          autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
  191.          on: {
  192.              slideChange: function () {//当当前Slide切换时执行(activeIndex发生改变)
  193.                  var pre_date = $(this.slides[now_ActiveIndex]).find("table").attr("data-date");
  194.                  if (now_ActiveIndex > this.activeIndex) {
  195.                      if (now_ActiveIndex == 4 && this.activeIndex == 1) {
  196.                          $(this.slides[this.activeIndex]).find("table").attr("data-date", pre_date);
  197.                          UpdateSlide(pre_date, 4);
  198.                          UpdateSlide(pre_date, 1);
  199.                      } else {//上一个
  200.                          //月份减一
  201.                          var act_date = PreMonth(pre_date);
  202.                          $(this.slides[this.activeIndex]).find("table").attr("data-date", act_date);
  203.                          UpdateSlide(act_date, this.activeIndex);
  204.                          var date = new Date(act_date);
  205.                          UpdateTitleDate(date.getFullYear(), date.getMonth() + 1);
  206.                      }
  207.                  } else if (now_ActiveIndex < this.activeIndex) {
  208.                      if (now_ActiveIndex == 0 && this.activeIndex == 3) {
  209.                          $(this.slides[this.activeIndex]).find("table").attr("data-date", pre_date);
  210.                          UpdateSlide(pre_date, 0);
  211.                          UpdateSlide(pre_date, 3);
  212.                          currMonthSwiper.slideTo(3, 0, true);
  213.                      } else {//下一个
  214.                          //月份加一
  215.                          var act_date = NextMonth(pre_date);
  216.                          $(this.slides[this.activeIndex]).find("table").attr("data-date", act_date);
  217.                          UpdateSlide(act_date, this.activeIndex);
  218.                          var date = new Date(act_date);
  219.                          UpdateTitleDate(date.getFullYear(), date.getMonth() + 1);
  220.                      }
  221.                  }
  222.                  now_ActiveIndex = this.activeIndex;
  223.                  //console.log(now_ActiveIndex);
  224.  
  225.                  //假如手动左右滑动-滚动到了第1个或第5个，要用代码控制滚动到第4个和第2个，防止td点击事件失效
  226.                  if (now_ActiveIndex == 4) {
  227.                      currMonthSwiper.slideTo(1, 0, true);
  228.                  } else if (now_ActiveIndex == 0) {
  229.                      currMonthSwiper.slideTo(3, 0, true);
  230.                  }
  231.                  now_ActiveIndex = currMonthSwiper.activeIndex;
  232.                  currMonthSwiper.updateAutoHeight();
  233.                  currMonthSwiper.updateSlides();
  234.              },
  235.          },
  236.      })
  237.      //修改slide的内容
  238.      function UpdateSlide(date, index) {
  239.          //根据当前年月确定日期
  240.          var nowDate = new Date(date),
  241.              year = nowDate.getFullYear(),//年
  242.              month = nowDate.getMonth() + 1,//月
  243.              day = nowDate.getDate(),//日
  244.              week = nowDate.getDay(),//0-6 星期天-一-二-三-四-五-六
  245.              days = GetDays(year, month);//当前年月天数
  246.  
  247.          //currMonthSwiper.removeSlide(2);//移除最后一个Slide
  248.          //$(".calendar>.days table["+index+"]").empty();
  249.          var $currTable = $(".calendar>.days>.swiper-container>.swiper-wrapper>.swiper-slide:eq(" + index + ")>table");
  250.          $currTable.empty();
  251.          $currTable.append($("<tr></tr>"));
  252.          //当前年月的第一天是星期几(第一行有几个空白)
  253.          var currMonthOfFirstDayWeek = (new Date(year + "-" + month + "-1")).getDay();
  254.          //第一行空白
  255.          for (var i = 0; i < currMonthOfFirstDayWeek; i++) {
  256.              $currTable.find("tr:eq(0)").append("\
  257.                      <td>\
  258.                          <span class=\"number\"></span>\
  259.                          <span class=\"solar\"></span>\
  260.                      </td>\
  261.                  ");
  262.          }
  263.          //第一行当月有几天
  264.          var rowFirstCurrMonthDays = 7 - currMonthOfFirstDayWeek,
  265.              //除第一行外有几行
  266.              rowsExceptFirst = ((days - rowFirstCurrMonthDays) % 7 == 0) ? parseInt((days - rowFirstCurrMonthDays) / 7) : parseInt((days - rowFirstCurrMonthDays) / 7 + 1);
  267.          //第一行当月日期
  268.          for (var i = 1; i <= rowFirstCurrMonthDays; i++) {
  269.              $currTable.find("tr:eq(0)").append("\
  270.                      <td class=\"before-class before-show\">\
  271.                          <span class=\"number\">" + i + "\</span>\
  272.                          <span class=\"solar\">" + FesrivalDate(i) + "</span>\
  273.                      </td>\
  274.                  ");
  275.          }
  276.  
  277.          //当前日期显示为农历日还是农日节日（后面再加阳历节日） day:阳历日
  278.          function FesrivalDate(day) {
  279.              //默认显示农历日
  280.              var lunarDate = calendar.solar2lunar(year, month, day),//农历
  281.                  result = lunarDate.IDayCn,//农历日文字表示 如“初十”
  282.                  isqingming = IsQingMing(year + "-" + month + "-" + day),//是否为清明节
  283.                  lunarFesrival = LunarFesrival(lunarDate.lMonth, lunarDate.lDay),//农历节日 如：除夕
  284.                  solarFesrival = SolarFesrival(month, day);//阳历节日 如：元旦
  285.              if (isqingming) {
  286.                  result = "清明节";
  287.              } else if (lunarFesrival.length > 0) {
  288.                  //其他农历节日
  289.                  result = lunarFesrival;
  290.              } else if (solarFesrival.length > 0) {
  291.                  //不是农历节日 判断是否为阳历节日
  292.                  result = solarFesrival;
  293.              }
  294.  
  295.              return result;
  296.          }
  297.  
  298.          //第二行开始日期
  299.          var rowStartDay = rowFirstCurrMonthDays + 1;
  300.          //第2行到倒数第2行
  301.          for (var i = 1; i < rowsExceptFirst; i++) {
  302.              $currTable.append($("<tr></tr>"));
  303.              for (var j = 0; j < 7; j++) {//每行7天
  304.                  $currTable.find("tr:eq(" + (i) + ")").append("\
  305.                      <td class=\"before-class before-show\">\
  306.                          <span class=\"number\">" + (rowStartDay + j) + "\</span>\
  307.                          <span class=\"solar\">" + FesrivalDate(rowStartDay + j) + "</span>\
  308.                      </td>\
  309.                  ");
  310.              }
  311.              rowStartDay += 7;//每一行开始日期
  312.          }
  313.  
  314.          var rowLastStartDay = rowFirstCurrMonthDays + 7 * (rowsExceptFirst - 1) + 1,//最后一行开始日期
  315.              rowLastDays = days - rowFirstCurrMonthDays - 7 * (rowsExceptFirst - 1);//最后一行天数
  316.          $currTable.append($("<tr></tr>"));
  317.          //最后一行日期
  318.          for (var i = 0; i < rowLastDays; i++) {
  319.              $currTable.find("tr:eq(" + rowsExceptFirst + ")").append("\
  320.                      <td class=\"before-class before-show\">\
  321.                          <span class=\"number\">" + (rowLastStartDay + i) + "\</span>\
  322.                          <span class=\"solar\">" + FesrivalDate(rowLastStartDay + i) + "</span>\
  323.                      </td>\
  324.                  ");
  325.          }
  326.          //最后一行空白
  327.          for (var i = 0; i < 7 - rowLastDays; i++) {
  328.              $currTable.find("tr:eq(" + rowsExceptFirst + ")").append("\
  329.                      <td>\
  330.                          <span class=\"number\"></span>\
  331.                          <span class=\"solar\"></span>\
  332.                      </td>\
  333.                  ");
  334.          }
  335.  
  336.          //currMonthSwiper.updateSlides();
  337.      }
  338.      //上个月的日期
  339.      function PreMonth(date) {
  340.          var nowDate = new Date(date),
  341.              year = nowDate.getFullYear(),
  342.              month = nowDate.getMonth() + 1,
  343.              day = nowDate.getDate(),
  344.                  preYear = 0,
  345.                  preMonth = 0;
  346.  
  347.          if (month == 1) {
  348.              preYear = year - 1;
  349.              preMonth = 12;
  350.          } else {
  351.              preYear = year;
  352.              preMonth = month - 1;
  353.          }
  354.  
  355.          return preYear + "-" + preMonth + "-" + day;
  356.      }
  357.      //下个月的日期
  358.      function NextMonth(date) {
  359.          var nowDate = new Date(date),
  360.              year = nowDate.getFullYear(),
  361.              month = nowDate.getMonth() + 1,
  362.              day = nowDate.getDate(),
  363.                  preYear = 0,
  364.                  preMonth = 0;
  365.  
  366.          if (month == 12) {
  367.              preYear = year + 1;
  368.              preMonth = 1;
  369.          } else {
  370.              preYear = year;
  371.              preMonth = month + 1;
  372.          }
  373.  
  374.          return preYear + "-" + preMonth + "-" + day;
  375.      }
  376.  
  377.      //选择日期后，对应的slide变化
  378.      function OnDateChange(date) {
  379.          var nowdate = new Date(date);
  380.          //predate = PreMonth(nowdate),
  381.          //nextdate = NextMonth(nowdate);
  382.  
  383.          //选择日期更改后（点击今天或者弹出日期选择）更新当前显示的天数布局
  384.          UpdateSlide(nowdate, now_ActiveIndex);
  385.          var $table1 = $(".calendar>.days>.swiper-container>.swiper-wrapper>.swiper-slide:eq(" + now_ActiveIndex + ")>table");
  386.          $table1.attr("data-date", nowdate.getFullYear() + "-" + (nowdate.getMonth() + 1) + "-" + nowdate.getDate());
  387.          //currMonthSwiper.slideTo(2,0,true);
  388.          //选择日期更改后（点击今天或者弹出日期选择）更新当前显示的天数布局；假如滚动到了第1个或第5个，要用代码控制滚动到第4个和第2个，防止td点击事件失效
  389.          if (now_ActiveIndex == 4) {
  390.              currMonthSwiper.slideTo(1, 0, true);
  391.          } else if (now_ActiveIndex == 0) {
  392.              currMonthSwiper.slideTo(3, 0, true);
  393.          }
  394.          now_ActiveIndex = currMonthSwiper.activeIndex;
  395.          currMonthSwiper.updateAutoHeight();
  396.          currMonthSwiper.updateSlides();
  397.      }
  398.  </script>

滑动日历

至于时间轴添加日记后面再加上

swiper移动端日历-1的更多相关文章

  1. 移动端日历选择控件（支持Zepto和JQuery）

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  2. 推荐一款移动端日历App吉日历

    推荐一款移动端日历App吉日历 一 应用描述 万年历.日历.农历.黄历.假期安排.天气预报.记事提醒便捷查看,一目了然! 二 功能介绍: 1.万年历:精美的日期展示,完整的节日日历随意查看,节假日.休 ...

  3. 16.vue-cli跨域,swiper,移动端项目

    ==解决跨域:== 1.后台 cors cnpm i -S cors 2.前端 jsonp 3.代理 webpack: myvue\config\index.js 找 proxyTable proxy ...

  4. 移动端日历控件 mobiscroll 的简单使用、参数设置

    mobiscroll 在性能方面比较好,可选用多种效果,滑动效果也比较顺畅.   提供样式文件和js文件,直接点击下载,该版本是 mobiscroll 2.13的 官方地址 :https://docs ...

  5. Swiper --移动端触摸滑动插件

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  6. swiper移动端下不能正常轮播的解决方案-----此坑没躺过估计很难找到正确姿势

    <script> var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', //horizontal横 ...

  7. swiper移动端全屏播放动态获取数据

    html:  <link rel="stylesheet" href="css/swiper.min.css">   <div class=& ...

  8. Swiper 移动端全屏轮播图效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

随机推荐

  1. 使用hexo+coding搭建免费个人博客

    1.检测node和npm 先检测一下有没有node.js和npm $ node -v //如果有,说明node.js安装成功! $ node -v v8.4.0 //如果有,说明npm安装成功! $n ...

  2. POJ – 1200 Crazy Search

    http://poj.org/problem?id=1200 #include<iostream> #include<cstring> using namespace std; ...

  3. 思维题--code forces round# 551 div.2

    思维题--code forces round# 551 div.2 题目 D. Serval and Rooted Tree time limit per test 2 seconds memory ...

  4. win2003设置单用户登录

    远程桌面是windows操作系统中一个很方便的功能,管理测试机资产.异地排除故障等,都很快捷.在windows xp sp2模式下,一般默认是单用户登录,也就是当A用户远程一台机器时,B用户在远程到这 ...

  5. Mac 10.12安装XMind

    下载: (链接: https://pan.baidu.com/s/1i4FmspJ 密码: ydc2)

  6. java翻译到mono C#实现系列(3) 获取手机设备信息(残缺,)

    using System; using Android.App; using Android.Content; using Android.Runtime; using Android.Views; ...

  7. Cloudera Manager安装之利用parcels方式安装单节点集群（包含最新稳定版本或指定版本的安装）（添加服务）（CentOS6.5）（四）

    不多说,直接上干货! 福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑          ...

  8. Linux 进程以及多线程的支持

    1.最初内核并没有实现对多线程的支持,2.6之后开始以轻量级进程的方式对多线程进行支持(轻量级线程组). a.在2.6 之前,如果需要实现多线程,只能在用户态下实现,用户程序自己控制线程的切换, 实际 ...

  9. Installing Vim 8.0 on Ubuntu 16.04 and Linux Mint 18

    sudo add-apt-repository ppa:jonathonf/vim sudo apt update sudo apt install vim uninstall sudo apt re ...

  10. AngularJS 的常用特性（二）

    3.列表.表格以及其他迭代型元素 ng-repeat可能是最有用的 Angular 指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝. 比如一个学生名册系统需要从服务器上获取学生信息,目前先把 ...