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

示例代码

  
        
      
                
        
          {{ currentYear }}年          {{ currentMonth }}月        
        
      
    
        
      
日
      
一
      
二
      
三
      
四
      
五
      
六
    
        
      <!-- 核心 v-for循环 每一次循环用
标签创建一天 -->      
                                  {{ dayobject.day.getDate() }}                                                        {{ dayobject.day.getDate() }}                                {{ dayobject.day.getDate() }}                        
    
  
export default {  data() {    return {      currentDay: 1,      currentMonth: 1,      currentYear: 2021,      currentWeek: 1,      days: [],      newDate: this.$formatDateYMD(new Date()),      newsss: this.$formatDateYMD(new Date()),    };  },  created: function () {    // 在vue初始化时调用    this.initData(null);  },  methods: {    initData: function (cur) {      // var leftcount = 0 // 存放剩余数量      var date;      if (cur) {        date = new Date(cur);      } else {        var now = new Date();        var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));        d.setDate(35);        date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));      }      this.currentDay = date.getDate();      this.currentYear = date.getFullYear();      this.currentMonth = date.getMonth() + 1;      this.currentWeek = date.getDay(); // 1...6,0      if (this.currentWeek === 0) {        this.currentWeek = 7;      }      var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);      this.days.length = 0;      // 今天是周日，放在第一行第7个位置，前面6个      // 初始化本周      for (var i = this.currentWeek; i >= 0; i--) {        var d2 = new Date(str);        d2.setDate(d2.getDate() - i);        var dayobjectSelf = {}; // 用一个对象包装Date对象  以便为以后预定功能添加属性        dayobjectSelf.day = d2;        this.days.push(dayobjectSelf); // 将日期放入data 中的days数组 供页面渲染使用      }      // 其他周      for (var j = 1; j <= 35 - this.currentWeek; j++) {        var d3 = new Date(str);        d3.setDate(d3.getDate() + j);        var dayobjectOther = {};        dayobjectOther.day = d3;        this.days.push(dayobjectOther);      }    },    getDayTime(el, index) {      this.newDate = el;      console.log(el)    },    pickPre: function (year, month) {      // setDate(0); 上月最后一天      // setDate(-1); 上月倒数第二天      // setDate(dx) 参数dx为 上月最后一天的前后dx天      var d = new Date(this.formatDate(year, month, 1));      d.setDate(0);      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));    },    pickNext: function (year, month) {      var d = new Date(this.formatDate(year, month, 1));      d.setDate(35);      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));    },    // 返回 类似 2022-05-17 格式的字符串    formatDate: function (year, month, day) {      var y = year;      var m = month;      if (m < 10) m = "0" + m;      var d = day;      if (d < 10) d = "0" + d;      return y + "-" + m + "-" + d;    },  },};#calendar {  font-size: 12px;  width: 100%;  margin: 0 auto;  background: #ecf6ff;}.month {  width: 100%;  color: #333333;}.month ul {  margin: 0;  padding: 0;  display: flex;  justify-content: space-between;  height: 35px;}.year-month {  display: flex;  align-items: center;  justify-content: space-around;  margin-top: 10px;}.choose-month {  text-align: center;  font-size: 12px;}.arrow {  padding: 15px;  color: #999999;} .month ul li {  font-size: 12px;  text-transform: uppercase;  letter-spacing: 3px;}.weekdays {  margin: 0;  padding: 10px;  display: flex;  flex-wrap: wrap;  color: #999;  justify-content: space-around;}.weekdays li {  display: inline-block;  width: 13.6%;  text-align: center;}.days {  padding: 10px;  margin: 0;  display: flex;  flex-wrap: wrap;}.days li {  list-style-type: none;  display: inline-block;  width: 14.2%;  text-align: center;  padding-bottom: 4px;  padding-top: 10px;  font-size: 12px;  color: #000;}.days li .active {  padding: 6px 10px;  border-radius: 50%;  background: #00b8ec;  color: #fff;}.days li .other-month {  padding: 5px;  color: gainsboro;}.days li:hover > span > span {  padding: 6px 10px;  border-radius: 50%;  background: #00b8ec;  color: #fff;  cursor: pointer;}

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

npm install moment --save

main.js

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

相关推荐：【JavaScript视频教程】

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34 查看详情

以上就是教你用js实现日历功能（附代码示例）的详细内容，更多请关注创想鸟其它相关文章！