自已擼的一個小程序日曆組件

📅 小程序日曆組件

概述

這是一款簡單易用的小程序日曆組件，實現了選擇開始時間和結束時間的功能。克隆 maxrisk/calendar 以後可在微信開發者工具中打開查看示例。

項目地址：https://github.com/maxrisk/ca...

示例

index.wxml

<calendar least-days="{{ leastDays }}" bind:calendarchange="onCalendarChange" />

index.json

{
  "usingComponents": {
    "calendar": "/components/calendar/index"
  }
}

index.js

import { formatTime } from '../../utils/util.js';

Page({

  data: {
    leastDays: 3
  },

  onCalendarChange: function (e) {
    const startDate = new Date(e.detail.days[0]);
    const endDate = e.detail.days[1] ? new Date(e.detail.days[1]) : '';

    console.log(`選中 ${formatTime(startDate)} ~ ${endDate ? formatTime(endDate) : ''}，共 ${e.detail.count} 天`);
  }
})

組件屬性

參數	類型	說明	默認值
month-count	Number	顯示幾個月份	2
least-days	Number	至少選擇多少天	0
time-arr	Array	開始時間和結束開始時間（時間戮），沒選中時爲 0	[0, 0]

組件事件

事件名稱	說明	回調參數
calendarchange	在選擇日期時觸發	event