js日历组件

已于 2024-01-15 09:53:12 修改
阅读量641 收藏 6
点赞数 8
文章标签： javascript 前端 开发语言
于 2023-12-29 14:53:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45195355/article/details/135291013
版权

在这里插入图片描述

<template>
  <div>
    <Row>
      <div class="flex">
        <Select v-model="currentYear" size="large" class="m-r-10 w-102 high-search-lingHeight" @on-change="changeYear">
          <Option v-for="(item, index) in yearList" :value="item.value" :key="index">
            {{ item.label }}
          </Option>
        </Select>
        <Icon type="ios-arrow-back" class="m-r-10 cut-switch" @click="pickPre(currentYear, currentMonth)" />
        <Select v-model="currentMonth" size="large" class="w-102 high-search-lingHeight" @on-change="changeMonth">
          <Option v-for="(item, index) in monthList" :value="item.value" :key="index">
            {{ item.label }}
          </Option>
        </Select>
        <Icon type="ios-arrow-forward" class="m-l-10 cut-switch" @click="pickNext(currentYear, currentMonth)" />

        <Button size="large" class="m-l-10 customButton" @click="goBackToday">返回今天</Button>

        {{ current.currentYear }}{{ current.currentMonth }}{{ current.currentDay }} {{ current.currentWeek }}
      </div>
    </Row>
    <Row>
      <Col span="18">
        <div clasa="calendar">
          <ul class="weekdays">
            <li v-for="(item, index) in week" :key="index">
              {{ item }}
            </li>
          </ul>
          <!-- 日期 -->
          <ul class="days">
            <li
              v-for="(dayobject, index) in days"
              :key="index"
              :class="{
                'active-boder': dayobject.activeBoder,
              }"
            >
              <!-- 当前天及未来的日期 -->
              <!-- 年月日大于等于当前年月日  年月大于当前年月  年大于当前年-->
              <template v-if="judgeDate(dayobject)">
                <div class="w-100 h-100 p-r c-p" :class="{ 'bg-gray': dayobject.isGray }" @click="clickDate(dayobject, index)">
                  <div class="flex">
                    <span class="m-l-5">
                      <Checkbox v-model="dayobject.isGray" v-if="isCheckBox"></Checkbox>
                    </span>
                  </div>
                  <p class="date-text p-a">
                    <span class="span-text m-b-10">{{ dayobject.day.getDate() }}</span>
                    <span class="span-bg-zwpb">暂未排班</span>
                  </p>
                </div>
              </template>
              <!-- 过去的日期 -->
              <template v-else>
                <div class="w-100 h-100 p-r" :class="dayobject.list ? 'c-p' : ''" @click="clickDate(dayobject, index)">
                  <p class="date-text p-a">
                    <span class="span-text m-b-10" style="color: #e1e1e1">
                      {{ dayobject.day.getDate() }}
                    </span>
                    <span class="span-bg-wpb">未排班</span>
                  </p>
                </div>
              </template>
            </li>
          </ul>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import dayjs from "dayjs";
require("dayjs/locale/zh-cn");
export default {
  data() {
    return {
      week: ["一", "二", "三", "四", "五", "六", "日"],
      days: [],
      currentDay: 1,
      currentMonth: 0,
      currentYear: 0,
      currentWeek: 1,
      current: {
        currentDay: dayjs().format("DD"),
        currentYear: dayjs().format("YYYY"),
        currentMonth: dayjs().format("MM"),
        currentWeek: dayjs().locale("zh-cn").format("dddd"),
      },
      yearList: [
        { value: 2022, label: "2022" },
        { value: 2023, label: "2023" },
        { value: 2024, label: "2024" },
        { value: 2025, label: "2025" },
        { value: 2026, label: "2026" },
        { value: 2027, label: "2027" },
        { value: 2028, label: "2028" },
        { value: 2029, label: "2029" },
        { value: 2030, label: "2030" },
        { value: 2031, label: "2031" },
        { value: 2032, label: "2032" },
      ],
      monthList: [
        { value: 1, label: "1" },
        { value: 2, label: "2" },
        { value: 3, label: "3" },
        { value: 4, label: "4" },
        { value: 5, label: "5" },
        { value: 6, label: "6" },
        { value: 7, label: "7" },
        { value: 8, label: "8" },
        { value: 9, label: "9" },
        { value: 10, label: "10" },
        { value: 11, label: "11" },
        { value: 12, label: "12" },
      ],
    };
  },
  computed: {
    judgeDate() {
      return (dayobject) => {
        //  当前天及未来的日期判断
        // 年月日大于等于当前年月日  年月大于当前年月  年大于当前年
        return (
          (dayobject.day.getFullYear() >= new Date().getFullYear() &&
            dayobject.day.getMonth() >= new Date().getMonth() &&
            dayobject.day.getDate() >= new Date().getDate()) ||
          (dayobject.day.getFullYear() >= new Date().getFullYear() && dayobject.day.getMonth() > new Date().getMonth()) ||
          dayobject.day.getFullYear() > new Date().getFullYear()
        );
      };
    },
  },
  mounted() {
    this.initData(null);
  },
  methods: {
    // 返回今天
    goBackToday() {
      this.initData(null);
      this.current.currentDay = dayjs().format("DD");
      this.current.currentYear = dayjs().format("YYYY");
      this.current.currentMonth = dayjs().format("MM");
      this.current.currentWeek = dayjs().locale("zh-cn").format("dddd");
      this.days.forEach((item) => (item.isGray = false));
    },
    // 切换年份
    changeYear(val) {
      if (val > this.currentYear) {
        this.pickNext(val, this.currentMonth + 1);
      } else if (this.currentMonth === 12) {
        this.pickNext(val, this.currentMonth - 1);
      } else {
        this.pickPre(val, this.currentMonth + 1);
      }
    },
    // 切换月份
    changeMonth(val) {
      if (val > this.currentMonth) {
        this.pickNext(this.currentYear, val + 1);
      } else if (val === 12) {
        this.pickNext(this.currentYear, val - 1);
      } else {
        this.pickPre(this.currentYear, val + 1);
      }
    },
    pickPre(year, month) {
      if (year === 2022 && month === 1)
        return this.$Message.error({
          content: "无2022年以前的数据",
          duration: 5,
        });
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(0);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    pickNext(year, month) {
      if (year === 2032 && month === 12)
        return this.$Message.error({
          content: "无2032年以后的数据",
          duration: 5,
        });
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(35);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    // 点击今天以及未来日期
    clickDate(val, index) {
      this.setCurrent(val, index);
    },
    setCurrent(val, index) {
      this.current.currentDay = dayjs(val.day).format("DD");
      this.current.currentYear = dayjs(val.day).format("YYYY");
      this.current.currentMonth = dayjs(val.day).format("MM");
      this.current.currentWeek = dayjs(val.day).locale("zh-cn").format("dddd");
      this.days.forEach((item) => (item.activeBoder = false));
      this.days[index].activeBoder = true;
    },
    initData(cur) {
      var date = cur ? new Date(cur) : this.getFirstDayOfNextMonth();
      this.setCurrentDate(date);
      this.days.length = 0;
      this.initCurrentWeekDays();
      this.initOtherWeeksDays();
    },
    getFirstDayOfNextMonth() {
      var now = new Date();
      var d = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
      d.setDate(35);
      var date = new Date(this.formatDate(d.getFullYear(), d.getMonth(), 1));
      console.log(dayjs(date).format("YYYY-MM-DD"));
      return date;
    },
    setCurrentDate(date) {
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;
      this.currentWeek = date.getDay();
      if (this.currentWeek === 0) {
        this.currentWeek = 7;
      }
    },
    initCurrentWeekDays() {
      for (var i = this.currentWeek - 1; i >= 0; i--) {
        const dayobject = this.newDayObject(i);
        this.days.push(dayobject);
      }
    },
    initOtherWeeksDays() {
      for (var i = 1; i <= 35 - this.currentWeek; i++) {
        const dayobject = this.newDayObject(i, true);
        this.days.push(dayobject);
      }
    },
    newDayObject(i, isNotCurrentWeek = false) {
      var d = new Date(this.formatDate(this.currentYear, this.currentMonth, this.currentDay));
      d.setDate(d.getDate() + (isNotCurrentWeek ? i : -i));
      var dayobject = {
        day: d,
        isGray: false,
        dayPt: dayjs(d).format("YYYY-MM-DD"),
        activeBoder: this.isActiveBorder(d),
      };
      return dayobject;
    },
    isActiveBorder(d) {
      return (
        dayjs(d).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD") ||
        dayjs(d).format("YYYY-MM-DD") ===
          dayjs(this.current.currentYear + "-" + this.current.currentMonth + "-" + this.current.currentDay).format("YYYY-MM-DD")
      );
    },
    formatDate(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;
    },
  },
};
</script>

<style lang="less" scoped>
.calendar {
  width: 100%;
  margin: 0 auto;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

.month ul li {
  box-sizing: border-box;
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.weekdays {
  display: flex;
  flex-wrap: wrap;
  color: #000;
}

.weekdays li {
  box-sizing: border-box;
  display: inline-block;
  width: 14.2%;
  height: 70px;
  line-height: 70px;
  border: 1px solid #dcdcdc;
  text-align: center;
}

.days {
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
}

.days li {
  list-style-type: none;
  width: 14.2%;
  height: 140px;
  border: 1px solid #dcdcdc;
  display: inline-block;
  text-align: center;
  font-size: 1rem;
  color: #000;
}

.active-boder {
  border: 2px solid rgba(72, 189, 160, 1) !important;
}

.days li .other-month {
  color: gainsboro;
}

.flex {
  display: flex;
  justify-content: space-between;

  .bg-color {
    background-color: rgba(221, 221, 221, 1);
    color: #ffffff;
    width: 60px;
    text-align: center;
    height: 20px;
    font-size: 10px;
    transform: scale(0.83333) translate(10%, 0%);
    border: 1px solid rgba(221, 221, 221, 1);
    border-bottom-left-radius: 50px;
  }

  .opacity {
    opacity: 0;
  }
}

.date-text {
  width: 100px;
  height: 50px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;

  .span-text {
    display: block;
  }

  .span-bg {
    color: #ffffff;
    width: 22px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
  }

  .span-bg-zwpb {
    color: #ffffff;
    width: 90px;
    height: 22px;
    border-radius: 40%;
    display: inline-block;
    background-color: #dcdcdc;
  }

  .span-bg-wpb {
    color: #ffffff;
    width: 70px;
    height: 22px;
    border-radius: 40%;
    display: inline-block;
    background-color: #dcdcdc;
  }
}

.bg-yellow {
  background-color: rgba(251, 169, 52, 1);
}

.bg-green {
  background-color: rgba(169, 227, 90, 1);
}

.bg-blue {
  background-color: rgba(51, 153, 255, 1);
}

.bg-gray {
  border-color: #e1e1e1;
}

.c-color {
  color: #999999 !important;
}
.cut-switch {
  display: inline-block;
  cursor: pointer;
  position: relative;
  top: 8px;
}
</style>
迁就却不将就
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue2 组件—js原生自定义日历组件实现方法
qq_42101569的博客
07-23 604
封装一个日历组件，可以根据日期对应数据匹配对应阈值区间在当前日期下渲染不同颜色的短线。当天之后的日期显示为灰色，并设为无法点击的状态；若选择其他日期，小点位置一直保持在当天日期下，选择的日期显示为蓝色。在本案例中外部框架的高度是固定的，因此就要对含有不同周数的月份进行判断然后在样式设置，恰好占据4周的月份比较少，在本案例中并未对这种情况进行设置。currentMonth代表当前月份，currentYear代表当前年份，clickDate是组件内发生点击日期事件后向父组件传值，以便联动其他系统功能。
js日历插件
12-27
js日期插件，引入之后可以直接使用。年月日格式的日历插件
js制作日历
weixin_63794155的博客
09-21 1485
new Date()第3个参数默认为1，就是每个月的1号，将它设置为0后，new Date()会返回。可以获取y年第一天（1月1日）方法一：设置本月份天数参数为0 ，能返回当前月份总共天数。getDate()获取最后一天，即整月天数。，然后通过getDate()方法得到天数。
【js组件】日历
KatyLight的博客
01-28 3478
输入日期参数就会输出日历
日历js插件
03-18
常规js日历，点击弹出js弹框，基于jquery插件进行开发
JS日历组件（功能很强）
05-16
内容索引:脚本资源,Ajax/JavaScript,JS日历　MY97网站开发的一款功能很强的JS日历组件，调用方法简便，有多种风格样式，支持中、英文语言，而且代码体积小，对页面加载的影响很小，压缩包内附有官方说明文档和使用...
JS日历组件（功能很强）.zip
11-01
JS日历组件通常是基于HTML、CSS和JavaScript构建的。HTML提供页面结构，CSS负责样式设计，而JavaScript则处理动态交互和逻辑控制。日历通常以表格形式展现，通过JavaScript计算和显示月份、星期以及日期。 2. **...
js实现日历
sun~的博客
11-30 943
需求 默认展示当前月份，点击箭头切换上月下月，并展示每天的上课时间。（日历由时间戳计算，后端不返回555~） 实现代码 html <el-dialog :visible.sync="editVisible" width="800px" title="上课时间" custom-class="container"> <div class="wrap"> <div class="topTime"> <sp...
js实现日历组件
weixin_45493439的博客
09-08 4338
下载好之后需要在文件里的最后一行加入默认导出 calendar,(不加也行)calendar 是一个根据阳历转阴历的封装方法;
非常好的js日历插件
11-07
非常好的js日历插件 网络整理，供大家下载，希望对大家有所帮助
JS日历组件, JS Calendar
06-26
简单易用功能强大 JS 日历 日期 组件 javascript Calendar
js实现的日历控件(经典好用)
06-16
js实现的日历控件 js实现的日历控件 js实现的日历控件 js实现的日历控件
JS实现日历
热门推荐
仄言的博客
12-13 1万+
JS 实现日历 最近在学JS，分享一些使用js实现的网页，后续还会更一些关于js的例子，话不多说，直接附上源码，源码上有注释。 js 实现日历主要 运用Date函数,这里就不在多讲Date的用法，因为并不是很难，所以想要了解的朋友可以去网上自行搜索，有很多的讲解！ &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&a
精典的js日历组件
diaoruoyan3561的博客
12-04 181
经常会用到日历控件，现在就整理一下，好看即好用的日历控件第一种方案1.建立一个JS文件：Calendar.js<!--var cal;var isFocus=false; //是否为焦点//function SelectDate(obj,strFormat) //两个参数改为只传一个function SelectDate(obj){ var date = new Date...
日历组件封装 —— (Vue 和 JS两种方式实现)
dabaooooq的博客
02-14 1449
分三个模块，日期面板、年份面板、月份面板。所有事件，利用事件代理方式，只绑定根元素点击事件，最后触发子节点通过冒泡触发事件。公共store，用于响应数据的变化，及时去创建或更新面板。
JS日历
qq_35370002的博客
01-11 194
效果图 原理 利用Date()方法获取系统时间，制作万年历。 getFullYear()获取年 getMonth()获取月 getDate()获取日 getDay()获取星期 实现 <div class="rili" style="user-select: none"> <div id="top"> <span onclick="pre()" id="pre" style="cursor: pointer">&lt;</span
js 日历
qq_38013145的博客
09-29 728
div> div class="content">div> div> a class="left" href="javascript:;"><a> a class="right" href="javascript:;">>a> div> div>table width="100%" border="0" class="mui-te
uniapp周日历组件
最新发布
02-24
uniapp是一款基于Vue.js的跨平台开发框，可以用于开发iOS、Android、H5等多个平台的应用程序。而uniapp周日历组件是在uniapp框架下，用于展示和管理日历的组件。 uniapp周日历组件通常具有以下功能： 1. 展示日历：可以显示当前月份的日历，并标记出当天日期。 2. 切换月份：可以通过左右滑动或点击按钮来切换月份，以便查看不同月份的日历。 3. 选择日期：可以点击某个日期来选择特定日期，通常会有选中效果或者回调函数来处理选择事件。 4. 自定义样式：可以根据需求自定义日历的样式，包括日期的颜色、背景、边框等。 uniapp周日历组件的具体实现方式可以有多种，常见的方式包括： 1. 使用第三方组件库：uniapp支持引入第三方组件库，可以选择一些已经开发好的周日历组件库进行使用。 2. 自定义组件：根据自己的需求，可以自己编写一个周日历组件，通过Vue.js的组件化开发方式来实现。 总结一下，uniapp周日历组件是用于展示和管理日历的组件，可以在uniapp框架下进行开发和使用。具体实现方式可以选择引入第三方组件库或自定义开发。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值