지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > js를 사용하여 달력 기능을 구현하는 방법을 알려줍니다(코드 예제 포함).

js를 사용하여 달력 기능을 구현하는 방법을 알려줍니다(코드 예제 포함).

藏色散人
풀어 주다： 2022-08-06 09:45:25
앞으로
3168명이 탐색했습니다.

샘플 코드

<template>
  <div id="calendar">
    <!-- 年份 月份 -->
    <div class="month">
      <ul>
        <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
        <li
          class="arrow hands el-icon-arrow-left"
          @click="pickPre(currentYear, currentMonth)"
        ></li>
        <li class="year-month">
          <span class="choose-year">{{ currentYear }}年</span>
          <span class="choose-month">{{ currentMonth }}月</span>
        </li>
        <li
          class="arrow hands el-icon-arrow-right"
          @click="pickNext(currentYear, currentMonth)"
        ></li>
      </ul>
    </div>
    <!-- 星期 -->
    <ul class="weekdays">
      <li>日</li>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
    </ul>
    <!-- 日期 -->
    <ul class="days">
      <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
      <li v-for="(dayobject, i) in days" :key="i">
        <!--本月-->
        <!--如果不是本月  改变类名加灰色-->
        <span
          v-if="dayobject.day.getMonth() + 1 != currentMonth"
          class="other-month"
          @click="getDayTime(dayobject.day)"
        >
          {{ dayobject.day.getDate() }}
        </span>
        <!--如果是本月  还需要判断是不是这一天-->
        <span v-else>
          <!--今天  同年同月同日-->
          <span
            v-if="
              dayobject.day.getFullYear() == new Date().getFullYear() &&
              dayobject.day.getMonth() == new Date().getMonth() &&
              dayobject.day.getDate() == new Date().getDate()
            "
            :class="newDate == newsss ? &#39;active&#39; : &#39;&#39;"
            @click="getDayTime(dayobject.day, i)"
          >
            {{ dayobject.day.getDate() }}
          </span>
          <span
            v-else
            @click="getDayTime(dayobject.day, i)"
            :class="newDate == dayobject.day ? &#39;active&#39; : &#39;&#39;"
          >
            {{ dayobject.day.getDate() }}
          </span>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
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;
    },
  },
};
</script>
<style>
#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;
}
</style>
로그인 후 복사

참고: 작업 중에 약간의 문제가 있을 수 있습니다. 여기서는 날짜 처리 라이브러리 moment.js를 사용합니다. 설치가 필요한 경우 다음 명령을 실행하여 모멘트를 설치하세요. .js 플러그인, main.js에서 전역적으로 구성됩니다. 

npm install moment --save
로그인 후 복사

main.js

import Vue from &#39;vue&#39;
import Moment from &#39;moment&#39;;
Vue.prototype.$Moment = Moment;
Vue.prototype.$formatDateYMD = function(date) {
    return Moment(date).format(&#39;YYYY-MM-DD&#39;)
}
로그인 후 복사

관련 추천: [JavaScript 비디오 튜토리얼]

위 내용은 js를 사용하여 달력 기능을 구현하는 방법을 알려줍니다(코드 예제 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
js 달력
원천：csdn.net
이전 기사：DOM 노드 속성에 대한 지식 요약 및 공유 다음 기사：JavaScript가 요소 속성, 스타일 및 클래스 이름을 작동하는 방법에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
가장 최근에 클릭한 요소에 클래스 할당 TailwindCSS를 사용하여 스타일이 지정된 다음과 같은 달력이 있습니다. 현재 8Wednesday가 클릭되었으므로 분홍색 배경과 분홍색 그림자가 있습니다. ...
에서 2024-04-03 16:36:09
0
1
336
제목을 검색하고 다른 열을 사용하여 고유성을 확인하는 방법 데이터베이스에 일부 스크랩된 제품 데이터가 있는데 이를 내 웹사이트에서 사용하고 싶습니다. 제목이 "%EXAMPLE%"인 모든 항목을 반환하지만...
에서 2024-04-02 21:49:55
0
1
375
AJAX POST 요청의 필드 업데이트 jQuery 또는 Javascript를 사용하여 AJAXPOST 요청에서 사용자 정의 필드를 동적으로 업데이트하려고 합니다. AJAXPOST 요청은 WordPre...
에서 2024-04-02 11:45:41
0
1
360
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿