首页-教程-Web前端

教你用Js实现日历功能（附代码示例）

 2995

这表文章教你如何使用Js实现日历功能，其中使用到了一个日期处理类库 moment.js，总体来说还是值得学习一下的~~


教你用Js实现日历功能（附代码示例）


示例代码

  1. <template>
  2.   <div id="calendar">
  3.     <!-- 年份 月份 -->
  4.     <div class="month">
  5.       <ul>
  6.         <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
  7.         <li
  8.           class="arrow hands el-icon-arrow-left"
  9.           @click="pickPre(currentYear, currentMonth)"
  10.         ></li>
  11.         <li class="year-month">
  12.           <span class="choose-year">{{ currentYear }}年</span>
  13.           <span class="choose-month">{{ currentMonth }}月</span>
  14.         </li>
  15.         <li
  16.           class="arrow hands el-icon-arrow-right"
  17.           @click="pickNext(currentYear, currentMonth)"
  18.         ></li>
  19.       </ul>
  20.     </div>
  21.     <!-- 星期 -->
  22.     <ul class="weekdays">
  23.       <li>日</li>
  24.       <li>一</li>
  25.       <li>二</li>
  26.       <li>三</li>
  27.       <li>四</li>
  28.       <li>五</li>
  29.       <li>六</li>
  30.     </ul>
  31.     <!-- 日期 -->
  32.     <ul class="days">
  33.       <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
  34.       <li v-for="(dayobject, i) in days" :key="i">
  35.         <!--本月-->
  36.         <!--如果不是本月  改变类名加灰色-->
  37.         <span
  38.           v-if="dayobject.day.getMonth() + 1 != currentMonth"
  39.           class="other-month"
  40.           @click="getDayTime(dayobject.day)"
  41.         >
  42.           {{ dayobject.day.getDate() }}
  43.         </span>
  44.         <!--如果是本月  还需要判断是不是这一天-->
  45.         <span v-else>
  46.           <!--今天  同年同月同日-->
  47.           <span
  48.             v-if="
  49.               dayobject.day.getFullYear() == new Date().getFullYear() &&
  50.               dayobject.day.getMonth() == new Date().getMonth() &&
  51.               dayobject.day.getDate() == new Date().getDate()
  52.             "
  53.             :class="newDate == newsss ? 'active' : ''"
  54.             @click="getDayTime(dayobject.day, i)"
  55.           >
  56.             {{ dayobject.day.getDate() }}
  57.           </span>
  58.           <span
  59.             v-else
  60.             @click="getDayTime(dayobject.day, i)"
  61.             :class="newDate == dayobject.day ? 'active' : ''"
  62.           >
  63.             {{ dayobject.day.getDate() }}
  64.           </span>
  65.         </span>
  66.       </li>
  67.     </ul>
  68.   </div>
  69. </template>
  70. <script>
  71. export default {
  72.   data() {
  73.     return {
  74.       currentDay: 1,
  75.       currentMonth: 1,
  76.       currentYear: 2021,
  77.       currentWeek: 1,
  78.       days: [],
  79.       newDate: this.$formatDateYMD(new Date()),
  80.       newsss: this.$formatDateYMD(new Date()),
  81.     };
  82.   },
  83.   created: function () {
  84.     // 在vue初始化时调用
  85.     this.initData(null);
  86.   },
  87.   methods: {
  88.     initData: function (cur) {
  89.       // var leftcount = 0 // 存放剩余数量
  90.       var date;
  91.       if (cur) {
  92.         date = new Date(cur);
  93.       } else {
  94.         var now = new Date();
  95.         var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
  96.         d.setDate(35);
  97.         date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
  98.       }
  99.       this.currentDay = date.getDate();
  100.       this.currentYear = date.getFullYear();
  101.       this.currentMonth = date.getMonth() + 1;
  102.       this.currentWeek = date.getDay(); // 1...6,0
  103.       if (this.currentWeek === 0) {
  104.         this.currentWeek = 7;
  105.       }
  106.       var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
  107.       this.days.length = 0;
  108.       // 今天是周日，放在第一行第7个位置，前面6个
  109.       // 初始化本周
  110.       for (var i = this.currentWeek; i >= 0; i--) {
  111.         var d2 = new Date(str);
  112.         d2.setDate(d2.getDate() - i);
  113.         var dayobjectSelf = {}; // 用一个对象包装Date对象  以便为以后预定功能添加属性
  114.         dayobjectSelf.day = d2;
  115.         this.days.push(dayobjectSelf); // 将日期放入data 中的days数组 供页面渲染使用
  116.       }
  117.       // 其他周
  118.       for (var j = 1; j <= 35 - this.currentWeek; j++) {
  119.         var d3 = new Date(str);
  120.         d3.setDate(d3.getDate() + j);
  121.         var dayobjectOther = {};
  122.         dayobjectOther.day = d3;
  123.         this.days.push(dayobjectOther);
  124.       }
  125.     },
  126.     getDayTime(el, index) {
  127.       this.newDate = el;
  128.       console.log(el)
  129.     },
  130.     pickPre: function (year, month) {
  131.       // setDate(0); 上月最后一天
  132.       // setDate(-1); 上月倒数第二天
  133.       // setDate(dx) 参数dx为 上月最后一天的前后dx天
  134.       var d = new Date(this.formatDate(year, month, 1));
  135.       d.setDate(0);
  136.       this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
  137.     },
  138.     pickNext: function (year, month) {
  139.       var d = new Date(this.formatDate(year, month, 1));
  140.       d.setDate(35);
  141.       this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
  142.     },
  143.     // 返回 类似 2022-05-17 格式的字符串
  144.     formatDate: function (year, month, day) {
  145.       var y = year;
  146.       var m = month;
  147.       if (m < 10) m = "0" + m;
  148.       var d = day;
  149.       if (d < 10) d = "0" + d;
  150.       return y + "-" + m + "-" + d;
  151.     },
  152.   },
  153. };
  154. </script>
  155. <style>
  156. #calendar {
  157.   font-size: 12px;
  158.   width: 100%;
  159.   margin: 0 auto;
  160.   background: #ecf6ff;
  161. }
  162. .month {
  163.   width: 100%;
  164.   color: #333333;
  165. }
  166. .month ul {
  167.   margin: 0;
  168.   padding: 0;
  169.   display: flex;
  170.   justify-content: space-between;
  171.   height: 35px;
  172. }
  173. .year-month {
  174.   display: flex;
  175.   align-items: center;
  176.   justify-content: space-around;
  177.   margin-top: 10px;
  178. }
  179. .choose-month {
  180.   text-align: center;
  181.   font-size: 12px;
  182. }
  183. .arrow {
  184.   padding: 15px;
  185.   color: #999999;
  186. }
  187.   
  188. .month ul li {
  189.   font-size: 12px;
  190.   text-transform: uppercase;
  191.   letter-spacing: 3px;
  192. }
  193. .weekdays {
  194.   margin: 0;
  195.   padding: 10px;
  196.   display: flex;
  197.   flex-wrap: wrap;
  198.   color: #999;
  199.   justify-content: space-around;
  200. }
  201. .weekdays li {
  202.   display: inline-block;
  203.   width: 13.6%;
  204.   text-align: center;
  205. }
  206. .days {
  207.   padding: 10px;
  208.   margin: 0;
  209.   display: flex;
  210.   flex-wrap: wrap;
  211. }
  212. .days li {
  213.   list-style-type: none;
  214.   display: inline-block;
  215.   width: 14.2%;
  216.   text-align: center;
  217.   padding-bottom: 4px;
  218.   padding-top: 10px;
  219.   font-size: 12px;
  220.   color: #000;
  221. }
  222. .days li .active {
  223.   padding: 6px 10px;
  224.   border-radius: 50%;
  225.   background: #00b8ec;
  226.   color: #fff;
  227. }
  228. .days li .other-month {
  229.   padding: 5px;
  230.   color: gainsboro;
  231. }
  232. .days li:hover > span > span {
  233.   padding: 6px 10px;
  234.   border-radius: 50%;
  235.   background: #00b8ec;
  236.   color: #fff;
  237.   cursor: pointer;
  238. }
  239. </style>

注意：在运行过程中可能会出现一点小问题，这里我用到了一个日期处理类库 moment.js,如需安装请执行以下命令安装moment.js插件，在main.js 全局配置。

  1. npm install moment --save

main.js


  1. import Vue from 'vue'
  2. import Moment from 'moment';
  3. Vue.prototype.$Moment = Moment;
  4. Vue.prototype.$formatDateYMD = function(date) {
  5.     return Moment(date).format('YYYY-MM-DD')
  6. }



TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-12916.html
站长图库 - 教你用Js实现日历功能（附代码示例）
申明：本文转载于《CSDN》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐