Vue2.0+Element实现日历组件

(壹)博主介绍

🌠个人博客: 尔滨三皮
⌛程序寄语:木秀于林,风必摧之;行高于人,众必非之。

(贰)文章内容

img

1、安装依赖

npm install moment@2.29.4 --save
npm install lunar@0.0.3 --save
npm install lunar-javascript@1.6.7 --save

2、ChineseFestival.js

在utils文件夹内,新建.js

export const worldHolidays = [
    { month: 1, day: 1, name: '元旦' }, // New Year's Day
    { month: 2, day: 14, name: '情人节' }, // Valentine's Day
    { month: 3, day: 8, name: '妇女节' }, // International Women's Day
    { month: 4, day: 1, name: '愚人节' }, // April Fools' Day
    { month: 4, day: 22, name: '地球日' }, // Earth Day
    { month: 5, day: 1, name: '劳动节' }, // International Workers' Day
    { month: 12, day: 25, name: '圣诞节' }, // Christmas Day
]

3、时间格式转换

utils.js 中添加如下函数

// date原型链对象添加format方法,用于format日期格式
Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, // 月份
    "d+": this.getDate(), // 日
    "h+": this.getHours(), // 小时
    "m+": this.getMinutes(), // 分
    "s+": this.getSeconds(), // 秒
    "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
    S: this.getMilliseconds(), // 毫秒
  }

  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length))
    }
  }

  return fmt
}

// Date对象Transfer对象,将时间戳转换成日期对象
Date.Transfer = function (timeSpan) {
  if (!timeSpan) {
    return new FormatDateNullValue()
  }

  return new Date(timeSpan)
}

4、日历组件

<!-- 日历组件 -->
<template>
  <div class="calendarsBox">
    <section>
      <div class="btnBox">
        <el-button @click="preY" size="mini">上一年</el-button> <el-button @click="nexY" size="mini">下一年</el-button>
      </div>

      <el-calendar v-model="value" ref="ec">
        <template #dateCell="{ date, data }">
          <!-- 日历详细 -->
          <div class="conter">
            <div class="c-box">
              <!-- 月日 -->
              <div class="day">
                {{ Date.Transfer(data.day).Format("MM-dd") }}
              </div>
              <!-- 农历 -->
              <div class="date">{{ lunarcalendar1(date) }}</div>
              <!-- 节气 -->
              <div class="jieqi" v-html="solarTerms(getLunarYMD('y', date), getLunarYMD('m', date), getLunarYMD('d', date))"></div>
              <!-- 中国传统节日 -->
              <div class="jieri">{{ funcFestival(+data.day.split("-")[1], +data.day.split("-")[2]) }}</div>
            </div>

            <div>{{ funcTraditionalFestival(getLunarYMD("y", date), getLunarYMD("m", date), getLunarYMD("d", date)) }}</div>
          </div>
        </template>
      </el-calendar>
    </section>
  </div>
</template>

<script>
import moment from "moment"
import lunar from "lunar-javascript"
import { chineseFestival } from "@/utils/chineseFestival"
export default {
  name: "Calendars",
  components: {},
  data() {
    return {
      date: moment(new Date()),
      value: null,
    }
  },
  methods: {
    preY() {
      // month 接受从 0 到 11 的数字。 如果超出范围,它将冒泡到年份。
      this.funcY("-")
    },
    nexY() {
      this.funcY("+")
    },
    funcY(_symbol) {
      let t, y
      if (_symbol === "+") {
        y = this.date.year() + 1
      } else if (_symbol === "-") {
        y = this.date.year() - 1
      }
      t = moment(`${y}-${moment().month() + 1}-${moment().date()}`)
      this.value = this.funcToDate(t)
      this.funcSynchronous(t)
    },
    funcToDate(_moment) {
      return _moment.toDate()
    },
    funcSynchronous(_t) {
      this.date = moment(_t.toDate())
    },
    lunarcalendar(ymd) {
      return lunar.Solar.fromDate(ymd).getLunar().toFullString()
    },
    lunarcalendar1(ymd) {
      return lunar.Solar.fromDate(ymd).getLunar().toString().split("年")[1]
    },
    funcTraditionalFestival(_y, _m, _d) {
      return lunar.Lunar.fromYmd(+_y, +_m, +_d).getFestivals()[0] ? lunar.Lunar.fromYmd(+_y, +_m, +_d).getFestivals()[0] : ""
    },
    funcTraditionalFestival1(_y, _m, _d) {
      return lunar.Lunar.fromYmd(+_y, +_m, +_d).getOtherFestivals()[0] ? lunar.Lunar.fromYmd(+_y, +_m, +_d).getOtherFestivals()[0] : ""
    },
    solarTerms(_y, _m, _d) {
      var d = lunar.Lunar.fromYmd(_y, _m, _d)
      let jq = d.getJieQi()
      return jq
        ? '<span style="font-family: "zkxw"">' +
            jq +
            "</span>" +
            " " +
            d
              .getJieQiTable()
              [jq].toYmdHms()
              .match(/\d\d:\d\d:\d\d/gi)[0]
        : ""
    },
    getLunarYMD(type, t1) {
      let t,
        d1 = lunar.Lunar.fromDate(t1)
      switch (type) {
        case "y":
          t = d1.getYear()
          break
        case "m":
          t = d1.getMonth()
          break
        case "d":
          t = d1.getDay()
          break
        default:
      }
      return t
    },
    funcFestival(m, d) {
      let festival = chineseFestival.find(i => i.month === m && i.day === d)
      return festival ? festival.name : ""
    },
  },
  mounted() {
    this.value = this.funcToDate(this.date)
    console.log(this.$refs.ec)
    console.log(chineseFestival)
  },
}
</script>

<style lang="less" scoped>
/*移动端适配*/
@media screen and (max-width: 1118px) {
  .calendarsBox {
    width: 100%;
    height: 100%;
    font-family: "lgq";
    position: relative;
    font-size: 0.6rem;
    section {
      //上一年 下一年
      .btnBox {
        position: absolute;
        top: .54rem;
        right: 9.8rem;
        .el-button + .el-button {
          margin-left: 0;
        }
      }
    }
    ::v-deep .el-button {
      border: none;
    }
    ::v-deep .el-button:hover {
      color: #409eff;
      border-color: none;
      background-color: #dae6f5;
    }
    ::v-deep .el-calendar-table .el-calendar-day {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    ::v-deep .el-calendar__body {
      padding: 0 0 0;
    }
    ::v-deep .el-calendar-table td.is-today {
      color: #409eff;
    }
    .conter {
      text-align: center;

      .c-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .day {
          width: 100%;
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          font-size: 0.52rem;
          font-weight: bold;
          border-radius: 0.1rem;
        }
        .date {
          height: 1rem;
          line-height: 1rem;
          font-size: 0.4rem;
        }
        .jieqi {
          color: blue;
        }
        .jieri {
          color: red;
          font-family: "dyh";
          font-size: .5rem;
        }
      }
    }
  }
}
// PC端适配
@media screen and (min-width: 1119px) {
  .calendarsBox {
    width: 100%;
    height: 100%;
    font-family: "lgq";
    position: relative;
    font-size: 0.3rem;
    section {
      //上一年 下一年
      .btnBox {
        position: absolute;
        top: 0.23rem;
        right: 4rem;
        .el-button + .el-button {
          margin-left: 0;
        }
      }
    }
    ::v-deep .el-button {
      border: none;
    }
    ::v-deep .el-button:hover {
      color: #409eff;
      border-color: none;
      background-color: #dae6f5;
    }
    ::v-deep .el-calendar-table .el-calendar-day {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    ::v-deep .el-calendar__body {
      padding: 0 0 0;
    }
    ::v-deep .el-calendar-table td.is-today {
      color: #409eff;
    }
    .conter {
      text-align: center;

      .c-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .day {
          width: 100%;
          height: 0.6rem;
          line-height: 0.6rem;
          text-align: center;
          font-size: 0.42rem;
          font-weight: bold;
          border-radius: 0.1rem;
        }
        .date {
          height: 0.6rem;
          line-height: 0.6rem;
        }
        .jieqi {
          color: blue;
        }
        .jieri {
          color: red;
          font-family: "dyh";
        }
      }
    }
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/354676.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言数据结构——链表

&#xff08;图像由AI生成&#xff09; 0.前言 在计算机科学中&#xff0c;数据结构是存储和组织数据的一种方式&#xff0c;它不仅影响数据的存储&#xff0c;也影响数据的检索和更新效率。C语言&#xff0c;作为一种经典的编程语言&#xff0c;提供了灵活的方式来处理数据…

OkHttp完全解读

一&#xff0c;概述 OkHttp作为android非常流行的网络框架&#xff0c;笔者认为有必要剖析此框架实现原理&#xff0c;抽取并理解此框架优秀的设计模式。OkHttp有几个重要的作用&#xff0c;如桥接、缓存、连接复用等&#xff0c;本文笔者将从使用出发&#xff0c;解读源码&am…

iOS 文件分割保存加密

demo只是验证想法&#xff0c;没有做很多异常处理 默认文件是大于1KB的&#xff0c;对于小于1KB的没有做异常处理demo中文件只能分割成2个&#xff0c;可以做成可配置的N个文件分割拼接还可以使用固定的二进制数据&#xff0c;拼接文件开头或结尾 不论哪种拼法&#xff0c;目的…

牛客周赛30

思路&#xff1a;先把x, y除以最大公约数变成最小值&#xff0c;然后同时乘以倍数cnt&#xff0c;只记录两个数都在[l,r]间的倍数。 代码&#xff1a; int gcd(int a,int b){return b ? gcd(b, a % b) : a; }void solve(){int x, y, l, r;cin >> x >> y >>…

两两交换链表中的结点---链表OJ

https://leetcode.cn/problems/swap-nodes-in-pairs/description/?envType=study-plan-v2&envId=top-100-liked 1、递归 创建newhead = head->next,然后将head->next->next作为递归参数,返回值用head->next接收;递归结束条件是:没有结点或者只有一…

Python代码耗时统计

time模块 在代码执行前后各记录一个时间点&#xff0c;两个时间戳相减即程序运行耗时。这种方式虽然简单&#xff0c;但使用起来比较麻烦。 time.time() 函数返回的时间是相对于1970年1月1日的秒数 import timestart time.time() time.sleep(1) end time.time() print(f&…

洛谷 P2150 [NOI2015] 寿司晚宴

P2150 [NOI2015] 寿司晚宴 约定&#xff1a; n ≤ 500 n \leq 500 n≤500 题意 给定 2 → n 2 \rightarrow n 2→n 共 n − 1 n-1 n−1 个数字&#xff0c;现在两个人想分别取一些数字&#xff08;不一定全取完&#xff09;&#xff0c;如果他们两人取的数字中存在&#xf…

05. java线程基础

05. java线程基础 01. 线程相关概念 1. 程序 ​ 是为完成特定任务、用某种语言编写的一组指令的集合。简单来说&#xff1a;就是我们写的代码 2. 进程 进程是指运行中的程序&#xff0c;比如我们使用微信&#xff0c;就启动了一个进程&#xff0c;操作系统会为该进程分配内…

【代码随想录】LC 242. 有效的字母异位词

文章目录 前言一、题目1、原题链接2、题目描述 二、解题报告1、思路分析2、时间复杂度3、代码详解 前言 本专栏文章为《代码随想录》书籍的刷题题解以及读书笔记&#xff0c;如有侵权&#xff0c;立即删除。 一、题目 1、原题链接 242. 有效的字母异位词 2、题目描述 二、解题…

一文理清楚-Docker 容器如何工作

Docker 容器如何工作 集装箱什么是虚拟机&#xff1f;虚拟化如何运作&#xff1f;什么是容器&#xff1f;什么是 Docker&#xff1f;总结 五星上将麦克阿瑟曾经说过&#xff1a;在docker面前&#xff0c;虚拟机就是个弟弟 集装箱 《盒子&#xff1a;集装箱如何让世界变得更小&…

剑指offer——删除链表的节点

题目描述&#xff1a;给定单向链表的头指针和一个要删除的节点的值&#xff0c;定义一个函数删除该节点。返回删除后的链表的头节点。 数据范围&#xff1a; 0 <链表节点值 < 10000 0 <链表长度 < 10000 示例1&#xff1a; 输入&#xff1a;{2,5,1,9}&#xff…

1.28寒假集训

A: 解题思路&#xff1a; 移项就好v mv / (M - m) 下面是c代码&#xff1a; #include<iostream> using namespace std; int main() {int t;double M,m,v;cin >> t;while(t ! 0){cin >> M >> m >> v;printf("%.2lf\n",(m * v) / (M…

数据库之 基础概念、安装mysql、sql语句基础

数据库之 基础概念、安装mysql、sql语句基础 【一】存储数据的演变过程&#xff1a; 文件存储&#xff1a; 初始阶段随意存放数据到文件&#xff0c;格式任意。目录规范引入&#xff1a; 软件开发使用目录规范&#xff0c;限制数据位置&#xff0c;建立专门文件夹。本地数据存…

Linux报 “no route to host” 异常 ping: sendmsg: No route to host

公司有台服务器迁移机房后跟另一台服务器相互ping不通&#xff0c;但是两台服务器都能上网能ping其他机器&#xff0c;其他机器都能ping通这两台服务器。检查两台服务器没有防火墙规则拦截&#xff0c;交换机上也没检查到acl过滤。 下图是迁移机房的服务器ping截图 下图是nfs服…

分布式空间索引了解与扩展

目录 一、空间索引快速理解 &#xff08;一&#xff09;区域编码 &#xff08;二&#xff09;区域编码检索 &#xff08;三&#xff09;Geohash 编码 &#xff08;四&#xff09;RTree及其变体 二、业内方案选取 三、分布式空间索引架构 &#xff08;一&#xff09;PG数…

腾讯云幻兽帕鲁4核16G14M服务器性能测评和价格

腾讯云幻兽帕鲁服务器4核16G14M配置&#xff0c;14M公网带宽&#xff0c;限制2500GB月流量&#xff0c;系统盘为220GB SSD盘&#xff0c;优惠价格66元1个月&#xff0c;277元3个月&#xff0c;支持4到8个玩家畅玩&#xff0c;地域可选择上海/北京/成都/南京/广州&#xff0c;腾…

通讯录项目(终)

Start And Stick 上一期我们将通讯录的项目的基本功能已经实现&#xff0c;这一篇文章我们将对通讯录进行完善。 目录 Start And Stick 上期回顾&#xff1a; 上期必要代码&#xff1a; 数据打印&#xff1a; 代码讲解&#xff1a; 头部插入数据&#xff1a; 代码讲解&…

27.1K Star,优雅的JSON 数据可视化工具

Hi&#xff0c;骚年&#xff0c;我是大 G&#xff0c;公众号「GitHub指北」会推荐 GitHub 上有趣有用的项目&#xff0c;一分钟 get 一个优秀的开源项目&#xff0c;挖掘开源的价值&#xff0c;欢迎关注。 想自己之前做 APP 开发会访问后端数据&#xff0c;这个数据就是 JSON …

【网络基础】网络协议传输层UDP和TCP

UDP 解包和分用 解包&#xff08;解析数据包&#xff09; 捕获数据包&#xff1a;首先&#xff0c;接收端的网络栈捕获UDP数据包。检查目的端口&#xff1a;接收端检查数据包头部的目的端口&#xff0c;以确定哪个应用程序应该接收该数据包。验证校验和&#xff1a;接收端可能…

【排序5】基数排序:数字的组织与整理艺术

&#x1f3a1;基数排序 &#x1f38a;1、基本思想&#x1f38a;2、基本步骤&#x1f38a;3、代码示例&#x1f38a;4、特性总结 &#x1f38a;1、基本思想 基数排序&#xff08;Radix Sort&#xff09;是一种非比较排序算法&#xff0c;它根据数字的每一位来对元素进行排序。它…