当前位置：Gxlcms > JavaScript > Vue.js创建Calendar日历效果

Vue.js创建Calendar日历效果

时间：2021-07-01 10:21:17 帮助过：79人阅读

使用 Vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 Android 里面的 DataBinding。
实现一个HTML的日历效果。

20161114114050736.jpg

201611141405424.gif

html 部分

  1. <p id="calendar">
  2.  <!-- 年份 月份 -->
  3.  <p class="month">
  4.  <ul>
  5.   <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
  6.   <li class="year-month" @click="pickYear(currentYear,currentMonth)">
  7.   <span class="choose-year">{{ currentYear }}</span>
  8.   <span class="choose-month">{{ currentMonth }}月</span>
  9.   </li>
  10.   <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
  11.  </ul>
  12.  </p>
  13.  <!-- 星期 -->
  14.  <ul class="weekdays">
  15.  <li>一</li>
  16.  <li>二</li>
  17.  <li>三</li>
  18.  <li>四</li>
  19.  <li>五</li>
  20.  <li style="color:red">六</li>
  21.  <li style="color:red">日</li>
  22.  </ul>
  23.  <!-- 日期 -->
  24.  <ul class="days">
  25.  <li @click="pick(day)" v-for="day in days">
  26.   <!--本月-->
  27.   <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
  28.   <span v-else>
  29.   <!--今天-->
  30. <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() 
  31. && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
  32.   <span v-else>{{ day.getDate() }}</span>
  33.   </span>
  34.  </li>
  35.  </ul>
  36. </p>

id 为 calendar 对应的创建一个 Vue 对象，设置 el 为 ‘#calendar'。

  1. <script type="text/javascript">
  2.  new Vue({
  3.  el: '#calendar',
  4.  data: {
  5.   currentDay: 1,
  6.   currentMonth: 1,
  7.   currentYear: 1970,
  8.   currentWeek: 1,
  9.   days: [],
  10.  },
  11.  created: function() {
  12.   this.initData(null);
  13.  },
  14.  methods: {
  15.   initData: function(cur) {
  16.   var date;
  17.   if (cur) {
  18.    date = new Date(cur);
  19.   } else {
  20.    date = new Date();
  21.   }
  22.   this.currentDay = date.getDate();
  23.   this.currentYear = date.getFullYear();
  24.   this.currentMonth = date.getMonth() + 1;
  25.   this.currentWeek = date.getDay(); // 1...6,0
  26.   if (this.currentWeek == 0) {
  27.    this.currentWeek = 7;
  28.   }
  29.   var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
  30.   console.log("today:" + str + "," + this.currentWeek);
  31.   this.days.length = 0;
  32.   // 今天是周日，放在第一行第7个位置，前面6个
  33.   for (var i = this.currentWeek - 1; i >= 0; i--) {
  34.    var d = new Date(str);
  35.    d.setDate(d.getDate() - i);
  36.    console.log("y:" + d.getDate());
  37.    this.days.push(d);
  38.   }
  39.   for (var i = 1; i <= 35 - this.currentWeek; i++) {
  40.    var d = new Date(str);
  41.    d.setDate(d.getDate() + i);
  42.    this.days.push(d);
  43.   }
  44.   },
  45.   pick: function(date) {
  46.   alert(this.formatDate( date.getFullYear() , date.getMonth() + 1, date.getDate()));
  47.   },
  48.   pickPre: function(year, month) {
  49.   // setDate(0); 上月最后一天
  50.   // setDate(-1); 上月倒数第二天
  51.   // setDate(dx) 参数dx为 上月最后一天的前后dx天
  52.   var d = new Date(this.formatDate(year , month , 1));
  53.   d.setDate(0);
  54.   this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
  55.   },
  56.   pickNext: function(year, month) {
  57.   var d = new Date(this.formatDate(year , month , 1));
  58.   d.setDate(35);
  59.   this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
  60.   },
  61.   pickYear: function(year, month) {
  62.   alert(year + "," + month);
  63.   },
  64.    
  65.   // 返回 类似 2016-01-02 格式的字符串
  66.   formatDate: function(year,month,day){
  67.   var y = year;
  68.   var m = month;
  69.   if(m<10) m = "0" + m;
  70.   var d = day;
  71.   if(d<10) d = "0" + d;
  72.   return y+"-"+m+"-"+d
  73.   },
  74.  },
  75.  });
  76. </script>

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>日历</title>
  6.  <style type="text/css">
  7.   * {
  8.   box-sizing: border-box;
  9.   }
  10.    
  11.   ul {
  12.   list-style-type: none;
  13.   }
  14.    
  15.   body {
  16.   font-family: Verdana, sans-serif;
  17.   background: #E8F0F3;
  18.   }
  19.   #calendar{
  20.   width:80%;
  21.   margin: 0 auto;
  22.   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 
  23.   rgba(0,0,0,0.12);
  24.   }
  25.   .month {
  26.   width: 100%;
  27.   background: #00B8EC;
  28.   }
  29.    
  30.   .month ul {
  31.   margin: 0;
  32.   padding: 0;
  33.   display: flex;
  34.   justify-content: space-between;
  35.   }
  36.    
  37.   .year-month {
  38.   display: flex;
  39.   flex-direction: column;
  40.   align-items: center;
  41.   justify-content: space-around;
  42.   }
  43.    
  44.   .year-month:hover {
  45.   background: rgba(150, 2, 12, 0.1);
  46.   }
  47.    
  48.   .choose-year {
  49.   padding-left: 20px;
  50.   padding-right: 20px;
  51.   }
  52.    
  53.   .choose-month {
  54.   text-align: center;
  55.   font-size: 1.5rem;
  56.   }
  57.    
  58.   .arrow {
  59.   padding: 30px;
  60.   }
  61.    
  62.   .arrow:hover {
  63.   background: rgba(100, 2, 12, 0.1);
  64.   }
  65.    
  66.   .month ul li {
  67.   color: white;
  68.   font-size: 20px;
  69.   text-transform: uppercase;
  70.   letter-spacing: 3px;
  71.   }
  72.    
  73.   .weekdays {
  74.   margin: 0;
  75.   padding: 10px 0;
  76.   background-color: #00B8EC;
  77.   display: flex;
  78.   flex-wrap: wrap;
  79.   color: #FFFFFF;
  80.   justify-content: space-around;
  81.   }
  82.    
  83.   .weekdays li {
  84.   display: inline-block;
  85.   width: 13.6%;
  86.   text-align: center;
  87.   }
  88.    
  89.   .days {
  90.   padding: 0;
  91.   background: #FFFFFF;
  92.   margin: 0;
  93.   display: flex;
  94.   flex-wrap: wrap;
  95.   justify-content: space-around;
  96.   }
  97.    
  98.   .days li {
  99.   list-style-type: none;
  100.   display: inline-block;
  101.   width: 14.2%;
  102.   text-align: center;
  103.   padding-bottom: 15px;
  104.   padding-top: 15px;
  105.   font-size: 1rem;
  106.   color: #000;
  107.   }
  108.    
  109.   .days li .active {
  110.   padding: 6px 10px;
  111.   border-radius: 50%;
  112.   background: #00B8EC;
  113.   color: #fff;
  114.   }
  115.    
  116.   .days li .other-month {
  117.   padding: 5px;
  118.   color: gainsboro;
  119.   }
  120.    
  121.   .days li:hover {
  122.   background: #e1e1e1;
  123.   }
  124.  </style>
  125.  </head>
  126.  <body>
  127.  <h1>CSS 日历</h1>
  128.  <p id="calendar">
  129.   <p class="month">
  130.   <ul>
  131.    <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
  132.    <li class="year-month" @click="pickYear(currentYear,currentMonth)">
  133.    <span class="choose-year">{{ currentYear }}</span>
  134.    <span class="choose-month">{{ currentMonth }}月</span>
  135.    </li>
  136.    <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
  137.   </ul>
  138.   </p>
  139.   <ul class="weekdays">
  140.   <li>一</li>
  141.   <li>二</li>
  142.   <li>三</li>
  143.   <li>四</li>
  144.   <li>五</li>
  145.   <li style="color:red">六</li>
  146.   <li style="color:red">日</li>
  147.   </ul>
  148.   <ul class="days">
  149.   <li @click="pick(day)" v-for="day in days">
  150.    <!--今天-->
  151.    <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
  152.    <span v-else>
  153.    <!--今天-->
  154.    <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new  
  155.  Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
  156.    <span v-else>{{ day.getDate() }}</span>
  157.    </span>
  158.   </li>
  159.   </ul>
  160.  </p>
  161.  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js" type="text/javascript" 
  162.  charset="utf-8"></script>
  163.  <script type="text/javascript">
  164.   new Vue({
  165.   el: '#calendar',
  166.   data: {
  167.    currentDay: 1,
  168.    currentMonth: 1,
  169.    currentYear: 1970,
  170.    currentWeek: 1,
  171.    days: [],
  172.   },
  173.   created: function() {
  174.    this.initData(null);
  175.   },
  176.   methods: {
  177.    initData: function(cur) {
  178.    var date;
  179.    if (cur) {
  180.     date = new Date(cur);
  181.    } else {
  182.     date = new Date();
  183.    }
  184.    this.currentDay = date.getDate();
  185.    this.currentYear = date.getFullYear();
  186.    this.currentMonth = date.getMonth() + 1;
  187.    this.currentWeek = date.getDay(); // 1...6,0
  188.    if (this.currentWeek == 0) {
  189.     this.currentWeek = 7;
  190.    }
  191.    var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
  192.    console.log("today:" + str + "," + this.currentWeek);
  193.    this.days.length = 0;
  194.    // 今天是周日，放在第一行第7个位置，前面6个
  195.    for (var i = this.currentWeek - 1; i >= 0; i--) {
  196.     var d = new Date(str);
  197.     d.setDate(d.getDate() - i);
  198.     console.log("y:" + d.getDate());
  199.     this.days.push(d);
  200.    }
  201.    for (var i = 1; i <= 35 - this.currentWeek; i++) {
  202.     var d = new Date(str);
  203.     d.setDate(d.getDate() + i);
  204.     this.days.push(d);
  205.    }
  206.    },
  207.    pick: function(date) {
  208.    alert(this.formatDate( date.getFullYear() , date.getMonth() + 1, date.getDate()));
  209.    },
  210.    pickPre: function(year, month) {
  211.    // setDate(0); 上月最后一天
  212.    // setDate(-1); 上月倒数第二天
  213.    // setDate(dx) 参数dx为 上月最后一天的前后dx天
  214.    var d = new Date(this.formatDate(year , month , 1));
  215.    d.setDate(0);
  216.    this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
  217.    },
  218.    pickNext: function(year, month) {
  219.    var d = new Date(this.formatDate(year , month , 1));
  220.    d.setDate(35);
  221.    this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
  222.    },
  223.    pickYear: function(year, month) {
  224.    alert(year + "," + month);
  225.    },
  226.     
  227.    // 返回 类似 2016-01-02 格式的字符串
  228.    formatDate: function(year,month,day){
  229.    var y = year;
  230.    var m = month;
  231.    if(m<10) m = "0" + m;
  232.    var d = day;
  233.    if(d<10) d = "0" + d;
  234.    return y+"-"+m+"-"+d
  235.    },
  236.   },
  237.   });
  238.  </script>
  239.  </body>
  240. </html>

以上就是Vue.js创建Calendar日历效果的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！