1|0?前言

很多時候，我們生活中會有各種打卡的情況，比如 keep 的運動打卡、單詞的學習打卡和各種簽到打卡或者酒店的入住時間選擇，這時候就需要我們書寫一個日歷組件來處理我們這種需求。

但是更多時候，我們都是網(wǎng)上找一個插件直接套用了，有沒有想過自己實現(xiàn)一下呢？如果有，但是感覺不太會的話，接下來跟著我一起實現(xiàn)符合自己需求的日歷吧

2|0?準備工作

因為我們是小程序日歷嘛，所以必不可少的肯定是微信開發(fā)者工具啦。項目目錄結(jié)構(gòu)如下：

**

|-- calendar
    |-- app.js
    |-- app.json
    |-- app.wxss
    |-- project.config.json
    |-- sitemap.json
    |-- components
    |   |-- calendar
    |       |-- index.js
    |       |-- index.json
    |       |-- index.wxml
    |       |-- index.wxss
    |-- pages
        |-- index
            |-- index.js
            |-- index.json
            |-- index.wxml
            |-- index.wxss

使用?git?下載空白模板:

**

git clone -b calendar  https://gitee.com/gating/demo.git

ps: 下面步驟有點啰嗦，如果看目錄結(jié)構(gòu)就能懂的話就不需要跟著步驟啦

1. 新建一個名為calendar的空文件夾

2. 打卡微信開發(fā)者工具，新增項目，選中剛剛創(chuàng)建的calendar文件夾，開發(fā)模式選中小程序，AppID 使用測試號即可，如圖所示：

   

3. 創(chuàng)建完后，開發(fā)者工具會默認幫我們生成默認的代碼，我們在當前文件夾新增components文件家，再在components文件夾中新增calendar文件夾，再從當前文件夾新增名為index的組件，如圖：

   

ps:因為開發(fā)者工具會默認生成初始代碼，所以直接使用他創(chuàng)建組件比較方便

1. 刪除一些和本次博文無關(guān)的代碼，比如app.js中的本地緩存能力，具體參考空白模板

3|0?編寫代碼

接下來編寫代碼部分我們直接在VSCode編寫，因為微信開發(fā)者工具實在太。。。- -所以還是使用VSCode編寫比較合適

3|1?思考一下

想要實現(xiàn)日歷，我們需要知道幾個小知識：

1. 根據(jù)常識，我們知道一個月最少有 28 天，最多有 31 天，一周有 7 天，那么就可以有 5 排，但如果有一個月的第一天為星期六且當月有 31 天，那么他就會有 6 排格子才對。比如2020年8月，如圖所示：

1. 我們需要知道，當月的第一天是周幾
2. 我們需要知道，當月有多少天
3. 最重要的是小程序沒有 DOM 操作概念，所以我們不能動態(tài)往當月第一天插入格子，所以只能根據(jù)第一天是周幾循環(huán)插入格子

知道以上四點后，我們就可以編寫我們的代碼啦

首先，第二第三點是最簡單的，我先書寫第二第三點，怎么獲取當前是周幾呢？其實js的Date對象直接有現(xiàn)成的方法，我們直接拿來用就好了

**

console.log("今天是星期" + new Date().getDay());

我想有點小難度的是第三點，獲取當月有多少天，因為你想，其他的月份的天數(shù)是固定的，唯獨 2 月，在平年和閏年的不同年份中，2 月的天數(shù)也是不同的，那么有沒有簡單的方法獲取當月有多少天呢，其實也是有的，Date實例中的getDate就可以實現(xiàn)我們想要的效果了

**

// 獲取一個月有多少天
const getMonthDays = (year, month) => {
  let days = new Date(year, month + 1, 0).getDate();
  return days;
};

我們通過?Date?的第三個參數(shù)傳 0 就可以獲取上個月的最后一天，最后通過?getDate()?獲取它的日期就可以對應(yīng)我們當月的天數(shù)，那么就不需要我們自己處理平年和閏年的 2 月有多少天了

是不是又學到了小知識點呢？

解決了 2.3 兩個問題，我們就可以往下書寫我們的日歷了。

眾所周知，小程序規(guī)定寬度為750rpx(尺寸單位)，而我們的一周有 7 天，即 7 格，那么就是每個格子的寬度為107rpx，不建議使用小數(shù)，因為 rpx 計算的時候，遇到小數(shù)會存在少量偏差。這里我們使用flex布局解決。

所以接下來就可以寫我們的布局和生成我們的數(shù)據(jù)啦，從上面我們分析了，我們有 6 排格子，一排有 7 個，也就是一共 42 個格子。即需要遍歷 42 次

先定義一下我們所需要的數(shù)據(jù)，便于我們后續(xù)操作：

**

[
  {
    "dataStr": "2020/06/08",
    "day": "08",
    "month": "08",
    "otherMonth": false,
    "today": true,
    "year": 2020
  }
]

這里我只定義個幾個簡單的基本數(shù)據(jù)，如果有不同的業(yè)務(wù)場景可以自行添加基礎(chǔ)數(shù)據(jù)

小 tips

IOS 端的日期格式必須為/才可以轉(zhuǎn)化為日期格式，比如2018/07/08，而2018-07-08則返回Invalid Date，所以我們需要把-都替換為/。

不單單是小程序，微信公眾號，safari 都是一樣的。

3|2?正式開始編寫代碼

那么就可以寫我們的 js 代碼了，在?components -> calendar目錄下新建utils.js文件，書寫我們創(chuàng)建數(shù)據(jù)的基礎(chǔ)方法：

**

/**
 * 獲取當月有多少天
 * @param {String | Number} year => 年
 * @param {String | Number} month => 月
 */
const getMonthDays = (year, month) => {
  let days = new Date(year, month + 1, 0).getDate();
  return days;
};
/**
 * 補0
 * @param {String | Number} num
 */
const toDou = (num) => {
  return num > 9 ? num : "0" + num;
};

/**
 * 轉(zhuǎn)換為日期格式
 * @param {*} date
 */
const transformDate = (date) => {
  if (!(date instanceof Date)) {
    date = new Date(date);
  }
  return date;
};
/**
 * 獲取當前日期的年月日
 * @param {any} date => 日期對象
 */
const getDateObj = (date) => {
  date = transformDate(date);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  return {
    year,
    month,
    day,
    dataStr: `${year}/${toDou(month)}/${toDou(day)}`,
  };
};

/**
 * 獲取當月1號的時間戳
 * @param {Date} date => 日期對象
 */
const startOfMonth = (date) => {
  return date.setDate(1);
};

// 獲取今天，導(dǎo)出供組件作為默認值使用
const { dataStr } = getDateObj(new Date());

/**
 * 生成日歷數(shù)據(jù)
 * @param {Date} date => 日期對象
 */
const getDate = (date) => {
  date = transformDate(date);
  // 計算需要補的格子
  let dist;
  const { year, month } = getDateObj(date);
  // 獲取當月有多少天
  const days = getMonthDays(year, month - 1);
  // 獲取當前日期是星期幾
  let currentDate = new Date(startOfMonth(date)).getDay();
  // 眾所周知的原因，一周的第一天時星期天，而我們做的日歷星期天是放在最后的，所以我們這里需要改一下值
  if (currentDate == 0) {
    currentDate = 7;
  }
  dist = currentDate - 1;
  currentDate -= 2;
  const res = [];
  for (let i = 0; i < 42; i++) {
    // 是否不是當前月
    const otherMonth = i >= dist + days || i <= currentDate;
    const date = new Date(year, month - 1, -currentDate + i);
    const dateObj = getDateObj(date);
    res.push({
      ...dateObj,
      today: dataStr === dateObj.dataStr,
      otherMonth,
    });
  }
  return res;
};

module.exports = {
  getMonthDays,
  toDou,
  getDateObj,
  startOfMonth,
  getDate,
  dataStr,
  transformDate,
};

這里代碼都比較簡單，注釋也有寫，所以就不詳細解釋了，如有問題就評論，我看到會第一時間回復(fù)的。。。。

在?components -> calendar -> index.js?引入一下?utils.js?文件，然后在created這個生命周期打印一下我們的基礎(chǔ)數(shù)據(jù)，看是否符合預(yù)期：

?如果你打印的和我打印的一致，那么就可以愉快的寫我們組件的界面啦 ??

因為布局大多數(shù)都是樣式方面的問題，這里就不多講解啦，我想大家應(yīng)該都會的，所以這里直接粘貼代碼啦，主要部分我就講解一下

index.wxml代碼如下：

**

<view class="calendar-wrapper">
  <view class="calendar-controller">
    <view class="calendar-picker">
      <text class="arrow left" bindtap="prevMonth"></text>
      <picker
        mode='date'
        fields='month'
        end="2999-12-31"
        start="1970-01-01"
        value="{{monthFormat}}"
        bindchange="dateChange"
      >
        <text class="month-format">{{monthFormat}}</text>
      </picker>
      <text class="arrow right" bindtap="nextMonth"></text>
    </view>
  </view>
  <view class="calendar-header">
    <view class="item" wx:for="{{week}}" wx:key="*this">{{item}}</view>
  </view>
  <view class="calendar-container">
    <view class="item {{item.today?'today':''}} {{item.otherMonth?'other-month':''}}" wx:for="{{calendar}}" wx:key="dataStr">
      <text>{{item.day}}</text>
    </view>
  </view>
</view>

index.wxss代碼如下：

**

.calendar-container,
.calendar-controller,
.calendar-header,
.calendar-picker,
.calendar-container .item,
.calendar-header .item {
  display: flex;
  align-items: center;
  line-height: normal;
}
.calendar-container,
.calendar-controller,
.calendar-header {
  justify-content: space-around;
  flex-wrap: wrap;
}
.calendar-container .item,
.calendar-header .item {
  justify-content: center;
  width: 107rpx;
  font-size: 28rpx;
  height: 80rpx;
}
.calendar-header .item {
  color: #666;
}
.calendar-container .item {
  color: #111;
}
.calendar-container .item.other-month {
  color: #999;
}
.calendar-container .item.today {
  color: #6190e8;
  font-weight: 600;
}
.calendar-picker {
  font-size: 30rpx;
  color: #111;
  padding: 20rpx 0;
}
.month-format {
  margin: 0 30rpx;
}
.arrow {
  display: flex;
  padding: 10rpx 15rpx;
  background: #f7f8fc;
}
.arrow::after {
  content: "";
  width: 14rpx;
  height: 14rpx;
  border-top: 4rpx solid #ccc;
  border-left: 4rpx solid #ccc;
}
.arrow.left::after {
  transform: rotateY(-45deg) rotate(-47deg) skew(5deg);
}
.arrow.right::after {
  transform: rotateY(-135deg) rotate(-47deg) skew(5deg);
}

index.js代碼如下：

**

// components/calendar/index.js
const { getDate, dataStr, getDateObj } = require("./utils");

const getDateStr = (dataStr) => dataStr.slice(0, -3).replace("/", "-");
Component({
  /**
   * 組件的屬性列表
   */
  properties: {},

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    week: ["一", "二", "三", "四", "五", "六", "日"],
    calendar: getDate(new Date()),
    monthFormat: getDateStr(dataStr),
  },

  /**
   * 組件的方法列表
   */
  methods: {
    dateChange(e) {
      const monthFormat = e.detail.value;
      this.setData({
        monthFormat,
      });
    },
    // 上個月日期
    prevMonth() {
      const [year, month] = this.data.monthFormat.split("-");
      const { dataStr } = getDateObj(
        new Date(year, month, 1).setMonth(month - 2)
      );
      this.setData({
        monthFormat: getDateStr(dataStr),
        calendar: getDate(new Date(dataStr)),
      });
    },
    // 下個月日期
    nextMonth() {
      const [year, month] = this.data.monthFormat.split("-");
      const { dataStr } = getDateObj(new Date(year, month, 1));
      this.setData({
        monthFormat: getDateStr(dataStr),
        calendar: getDate(new Date(dataStr)),
      });
    },
  },
  created() {},
});

這里的主要迷惑點就是月份，因為我們得到的月份是轉(zhuǎn)換后的（即月份+1），而js中的月份是從 0 開始的，所以我們獲取上個月的時候月份就需要-2才能實現(xiàn)我們要的效果，而獲取下個月的時候，因為本身我們月份本身就+1了，所以不需要進行操作。

書寫完成布局后，大概會得出下面這個日歷：

?寫到這里，其實整個日歷的雛形已經(jīng)出來了，我們可以通過picker換，可以通過點擊切換，也算一個相對可以使用的日歷組件啦 ??

但是其實還是遠遠不夠的，畢竟，我們連手勢左右滑動切換日歷這個功能都沒有，所以接下來就完善我們這個日歷吧

3|3?無縫滑動思考

你想，既然要做左右滑動切換了，肯定得無縫吧？既然得無縫，肯定不能生成多份吧？那么怎么才能用最少的 DOM 做到無縫呢？答案是我們只需要在我們可視范圍內(nèi)生成 DOM 結(jié)構(gòu)即可，即我們的可視范圍就是三份，如圖所示：

既然說到了左右滑動，肯定少不了我們強大的swiper組件啦，我們這次的日歷組件就是建立在swiper組件下實現(xiàn)的,既然用到了swiper，那么我們的布局肯定需要進行小改，數(shù)據(jù)結(jié)構(gòu)也是，需要進行小改動。

剛才說了，我們的可是范圍是三份，所以我們的數(shù)據(jù)結(jié)構(gòu)就變成了長度為三的數(shù)組，即：

**

{
  "calendarArr": [calendar, calendar, calendar]
}

界面也是，我們新增一個swiper組件，然后遍歷calendarArr這個數(shù)據(jù)，

**

<view class="calendar-wrapper">
    <view class="calendar-controller">
      <view class="calendar-picker">
        <text class="arrow left" bindtap="prevMonth"></text>
        <picker
          mode='date'
          fields='month'
          end="2999-12-31"
          start="1970-01-01"
          value="{{monthFormat}}"
          bindchange="dateChange"
        >
          <text class="month-format">{{monthFormat}}</text>
        </picker>
        <text class="arrow right" bindtap="nextMonth"></text>
      </view>
    </view>
    <view class="calendar-header">
      <view class="item" wx:for="{{week}}" wx:key="*this">{{item}}</view>
    </view>
    <swiper
      circular
      class="calendar-swiper"
      current="{{current}}"
      duration="{{duration}}"
      vertical="{{isVertical}}"
      skip-hidden-item-layout
      bindchange="swiperChange"
      bindanimationfinish="swiperAnimateFinish"
      bindtouchstart="swipeTouchStart"
      bindtouchend="swipeTouchEnd"
    >
      <block wx:for="{{calendarArr}}" wx:for-item="calendar" wx:key="index">
        <swiper-item>
          <view class="calendar-container">
            <view class="item {{item.today?'today':''}} {{item.otherMonth?'other-month':''}}" wx:for="{{calendar}}" wx:key="dataStr">
              <text>{{item.day}}</text>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
</view>

樣式的話，因為swiper組件有默認樣式，高度是150px，而我們這里6 * 80rpx，所以我們需要修改下它的默認樣式，即添加下面的 css 即可:

**

.calendar-swiper {
  height: 480rpx;
}

之后就是書寫我們的邏輯啦，從布局可以看到我們用了touchstart和touchend，本意其實就是判斷我們是向左滑還是向右滑（向上劃還是向下滑），來切換我們的月份

3|4?如何區(qū)分左滑右滑（上滑下滑）

1. 需要定兩個變量供我們區(qū)分是滑動的方向，一個是swipeStartPoint,一個是isPrevMonth
2. 既然我們說到了無縫，那么肯定用戶就會滑動多次，那么我們也需要一個值來計算用戶滑動的次數(shù)，我們定義為changeCount
3. 這點也是最重要的一點，我們需用通過當前我們滑動到第幾個swiper-item，來修改我們的上個月和下個月的數(shù)據(jù)，因為我們知道，當前的swiper-item肯定是中間的那個月份，所以我們也需要一個變量來標記我們當前的是第幾個，我們定義為currentSwiperIndex，針對于這里的邏輯，我們舉個例子：

**

// 假設(shè)我們現(xiàn)在是6月，那么數(shù)據(jù)就是
let calendar = [5, 6, 7];
// 那么我們的 currentSwiperIndex 這時是等于1的
// 假設(shè)我滑動了五月，currentSwiperIndex 這時變成0了,我們的月份還是不變
// 但是我們的邏輯就發(fā)生改變了
// 這時候的上個月變成了7，下個月變成6，我們需要通過 currentSwiperIndex 的值來動態(tài)修改他，即
calendar = [5, 6, 7];
// 半偽代碼
const calendarArr = [];
const now = getDate(currentDate);
const prev = getDate(this.getPrevMonth(dataStr));
const next = getDate(this.getNextMonth(dataStr));
const prevIndex = currentSwiperIndex === 0 ? 2 : currentSwiperIndex - 1;
const nextIndex = currentSwiperIndex === 2 ? 0 : currentSwiperIndex + 1;
calendarArr[prevIndex] = prev;
calendarArr[nextIndex] = next;
calendarArr[currentSwiperIndex] = now;

理清楚上面所有的，基本上我們就可以開始重構(gòu)我們的代碼了

3|5?正式書寫我們可滑動的日歷組件

先定義我們之前的所說的變量，和處理這些變量的方法

**

// 當前的索引值，必須從第一個開始，因為這樣我們才能實現(xiàn)視野內(nèi)的無縫
let currentSwiperIndex = 1,
  generateDate = dataStr, // 當前時間
  swipeStartPoint = 0, // 滑動的坐標
  isPrevMonth = false, // 是否向右滑動
  changeCount = 0; // 滑動的次數(shù)

Component({
  // ...
  methods: {
    // 設(shè)置當前的索引值
    swiperChange(e) {
      const { current, source } = e.detail;
      if (source === "touch") {
        currentSwiperIndex = current;
        changeCount += 1;
      }
    },
    // 獲取手指剛按下的坐標
    swipeTouchStart(e) {
      const { clientY, clientX } = e.changedTouches[0];
      swipeStartPoint = this.data.isVertical ? clientY : clientX;
    },
    // 獲取手指松開時的坐標
    swipeTouchEnd(e) {
      const { clientY, clientX } = e.changedTouches[0];
      isPrevMonth = this.data.isVertical
        ? clientY - swipeStartPoint > 0
        : clientX - swipeStartPoint > 0;
    },
  },
  // ...
});

然后定義一個處理我們?nèi)諝v數(shù)據(jù)的方法，因為我們?nèi)諝v方法是每個時間都需要使用的，所以我們定義個公用的方法，

**

Component({
  // ...
  methods: {
    // 設(shè)置上個月的時間
    getPrevMonth(monthFormat) {
      const [year, month] = monthFormat.split(/-|//);
      const { dataStr } = getDateObj(
        new Date(year, month, 1).setMonth(month - 2)
      );
      return dataStr;
    },
    // 設(shè)置下個月的時間
    getNextMonth(monthFormat) {
      const [year, month] = monthFormat.split(/-|//);
      const { dataStr } = getDateObj(new Date(year, month, 1));
      return dataStr;
    },
    // 生成日歷數(shù)組
    generatorCalendar(date) {
      const calendarArr = [];
      // 轉(zhuǎn)換為 Date 實例
      const currentDate = transformDate(date);
      // 獲取當前時間的日歷數(shù)據(jù)
      const now = getDate(currentDate);
      // 獲取當前時間的字符串
      const { dataStr } = getDateObj(currentDate);
      // 獲取上個月的日歷數(shù)據(jù)
      const prev = getDate(this.getPrevMonth(dataStr));
      // 獲取下個月的日歷數(shù)據(jù)
      const next = getDate(this.getNextMonth(dataStr));
      // 設(shè)置日歷數(shù)據(jù)
      const prevIndex = currentSwiperIndex === 0 ? 2 : currentSwiperIndex - 1;
      const nextIndex = currentSwiperIndex === 2 ? 0 : currentSwiperIndex + 1;
      calendarArr[prevIndex] = prev;
      calendarArr[nextIndex] = next;
      calendarArr[currentSwiperIndex] = now;
      this.setData({
        calendarArr,
        monthFormat: getDateStr(dataStr),
      });
    },
  },
  // ...
});

ps: 因為這里上下月份也可以公用，所以單獨提取出來供其他方法使用

最后，我們只需要在動畫結(jié)束的時候設(shè)置日歷數(shù)據(jù)即可，即：

**

Component({
  // ...
  methods: {
    // 動畫結(jié)束后讓滑動的次數(shù)置0
    swiperAnimateFinish() {
      const { year, month } = getDateObj(generateDate);
      const monthDist = isPrevMonth ? -changeCount : changeCount;
      generateDate = new Date(year, month + monthDist - 1);
      // 清空滑動次數(shù)
      changeCount = 0;
      this.generatorCalendar(generateDate);
    },
  },
  // ...
});

整合起來就是：

**

// components/calendar/index.js
const { getDate, dataStr, getDateObj, transformDate } = require("./utils");
const getDateStr = (dataStr) => dataStr.slice(0, 7).replace("/", "-");
// 當前的索引值，必須從第一個開始，因為這樣我們才能實現(xiàn)視野內(nèi)的無縫
let currentSwiperIndex = 1,
  generateDate = dataStr, // 當前時間
  swipeStartPoint = 0, // 滑動的坐標
  isPrevMonth = false, // 是否向右滑動
  changeCount = 0; // 滑動的次數(shù)
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    duration: {
      type: String,
      value: 500,
    },
    isVertical: {
      type: Boolean,
      value: false,
    },
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    week: ["一", "二", "三", "四", "五", "六", "日"],
    current: 1,
    calendarArr: [],
    monthFormat: getDateStr(dataStr),
  },

  /**
   * 組件的方法列表
   */
  methods: {
    // 設(shè)置上個月的時間
    getPrevMonth(monthFormat) {
      const [year, month] = monthFormat.split(/-|//);
      const { dataStr } = getDateObj(
        new Date(year, month, 1).setMonth(month - 2)
      );
      return dataStr;
    },
    // 設(shè)置下個月的時間
    getNextMonth(monthFormat) {
      const [year, month] = monthFormat.split(/-|//);
      const { dataStr } = getDateObj(new Date(year, month, 1));
      return dataStr;
    },
    // 生成日歷數(shù)組
    generatorCalendar(date) {
      const calendarArr = [];
      // 轉(zhuǎn)換為 Date 實例
      const currentDate = transformDate(date);
      // 獲取當前時間的日歷數(shù)據(jù)
      const now = getDate(currentDate);
      // 獲取當前時間的字符串
      const { dataStr } = getDateObj(currentDate);
      // 獲取上個月的日歷數(shù)據(jù)
      const prev = getDate(this.getPrevMonth(dataStr));
      // 獲取下個月的日歷數(shù)據(jù)
      const next = getDate(this.getNextMonth(dataStr));
      // 設(shè)置日歷數(shù)據(jù)
      const prevIndex = currentSwiperIndex === 0 ? 2 : currentSwiperIndex - 1;
      const nextIndex = currentSwiperIndex === 2 ? 0 : currentSwiperIndex + 1;
      calendarArr[prevIndex] = prev;
      calendarArr[nextIndex] = next;
      calendarArr[currentSwiperIndex] = now;
      this.setData({
        calendarArr,
        monthFormat: getDateStr(dataStr),
      });
      // 通知父組件
      this.triggerEvent("change", this.data.monthFormat);
    },
    // 設(shè)置當前的索引值
    swiperChange(e) {
      const { current, source } = e.detail;
      if (source === "touch") {
        currentSwiperIndex = current;
        changeCount += 1;
      }
    },
    // 動畫結(jié)束后讓滑動的次數(shù)置0
    swiperAnimateFinish() {
      const { year, month } = getDateObj(generateDate);
      const monthDist = isPrevMonth ? -changeCount : changeCount;
      generateDate = new Date(year, month + monthDist - 1);
      // 清空滑動次數(shù)
      changeCount = 0;
      this.generatorCalendar(generateDate);
    },
    // 獲取手指剛按下的坐標
    swipeTouchStart(e) {
      const { clientY, clientX } = e.changedTouches[0];
      swipeStartPoint = this.data.isVertical ? clientY : clientX;
    },
    // 獲取手指松開時的坐標
    swipeTouchEnd(e) {
      const { clientY, clientX } = e.changedTouches[0];
      isPrevMonth = this.data.isVertical
        ? clientY - swipeStartPoint > 0
        : clientX - swipeStartPoint > 0;
    },

    dateChange(e) {
      const monthFormat = e.detail.value;
      this.setData({
        monthFormat,
      });
      generateDate = getDateStr(monthFormat);
      this.generatorCalendar(generateDate);
    },

    // 上個月日期
    prevMonth() {
      this.setData({
        monthFormat: this.getPrevMonth(this.data.monthFormat),
      });
      this.generatorCalendar(this.data.monthFormat);
    },
    // 下個月日期
    nextMonth() {
      this.setData({
        monthFormat: this.getNextMonth(this.data.monthFormat),
      });
      this.generatorCalendar(this.data.monthFormat);
    },
  },
  ready() {
    this.generatorCalendar(generateDate);
  },
});

頁面中使用，

**

<calendar bindchange="calendarChange"></calendar>

**文章來源地址http://www.zghlxwxcb.cn/news/detail-497501.html

Page({
  calendarChange(e) {
    console.log(e.detail);
  },
});

到了這里，關(guān)于教你如何寫一個符合自己需求的小程序日歷組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！